Beauty & Brains in Branding & Web

Designing for Mobile Should Be Part of Your Business Strategy

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:

  1. /* desktop and above */
  2. @media (min-width: 980px) { … }
  3. /* tablet to desktop */
  4. @media (min-width: 768px) and (max-width: 979px) { … }
  5. /* phone to tablet */
  6. @media (max-width: 767px) { … }
  7. /* phone */
  8. @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.

Navigation
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.
Forms
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?
Text and Copy
“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://bostonglobe.com

http://www.iso.org

http://www.tuj.ac.jp

http://www.lottanieminen.com

http://www.microsoft.com

http://www.smashingmagazine.com

http://www.starbucks.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.

Share this!
About Asrar

Asrar is an integral part of the development team at HTC, transforming concepts and ideas into functional applications. He is a creative web developer who can write robust code and is also gifted with a flair for design. Guided by the principles of software engineering and user experience, he strives to develop web and mobile apps that not only have awesome functionality, but are a pleasure to use as well. Born and raised in Montreal, you can be sure that when he’s not programming, he’s either playing hockey, watching hockey, reading about hockey, talking about hockey, or updating his fantasy hockey lineup. He can be reached at asrar[at]htc.ca or on Twitter at @asrar_ca.

Speak Your Mind

*