Back in the day, you designed for web browsers and email programs for users with a computer, sitting on their desk, with a good internet connection. Today, more emails are read on phones than on computers, and more people than ever browse the web on smartphones and tablets. More internet-connected devices hit the market every day. Plus, with larger screens for desktop and laptop computers, people often have more than one browser or email window open at a time, usually narrower than their full screen. So, your site and emails may look terrible almost everywhere your customers are looking at them. Web designers and the companies that hire them need to start thinking and working differently to make their sites accessible on the ever-growing combinations of devices and window sizes. It’s simple, really: The easier you make your sites and emails to use on mobile, the happier your customers will be. Obviously, we can’t cover everything you need to know about responsive design in a single Slideshare, but hopefully this information gives you a head start. Feel free to contact Scott Design if you have questions or suggestions about going mobile with responsive design. View the full blog post at https://www.hotdesign.com/marketing/why-ignoring-mobile-is-crazy/ info@hotdesign.com www.hotdesign.com 831-531-7722

1. www.hotdesign.com
Why ignoring
mobile is crazy
www.hotdesign.com

2. www.hotdesign.com
Why ignoring mobile is crazy
Back in the day, we
designed websites and
emails for computers.
Now, people use phones
and tablets more than
computers and read more
emails on phones than
on computers.
The better your sites and
emails work on mobile,
the happier your
customers will be.
ATTENTION, CITIZENS!
A BRAVE NEW
WORLD AWAITS!
ONE FILLED WITH
MIRACULOUS MOBILE
DEVICES!

3. www.hotdesign.com
Overview: What’s in it for me?
Reach customers, extend your brand,
improve your bottom line.
Know the best way to design and
maintain websites and emails.
Get better search engine results.
Give your customers a better
experience everywhere.
Make web and email design more
efficient and less expensive.
It’s called “job security,” people.
WHY WOULD
ANYONE WANT MY
NEW SIGNATURE SCENT IN
ANYTHING SMALLER THAN
A ONE-LITRE BOTTLE?

4. www.hotdesign.com
AH, THE HEIGHT OF
CULINARY PERFECTION.
EVERYTHING IN ITS PLACE,
AND THE VEGGIES DON’T
TOUCH MY SALISBURY
STEAK.
Early design: fixed screen size
In the beginning, browsers and
email apps filled up the screen.
We used Internet Explorer and
Outlook on a Windows computer.
We all had basically the
same experience.
That’s not the case today.

5. www.hotdesign.com
Say Hello to iPhone
Overnight, people began using phones
for the web and emails.
Computer screens also got bigger, and
users today often resize their browser
and email windows to be tall and
narrow or wide and short.
Get the message:
There’s no longer a standard
size or shape for a screen —
and there will never be one again.
YEAH, RIGHT, JIM. LIKE THE
INTERNET IS GOING TO
MAGICALLY APPEAR ON MY
ANTENNA PHONE 3000.

6. www.hotdesign.com
Talk about an explosion!
Businesses have to go mobile to
win, serve, and retain customers.
• Mobile is now 1/3 of all web traffic.
• 1/4 of online searches are mobile.
• 1/2 of emails are read on mobile.
• We spend more time on mobile
devices than on computers.
Websites and emails that aren’t
mobile-friendly don’t add up to
good business.
IT DOESN’T TAKE
ADVANCED MATH TO
FIGURE IT OUT.

7. www.hotdesign.com
Newsflash: Business people use mobile phones!
Business users want to connect with
brands on mobile.
• 90% of senior execs use smartphones
for business.
• 85% of B2B customers search for
business solutions on mobile.
• 59% of B2B execs like purchasing
on mobile more than by phone.
• 4% made purchases of $100,000+
on mobile.
So don’t think you don’t have to go
mobile, Mr. B2B Business Owner.
I CAN USE
MY PHONE
AT WORK?!?
THIS CHANGES
EVERYTHING!

8. www.hotdesign.com
Nowadays, everybody is Dick Tracy
Websites today have to work
on computers, phones, tablets,
watches, TVs, game consoles,
home appliances, and even cars.
The list of devices that can
access the web keeps growing.
Face the future: This rapidly
expanding, connected world
is not stopping any time soon.
Over and out.
THINGS WERE MUCH
SIMPLER WHEN ALL I HAD
TO WORRY ABOUT WAS MY
2-WAY WRIST RADIO.

9. www.hotdesign.com
A pleasant enough looking website
This site for a Fortune 15 company
was designed for a computer.
EVEN UNDER
ALL THIS SCRUTINY,
I’M STILL THE MOST
BEAUTIFUL WOMAN
IN THE WORLD.

10. www.hotdesign.com
Don’t let this happen to you
The same site in a smaller window
and on a phone. What happened???
WHAT WILL I DO
ONCE MY YOUTH
IS GONE AND MY
LOOKS HAVE
FADED?
HAVE I REALLY AGED
THAT MUCH IN SO
LITTLE TIME?!?

11. www.hotdesign.com
The problem with desktop sites on mobile devices:
Users have to scroll, pan, pinch,
and zoom to see anything.
It’s hard to click on tiny links.
You give the impression that you
do not care about your users.
You appear out of touch.
Don’t give customers a ready-
made excuse to leave your site
and find one that’s easier to use.
I HAVE NO IDEA
WHAT YOU PEOPLE
ARE COMPLAINING
ABOUT. I LOVE
PANNING,
PINCHING …
… AND
ZOOMING!

12. www.hotdesign.com
Two sites = Twice the headaches
Developing two sites or creating a
site and mobile apps is incredibly
wasteful and inefficient.
• You have to update two sites or the
site and the apps for each phone.
• You need twice as many servers
and programmers.
• You confuse search engines.
• You don’t give users a consistent
brand experience.
Avoid headaches: Fix your existing
site to make it look good everywhere.
DAMN BUGS!
I CURSE THE DAY THEY
CONVINCED US TO SERVE
MULTIPLE VERSIONS
OF OUR SITE!

13. www.hotdesign.com
Responsive Design to the rescue!
Lay out sites and emails that work
everywhere, with a minimum of
resizing, panning, and scrolling.
Three main components of
responsive design:
• A fluid grid
• Flexible images
• Media queries
Responsive design ensures that
content re-flows and configures
to fit any viewport size.
COMING UP, ONE
DELICIOUS CHOCOLATE
MILKSHAKE AND ONE
WEBSITE THAT DOESN’T
SUCK ON MOBILE.

14. www.hotdesign.com
For example...
Check out this website
that works at many sizes
thanks to responsive
web design:
• Wide desktop
browser window
• Narrow desktop
browser window
• Tablet
• Phone

15. www.hotdesign.com
First thing, let go of the idea of complete control
Fixed layouts with items placed
precisely are a thing of the past.
A flexible grid is the first step to
make your site responsive.
Flexibility allows your content to
shine no matter how it is viewed.
Go responsive and let your
content fly free.
DON’T WORRY.
IT’S GOING TO BE FINE.
82ND
MOBILE SQUADRON
HAS YOU COVERED.

16. www.hotdesign.com
Less is more
Think about mobile users first.
Don’t make them wade through fluff
to find what they want.
The most important info should be
“stacked” first for mobile.
Streamline to just the essentials.
Don’t make them eat a full meal
if they just want dessert.
THAT TV DINNER GUY IS
OUT TO LUNCH.
WHY WASTE YOUR
TIME ON VEGGIES AND
MYSTERY MEAT …
… WHEN YOU CAN SKIP
RIGHT TO THE DONUTS?

17. www.hotdesign.com
Get right to the point
Prioritize your content, putting your
most essential stuff near the top of
your page or email.
Put content that is less essential
lower on the page or a sub-page.
Customers will appreciate it:
no pinching and zooming to
see all the content.
If you upset your site visitors,
they’ll leave faster than a
starship at warp speed.
PUNY HUMANS!
TELL ME WHAT I WANT TO
KNOW BEFORE I DESTROY
YOUR ENTIRE PLANET!

18. www.hotdesign.com
Update your CSS
Figure out your “break points.”
Make sure fonts are legible, links
are easy to tap, you’re not using
plug-ins, and users don’t have to
scroll side-to-side, pinch, or zoom.
Keeping mobile visitors on your
site longer provides a good ROI.
You have a license to code
a clean, responsive site.
IT HAD TO BE DONE.
SOME CODE JUST
NEEDS KILLING.

19. www.hotdesign.com
Let it flow
The layout should change as the
viewport changes.
Go from four columns in a wide window,
to two columns in the middle, to one
long column on a phone, for example.
Order from the most important
to the least important items.
One set of content, one set of rules, a
consistent experience across devices.
Just like magic.
I CAN’T
BELIEVE MY EYES!
IT’S LIKE MAGIC!

20. www.hotdesign.com
Search engines love responsive web design
Responsive websites get better
search results.
• Google ranks responsive sites higher
and even labels them “mobile-friendly.”
• Google punishes duplicate content,
like desktop and mobile versions.
• All links to a piece of content go to one
page; not split between two pages.
• More important than search engines
loving your site, your users will love it.
Go mobile — and have the site that
everyone falls in love with.
OH SURE,
YOU MAY RANK HIGHER
IN SEARCH RESULTS,
BUT IN THIRD GRADE,
I GOT MORE VALENTINES
THAN ANYONE
IN MY CLASS!

21. www.hotdesign.com
If more emails are read on phones,
why are you still designing them for computers?
• The first link in a responsive email
gets 30% more clicks than the first
link in a non-responsive email.
• Responsive emails get 15% more
clicks than non-responsive emails.
• Most email marketers plan to use
responsive email design this year.
Don’t let customers break up
with you over hard-to-read emails.
Your competitor is waiting to
pick up the pieces.
SO LONG, PERRY.
I’M LEAVING YOU FOR
SOMEONE WHO SENDS ME
EMAILS I CAN ACTUALLY
READ ON MY PHONE.

22. www.hotdesign.com
You are not your audience
Don’t just test on your own computer.
• Test on a Windows computer, a Mac, a
laptop, a tablet, and different phones.
• Widen and narrow down your browser
and email windows to see how it looks.
• Test on browsers, email apps, and
web-based email services.
• Test in special browsers, apps, sites,
or devices that your customers use
The hard work pays off:
More testing = More happy users.
WHAT I DO CARE
ABOUT IS HOW
PATHETIC IT IS ON
EVERY MOBILE PHONE
IN THE WORLD!
I DON’T CARE
HOW GREAT IT
LOOKS ON YOUR
COMPUTER!

23. www.hotdesign.com
What are you waiting for?
Responsive design is taking off:
• The number of responsive top-ranked
websites doubled last year.
• 3/4 of organizations rank mobile
as important or critical this year.
• 1/3 of small businesses plan on
rebuilding their websites this year.
It’s a great time to carve
out a competitive edge…
while you still can.
MAYBE IF I JUST SIT
HERE AND DO NOTHING
THIS HORRIBLE MOBILE
FAD WILL PASS, AND
PEOPLE WILL GO BACK TO
ONLY USING COMPUTERS.

24. www.hotdesign.com
Any questions?
If you have questions about going
mobile with responsive design,
send us an email, call us, or leave
a comment on our website.
info@hotdesign.com
www.hotdesign.com
831-531-7722
The creative agency for innovative companies
HEY, I JUST
MET YOU,
AND THIS
IS CRAZY,
BUT HERE’S
MY NUMBER,
SO CALL
ME MAYBE.