HP Technology at Work

The must-read IT business eNewsletter

Learn to design a mobile-friendly website

October 2011

You’ve spent some significant resources developing your company’s website. But the world has moved on. Now it seems that everyone you know has a smartphone or a tablet. Perhaps you’re wondering whether you should also ensure your website is mobile-friendly. The answer is “yes!” Anyone who has browsed a regular, non-mobile site from a mobile device will tell you: it’s tedious, clunky, and difficult to navigate. Not a good way to serve your customers.

Providing quality mobile user experience (UX) to your mobile customers is more than a luxury—it’s a business necessity. We’ve compiled some tips and considerations for your mobile-friendly website.

“There are some simple ways of coding your site that will allow it to detect the type of device users are browsing from,” says Ryan Kirkman, Senior UX Designer Mobile at media company SayMedia. “Since the technology and strategies are available, it’s better to just use them to create the best customer experience that you can.”

Gauge your approach

The first question you should answer is, how mobile should your website be? Can you update your existing website, do you need to build a new one, or should you invest in developing a full-blown mobile app?

“How you approach mobile depends on the types of business needs,” says Kirkman. “An e-commerce business may want to rethink its site for the mobile experience, whereas a less transactional business, such as a pure content provider, can build out an existing site in ways that allow it to scale dynamically to the size of the viewer.”

Style sheets to the rescue

CSS (Cascading Style Sheets), which is a type of coding language used in tandem with HTML, can provide the scalability that a mobile-friendly website needs. CSS essentially separates your content from your visual layout, allowing flexibility in how your layout appears on various devices. This is different from a site that embeds content and style rules within the HTML code, leaving it fixed—the content and layout appear the same, regardless of the size of the viewer.

CSS on the other hand, uses style sheets that apply style elementsfont, size, spacing and so on—to content as it is accessed. CSS specifies a priority scheme to determine which style rules should be applied to particular situations—a smaller screen size, for example.

CSS3, the latest version of the style sheet standard, allows maximum flexibility by including media queries, which check for certain conditions and applies different style sheets based on those conditions. For example, you can have one style sheet for standard desktop monitors and a different style sheet for mobile devices.

Additional considerations

One caveat to keep in mind, however, is that earlier versions of Android™ don’t support some advanced features in CSS3. (View compatibility tables for assess information) To avoid compatibility pitfalls, develop a good sense of your customers’ technical sophistication and test your website thoroughly.

Basic design elements to consider

CSS provides a flexible design format, but you still need to consider some basic design elements in the context of mobile viewing.

1. Use fewer words, larger font
The amount of text should be minimized on any website, but for mobile viewing, it’s especially important to streamline your copy to only what is most important. Increased to a readable size, there are only so many words that can fit on a two-inch-wide screen.

In addition to reducing copy, you’ll also want to ensure that your font size is large enough to remain readable on a small screen. Headings and subheadings should be even larger and more prominent. Unfortunately, no standard rules of thumb exist for applying elements such as font size due to the wide range of device characteristics. So, again, know your customers and test thoroughly.

2. Keep imagery strategic
Imagery can really enrich the visual experience of a site, but it can also slow it down. The ITU reports that, worldwide, the number of 3G or higher mobile subscriptions will reach 940 million by the end of 2010. But that’s still just 18% of total mobile subscribers.

“That leaves the other 82% on something much slower. In addition, all mobile devices have different screen resolutions, which means your images need to be high enough quality to not appear distorted on higher resolution screens, but also compressed enough to ease load times on slower mobile connections,” says Kirkman.

Limit yourself to only using imagery that provides genuine value—does it aid comprehension, illustrate a concept, express your brand? And be sure that you’re using the smallest possible file size to aid in load times.

3. Note the finger-to-button size differential
Don’t make buttons too small or too close together. Even with a fluid design, buttons will appear much smaller on a mobile screen. And pressing the wrong button accidentally can be a frustrating user experience, especially if browser speeds are on the slower side.

Even if you apply some of these tips to your existing website, without undergoing a top-to-bottom redesign, you’ll still be providing a better experience than if you did nothing at all. So jump on the mobile bandwagon; it’s time—and your competitors may already be onboard.

For more information
W3schools.com: cascading style sheet
HP's The Next Bench Story blog: webOS for smartypants

Android is a trademark of Google Inc.


Popular tags

Most read articles

HP Technology at Work

Contact Us
Search archive
Customize your content