If you’ve ever tried to use a regular web site on a smartphone or tablet, you know how aggravating it can be: you have to zoom in to read the thing, but then you have to swipe back and forth and every which way to see it all. And tapping on links is a dicey proposition; maybe you hit the right link, or maybe you didn’t, and maybe you hit them both and the browser app has to ask you which one. It’s enough to make you go back to an old-school “dumb” phone. (Well, maybe not…those smartphones sure are addictive, aren’t they?)
If you have a web site and a significant chunk of your visitors are viewing it on mobile devices, it’s worth your while to think about optimizing it for mobile browsing. This means designing pages specifically for small screens and big fingers. This is distinguished from mobile apps, which are standalone programs that users download and install on their devices.
How Mobile Optimization Works
There are two basic options when optimizing for mobile. One is designing a separate set of pages for use on mobile devices, and the other is simply making your existing site responsive for both mobile and traditional devices.
Generally, a separate set of pages will have “m.” in the URL (m.example.com). Mobile versions of browsers can tell web servers that a request is coming from a mobile browser; the web server can automatically redirect these requests to the mobile version. The trouble with the separate-pages approach is that now you have, essentially, two web sites to maintain and keep in sync. But if your regular site is still heavily used by traditional PC and laptop users, and a mobile-optimized version wouldn’t look good for them, it might be the best way to go.
Optimizing a site for mobile but still having it look good on traditional devices is a bit more tricky, but you don’t have two sites to maintain. This is called a responsive website.
Regardless of the approach you take, there are some technical settings that you will need to implement for mobile. One is the tag, which can help determine how the page is displayed with respect to the device’s screen width. Another is CSS media queries, which can choose a set of styles based on the device’s viewport width and orientation (portrait vs. landscape).
From a design standpoint, how do you create a page that won’t frustrate mobile users? Here are some tips:
- Simplify the page design. There’s a tradeoff here: On the one hand, you have a limited amount of real estate to work with, so you want to use it as efficiently as possible. On the other hand, if you pack things in too tightly, users won’t be able to accurately tap on buttons and links. Spread things out a bit, and decide what’s really essential on the page.
- Cut out the heavy graphics. Apart from the fact that they might look awful on a small screen, they may take too long to load over what could be a slow wireless connection.
- Simplify forms. If you have a form, decide on the handful of fields you actually need, and don’t complicate it with a lot of radio buttons, check boxes, and drop-down lists. Typing on a small device is cumbersome enough—don’t make your users do a lot of it.
- If you do maintain separate mobile and traditional pages, include a link from each one to the other. Users of larger tablets, for instance, may prefer the regular site. Use a cookie to remember the user’s most recent choice.
- Take advantage of mobile device features such as location (“Find the nearest store”) and click-to-call for your phone numbers.
Because mobile device users aren’t tethered to their homes or offices, reaching them opens up a whole new world of opportunity. Making your site mobile-friendly is an important first step. Do some thinking about how you want to make it happen.