Mobile Web Design Dos and Don’ts for 2009

Over at Smashing Magazine they have a great article up about what it takes to make a great web site that is optimized for mobile devices, with some good advice and observations about the current state of mobile web-design.

The article is divided up into five sections, each covering a different aspect of mobile web-design, but for the most part includes simple tips for designing web sites in an age when people are increasingly accessing the web through cellular phones and other mobile gadgets. There’s no techno-babble here, just sound and straightforward advice.

Some of the article’s suggestions may seem obvious, but it is fundamental design features like the ones Smashing Magazine makes note of that can make or break a mobile site for users, so this is indispensable knowledge.

Some important points made in the article:

Simplicity is key: Smashing recommends that you should keep mobile sites down to the most fundamental features, since mobile web pages must be condensed into a small size. As such, only the most central features of your site should be included on the mobile page, meaning you should keep the site’s wheat to chaff ratio as high as possible. As the article says:

When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible.

Prioritize your content: This piece of advice is related to the last, because keeping your mobile site simple means choosing only the most important features, and requires you to distill the most crucial aspects of your website down into the mobile format. Surprisingly, Smashing recommends that mobile sites should not include any ads, in order to save much-needed space and keep the visitor’s experience as straightforward as possible. As the article explains:

One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. Of course, all websites should be user-focused, but because most websites are run commercially for business purposes, there are often elements that aren’t necessarily important to visitors, such as banner ads. While advertisements have largely become an accepted part of the Internet, most mobile websites are ad-free. The content available on a mobile website is typically of the highest priority to the average mobile visitor, not the company, although in the end the company benefits by having a more usable website.

According to Smashing's article, smaller mobile screen sizes are a thing of the past

Screen size: One issue unique to web-design for mobile devices is screen size; different mobile devices have different screen sizes, and when screen real-estate is limited due to small screen-size, tailoring and optimizing  your site to a specific screen size is an important step in making sure your mobile page looks good.

According to the article, if you’re going to develop your site for a particular screen size, 240×320 is the size you ought to pick: it’s the most common screen size for mobile devices, and its use is on the rise. The article explains its reasoning, citing two articles on the subject:

The results of the study behind these articles show that 240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Many newer mobiles and smart phones have larger screens, but smaller ones are largely a thing of the past.

Focus on the user: This is another topic that is related to earlier recommendations. Mobile sites often can’t be simple mirrors of their full-fledged counterparts, so decisions must be made about what features should be included in your mobile page. When deciding what is essential for a mobile site, it is important to think about what the user is doing at your site, why they’re visiting, and what they want or need to do. A mobile page-user’s motives may diverge drastically from that of someone using a normal, non-mobile web site. As the article explains:

Another aspect to this issue that must be considered is the status of the average mobile visitor. What are they doing? Why are they accessing the website at that time? What are they likely and unlikely to have any interest in? Keep in mind that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Some other interesting tips:

• Use alt tags whenever you can, because some visitors will have images disabled!
• Headers take on increased importance in mobile web-design, where design capabilities are limited by the format, so make use of them!
• Keep colour contrast in mind, because on small mobile screens, readability takes on much more importance! Good colour choices ensure that your site is easy on the eyes, and colour choices may need to be different on mobile phones, which may display colours differently than a monitor.
• Finally, Smashing recommends you test the site as much as possible! The only way to figure out of your site looks good on a particular phone is to try it on that phone. Like any good site, testing is key, but for mobile sites, which pose some very idiosyncratic difficulties, testing is uniquely important.

Overall, Smashing’s mobile web-design tips are essential for anyone thinking of making their way into the world of mobile site-design. The article even has links to some useful resources at the bottom, so check out the article here if you’re looking for mobile site-design advice!