ptg16476052446 LESSON 16: Using Responsive Web Design
friendly. That means that in order to get decent placement in one of the largest search
engines in the world, your site needs to work on mobile devices.Mobile First
Instead of focusing on the desktop and how your website looks on your personal browser,
you should start by building a website that looks amazing on a mobile device. When
you design first for mobile devices, you have to focus on what the content is for the site.
Phones are small and don’t have a lot of room for extraneous bells and whistles. Instead,
you need to develop a laser focus determining what content the customers really need and
what is only nice to have. Mobile first websites make sure that everyone can see the criti-
cal content.
I’ll go into more details about what makes a site mobile friendly in Lesson 21,
“Designing for the Mobile Web,” but there are a few things you should remember:
n Limit your designs to one column. Feature phones can only effectively view one
column, and even smartphones work better if the layout is simple.
n Limit the navigation choices. This doesn’t mean you limit your mobile site—the
best sites let their customers get to any of the content. But the navigation should be
simple. What are the three or four most important (to mobile customers, at least)
pages? Those are the ones that should be in your navigation.
n Limit the file size. Mobile phones can download quickly, but even on the most
advanced mobile networks, a page that takes too long to download is a page no one
will visit. But more importantly, many mobile users have data limits that can result
in large charges if they go over. No one wants to visit a site if they think it will cost
them a lot of money.
n Limit URL lengths while making links longer. Typing in a long URL on a phone
is difficult, and so is tapping on a tiny link. People don’t do things that are difficult.
n Limit your use of frames, Flash, and tables. Frames are not valid in HTML5
(except, of course, inline frames), and they don’t work well on smaller screens.
Flash isn’t supported on most mobile operating systems. And tables are hard to
read on most small screens; some mobile phones won’t display them at all.
n Do not limit your testing. The one thing you should not limit is your testing. Test
on actual devices, if you can, not just emulators. And test on as many devices as
you can.