Mobile Website Design Best Practices: The Good

We have at last arrived at the final installment of The Ugly, The Bad, and The Good of mobile website design. We left off last time reviewing some technical hurdles and background of basic Mobile UI concepts. In this article we’ll be discussing all the good things that make a mobile website perform well while providing a professional presence for your business to mobile users.

Final Installment — The Good

If you didn’t catch it in the previous articles, we’re focusing on mobile websites that leverage HTML5 versus mobile apps. We’re interested in adapting existing website content for the mobile platform. Hopefully these articles have given you some fundamental guidelines while pointing out common pitfalls, but they aren’t an exhaustive resource if your ready to build. You will find many excellent resources that elaborate on the concepts we've touched on by searching for mobile website design.

Where to start?

Your brand identity is key and is a good starting point for your new mobile site design. Just as you have carefully controlled your company’s brand elements on the web and in print and media, you will want to do the same here. As mentioned in the previous article, some adaptation of your brand elements may need consideration for the small screen.

Regardless of the changes you may make, remember to create as much brand continuity as possible in light of your mobile website’s content and layout requirements. Common UI elements are a good thing as we’ll discuss below, so your brand identity is the unique identifier for your mobile site.

If you have a well established brand, the color palette will provide established standards for the look and feel. If you have custom fonts as part of your brand ID, you may need to compromise here to leverage fonts that are optimized for the small screen — a critical usability aspect of your design.

As with desktop web browsers, it is best to constrain your font selections to the ubiquitous default choices:

• Arial
• Verdana
• Georgia
• Trebuchet
• Times New Roman

A note about the new Windows Mobile devices is that, strangely, these standard fonts that we have grown up with are not installed by default and users must install them manually.      

Make it simple      

Next you will consider the layout options, which may be driven by your content needs. A one-column layout is the best option for the small screen. By using a one-column layout, text and graphical buttons can be larger and therefore easier for the user to use.

A trend of extensive mobile users is speed. I’ve observed my 11 year-old daughter (consider her an extensive mobile user) using her iPod Touch. Whether she is chatting with her friends, playing games, searching the web, whatever — her rapid-fire fingers push the envelope of most mobile interfaces’ capabilities.

This phenomena begs for simple, open, and low bandwidth user interfaces. Consider whitespace an asset, keep graphics to a minimum, and leverage CSS to manage your display style.

The navigation scheme for your site should follow the same philosophy. In desktop web interface design, it was always considered a best practice to provide single-click access to any relevant content. That has somewhat been side-lined in mobile UI design best practices. This is due to the constraint of the small screen, and by the advantage of the touch-screen. It is a different paradigm altogether. Users are fine with moving in a linear fashion through your content and you can’t go wrong by adapting the standard navigation mechanisms that you see in most sites and apps.

UI standards are as important to design as they are to street signage. When you are driving and see the big red and white octagonal sign, it isn’t necessary to actually read it. Stick with what people are used to.

Make it clear

Chances are you will be hiring or providing a developer with instructions, requirements, and specifications for your mobile site. Providing a clear and concise specification document will not only expedite the production step, but the outcome will be what you expect. If your requirements are unclear, or the design specifications are “fuzzy,” you may be surprised by production cost overruns, and a UI design that isn’t quite what you expected.

Make it easy

The proliferation of mobile devices today has inspired many developers of open source tools, for platforms such as WordPress and Drupal, to provide extensions or modules that takes the heavy lifting out of building your site. At the same time much of the user interface can be created by using a mobile site template, which can be customized to accommodate your brand and style requirements while retaining common UI elements that mobile users are used to.

We mentioned in the previous article that if your website is already on a CMS platform such as Drupal, you can take advantage of these types of tools and get your mobile site up and running at a fraction of the cost it would take to build it from scratch. An additional advantage is the common CMS (content management system) for both your desktop and mobile site.

Stay tuned to Digett for more information about mobile technology and how to make your online efforts successful.

Image: The Good, The Bad, and The Ugly - Director, Sergio Leone