Design on the Go: Best Practices for Mobile Sites

Being able to design for mobile devices is a skill that is becoming more and more crucial for any web designer. Gone are the days when having a website for a company or organization is good enough – increasingly, people are looking for information while on the go, and designing for those tiny screens is a whole new ball game. Designing for mobile devices has a different set of rules than designing for the web – and in order to keep up with the way the market is going, you’ve got to be able to do both well.

According to mobithinking.com, 2008 is considered the beginning of the mobile boom, which is now in full force. “Mobile is not a niche – but it’s still seen as a niche play by too many brands. With anywhere from 3.5 to 4 billion mobile phone users, you’re missing a prime opportunity if you’re not using the mobile web to strengthen relationships with your present and prospective customers when they’re on the move.”

Browsers

Although for those of us in the tech world it might be easy to assume everyone has an iPhone, this isn’t yet the case. While the iPhone’s popularity is growing fast, it still only claims about three percent of mobile users – so don’t make the mistake of designing for your iPhone only.

Screen Sizes

• The iPhone is 320 pixels wide by 480 pixels high.
• Many Nokia Nseries devices are 240 pixels wide by 320 pixels high.
• Older (yet still popular) Nokia devices have displays ranging from 176 × 208 pixels up to 352 × 416 pixels.
• Blackberry screen resolutions range anywhere from 160 × 160 pixels all the way up to 324 × 352 pixels.
• Newer devices often support a landscape mode where the width and height are spontaneously reversed.

Overall, according Device Atlas, the two most common screen widths are
128px wide and 240px wide, popularized mainly by Nokia devices. And according to a MobiForge article, 72% of mobiles have a screen resolution of 240×320 or more.

According to this article the most popular mobile screen sizes are the following:

• 128×160
• 176×220
• 240×320 = Nokia Nseries
• 320×480 = iPhone

Nokia Nseries Blackberry and Apple iPhone

Colours

Some simple advice from W3C: “Mobile devices often do not have good color contrast and are often used in less-than-ideal lighting conditions. Hence information highlighted in color may not be visible to users. If color is used to indicate a feature then that feature should generally also be indicated in a way that is not color dependent. In particular, do not use blue or purple text, as this may be confused with hyperlinks, especially on devices that do not underline links.”

To summarize, remember that mobile users are usually using it under bad conditions like lack of light or excessive light – for example, on the street in a sunny day. Also remember that some devices still have monochrome screens. So a high contrast is always a good idea with colours. Subtle colour nuances are not good for mobile design.

Examples of excessive light and reflection while using a mobile device 1.www.byetman.com, 2.www.janchipchase.com

Mistakes to Avoid

• The users of a mobile device should be treated differently from regular PC users. Deliver fast and only really relevant information. Don’t use deep or complex navigation levels.

• Do not ignore the limitations of a mobile. Remember the small size of the screen and keep it as simple as possible – make every pixel count. Avoid horizontal navigation – stick to vertical for mobile. Remember, mobile users can’t print documents, so don’t include any pdf files that need to be printed. And stay away from anything that requires a lot of typing. Even with the most sophisticated devices, typing is still more difficult than on a full-size keyboard.

• Remember that mobile devices bring other advantages that a desktop device doesn’t. First of all, it’s a phone – invite a call and make it a link! e.g. <a href="tel:+19995551212">+1 999 555-1212</a>. It’s a camera – invite users to take pictures and enter them in contests. Think of everything that the mobile device can do and make that part of your mobile site experience.

• Consider using a .mobi URL for your mobile site. Doing so indicates the website was designed specifically for mobile devices, as the .mobi URL is available exclusively to mobile sites. And because of .mobi’s high usability standards, it also means the site is trustworthy and has quality content.

• Don’t use frames in mobile websites. It just doesn’t work in most devices and might create usability issues. Always keep the standards of the XHTML-Mobile profile and plan the layout in a portrait mode. As described above, vertical scroll is well-accepted.

• Do research to learn more about the specific devices being used. There are many different mobile platforms in the market and each one might show your content in a different way. Plan for that ahead of time by creating device-aware sites.

• Do not hide your mobile website – make it easy to find through search engines. Again, having a .mobi address is a good idea in this regard as it is already a search engine-friendly URL.

Design Strategies

If you need to design for more than one device, a good practice is to use one intermediate design as reference and adapt to the other sizes from it.
Some recommendations about size are:

• Content images should be no larger than 200px wide for the ‘default grouping’ (or 80% of the device’s screen width).
• The masthead uses both a tiled and coloured background. Older devices like the Nokia 6680 which feature less sophisticated browsers are unable to render the tiled background but do display the background colour.
• Focus on needs instead of tactics and solutions.
• Design for partial attention and interruption. Put absolutely only the basic information necessary. Avoid deep levels of navigation.
• Remove sidebar content – use just one column.

BMW.mobi – Good example of mobile best practices

• Use vertical lists for navigation. More importantly, increase the font size.
• Build the interfaces to support single task.
• Keep the mobile context in mind. Mobile context is spatial and temporal rather than semantic and social like desktop web.
• Mobile is about getting people through information quickly. Keep it simple.
• Strip out the fluff. Mobile websites need to have simple and clear navigation and minimal graphics so they load fast.

More Resources:
Building a website for the iPhone
Mobi Thinking – Best practices
Mobile Information Architecture