You’ve finally done it!
You finally got your slick new website up and running, with a cool jQuery slider, a Twitter feed, a Google “+1” button and stock photography of a cute tech support girl. You’ve tested in IE7, Firefox, Chrome, and Safari and everything looks great! Yay!
You post a link to the site on your Facebook wall and invite your 500+ friends to check it out. And they do… but there’s one problem: 250 of your friends are checking out your website on their smartphone.
They can’t read the text because it is too small on their device. They zoom-in to read the text, but now they can’t see your cool jQuery slider because half of it is off the screen. They scroll sideways, then up and down a few times, seeing everything but understanding nothing, then close their browser.
Probably not the first impression you were hoping for, right?
This is why developing for mobile should be part of your business strategy. With more people browsing, mailing, buying, watching, sharing, searching and reviewing on their smartphones than ever before, the mobile space should no longer be an afterthought. After all, 61% of customers who visit a mobile unfriendly site are likely to go to a competitor’s site (IAB). The good news is that it is not too late. The even better news is that developing for mobile is easier than it sounds.
Don’t Rebuild – Respond
In 2007, the mobile strategy was to build a completely new site which is optimized for mobile devices. The server would detect a mobile device and redirect the user to the mobile site (example.com vs. mobile.example.com). This worked pretty well, the only downside being that two front-ends needed to be updated instead of just one. But as websites became more interactive and more complex, it was increasingly clear that this strategy was not ideal.
Last year, as front-end technologies like CSS3 and HTML5 became more accepted and supported by browsers, a pattern known as responsive design emerged. Specifically, responsive design takes advantage of CSS3’s media queries to style elements on a page based on the viewport of the device. This allows developers to define a set of style rules for devices whose screen width is, for example, 1024 pixels wide and another set of style rules for devices with a screen width of, say, 480 pixels. You can add as many style rules as you want for any number of screen widths as you want. This means that your main website can adapt itself to whatever screen size you want to design for – be it a desktop computer, laptop, tablet or mobile phone – in landscape or portrait orientation. One site to rule them all!
The advantages of responsive design are many. It takes less time to develop than creating a mobile-only site. Since there is only one website to maintain, there is less overhead and duplicate content. Not only will your site look great in all devices, your content will be better understood which will lead to more conversions. As an added bonus, your customers will definitely notice and appreciate the fact that you took the time to make your content consumable in the platform of his or her choice. (Personally, I think that appreciation is worth the added development costs alone, as great experiences lead to lifelong customers – but that’s another topic for another day.)
Mobile Strategy
Now that you’re convinced about designing for mobile (you are convinced, right?), it’s time to decide on a mobile strategy. Are you going to design for just mobile phones, or tablets, too? The common practice is to design for the main three sizes: desktops, tablets and phones. Some people go as far as to include specific styling for large display monitors and differentiate between landscape and portrait orientations of hand-held devices. Those options should be considered depending on the needs of your customers, your timeframe to launch, and your budget.
The following table outlines the common device widths which are targeted when creating a mobile strategy:
| Device Type | Viewport Width |
| Desktop, laptops, tablets (landscape) | 980px and above |
| Tablets (portrait) | 768px and above |
| Phones to tablets (portrait) | 767px and below |
| Phones (landscape) | 480px and below |
To target these screen sizes with CSS is fairly simple:
- /* desktop and above */
- @media (min-width: 980px) { … }
- /* tablet to desktop */
- @media (min-width: 768px) and (max-width: 979px) { … }
- /* phone to tablet */
- @media (max-width: 767px) { … }
- /* phone */
- @media (max-width: 480px) { … }
Information Architecture
Before diving into code, we need to realize that mobile users have different needs and tolerance levels than desktop users. Mobile sites need to be a lot simpler, as using them is inherently more difficult due to the screen size and the fact that there are no traditional hardware input devices like a mouse or a keyboard. Here are a few tips to help your mobile site become more user-friendly:
Navigation on the CBC.ca website when viewed on a mobile device.
The navigation must be as simple and concise as possible, so users can find the information they need as quickly as possible. Vertical navigation items, similar to native app navigation, seem to work best. Note: avoid drop-down menus or menus which have a mouseover effect. There is no mouseover effect on mobile devices, because there is no mouse.
Filling out forms is time consuming and not fun. It’s even less fun when you are using a tiny, virtual keyboard. Keep only the required fields on forms, and possibly reconsider what is actually required. Do you really need a user’s postal code?
“Remove half the words on each page, then remove half of what’s left”, says Steve Krug, author of the famous usability book, Don’t Make Me Think! This could not be truer for mobile. Reading a lot of text on a mobile device is simply annoying. Reduce the amount of copy. And of course, make sure the font size is large enough to be legible without having to zoom in.
Images
Mobile users may have a slower download speed than desktop users, so the amount and size of images should be reduced as well.
Examples
Here are few sites which implement responsive design nicely. To see it in action, you can visit the site on your desktop or laptop and resize your browser window to watch how the site magically adjusts itself to the browser’s width.
http://www.smashingmagazine.com
By adding some fairly straightforward CSS, your website can be ready to adapt to all sorts of screen sizes. You will be nicely prepared for the coming years, as mobile is expected to continue growing at a rapid pace.
And of course, your Facebook friends will reply to your wall post letting you know how awesome your website is.
About Asrar
Speak Your Mind