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!

Quick Hands-on with Fennec, Mozilla’s Mobile Browser

Mozilla is looking to spread the success of their Firefox browser into the world of mobile phones, and have moved one step closer with the release of the latest alpha version of Fennec.

Fennec, Mozilla’s mobile-based counterpart to Firefox, hit alpha version 2 this past week. For now the web browser only works on the Nokia N810 line of internet tablets.

Even then it is only designed for testing purposes, so that users can work out bugs and web developers can give feedback and suggestions. Users can also install it on any Windows, Mac, or Linux machine for testing purposes as well.

A quick install of the latest test-version of the program shows a fairly sparse but simple interface, with big, easy-to-read text and straightforward controls. These controls are pretty clever, allowing you to view the full width of a page while still allowing access to bookmark tabs and other controls by sliding the screen to the left or right.

Zooming also works fine, allowing you to move in for a closer look at a webpage, leaving out little to none of the details you would normally see when browsing on your desktop or laptop.

Fennec appears to simply be Firefox for mobile phones, which in my opinion definitely isn’t a bad thing; Firefox is a very solid browser with good security and many useful features, and I can’t even remember when I last used another browser as frequently. If Fennec can incorporate many of Firefox’s best features, such as tabbed web browsing, simple and usable interface, and strong security, I can see no reason why it won’t be successful.

But the most interesting feature of Fennec is its potential to bring third-party and open-source add-ons and plug-ins to mobile web browsing; one of Firefox’s most cherished features is its open design, which allows users to create and download an enormous selection of user-designed add-ons that improve, change and customize Firefox.

Fennec is no exception to this trend, as plug-ins are already being designed for it. On the Fennec website Mozilla even encourages users to give feedback and write add-ons, expanding the capability of even this very early version of Fennec.

A few plug-ins have already been designed, including the NoScript add-on, which improves Fennec’s security, and the TwitterBar plug-in, which integrates Twitter-posting capabilities into the address bar of Fennec.

New features in the latest alpha release include faster panning and zooming, and improved responsiveness.

Overall, if Fennec is half as popular as Firefox we could see it become the de-facto standard for mobile phone browsing, and so far there doesn’t seem to be any reason to think that it won’t be; it looks to offer everything that Firefox does, in a mobile-sized package.

Try out the latest version of the Fennec Alpha for yourself, right here.