UKOLN Cultural Heritage Documents

Introduction

If you have made the decision to create a mobile Web site [1] there are a number of best practice techniques to bear in mind.

URLs

Best practices for URLs for Web sites include:

• Choose a short, easily remembered URL (e.g. xxx.ac.uk/mobile, m.xxx.ac.uk, or xxx.mobi).
• Stick with established conventions.

Navigation

Best practices for navigational design for mobile Web sites include:

• Remember that users are struggling with a variety of “difficult” input devices (stylus, finger touch, control pad, keyboard or joystick) so keep navigation simple.
• Sort navigation elements by popularity – most popular at the top.
• Allow users to see all navigation at once.
• Stick to a maximum of 10 links on any page.
• Code each link as an ‘access key’ numbered 0-9; use 0 for home. This allows users to navigate your links using their phone’s numeric keypad ensuring compatibility with older devices.
• Let people find things with as few clicks as possible – limit your navigation to a max drill-down of 5 levels (users get disorientated by more).
• Use well-labelled navigation categories.
• Provide escape links from every page, either to the next section, to the parent section, to the home page, or all of the above. Note: Breadcrumbing your navigation can be very effective.
• Remember your users don’t have a mouse, so :hover and onClick aren’t helpful.

Markup

Best practices for markup for mobile Web sites include:

• Code in well formed, valid XHMTL-MP (Mobile Profile) See W3C [2].
• Validate all pages. Bad mark-up can easily crash a mobile device, or simply cause nothing to render at all.
• Keep the pages below 30k where possible, so they load reasonably quickly. Bloated pages hurt users.
• Avoid tables, reliance on plug-ins (e.g. Flash), pop-ups, client side redirects and auto-refreshes (which may incur extra download times and data charges).
• Separate content and presentation with CSS. External, inline and embedded CSS are acceptable.
• Avoid @import to reference external CSS files.
• Phone numbers should be selectable links.
• Avoid floats for layout.

Images

Best practices for use of images on mobile Web sites include:

• Aim to keep logos and images small so that they fit within the recommended screen size limitation: 200 pixels wide x 250 pixels height. (Images wider than the screen size limitation should only be used if there is no better way to represent the information).
• When sizing your image to fit the screen resolution, don’t forget about the browser furniture which is going to take up some screen real estate, the scrollbar etc., so your image needs to be slightly smaller.
• Go for bold, high contrast, reduced colour palette images (subtle hues and shading will be lost on the more basic mobiles).
• Use ALT attributes for images as some users may not be able to see images on the Web site (or may choose to disable display of images).

Content

Best practices for the content on mobile Web sites include:

• Make it useful – think about your audience and what they really need, especially when they’re on the go.
• Mobile users have a shorter attention span – provide content in small, snack-sized pieces.
• Provide one content item per page.
• Keep text to the very minimum on each page.
• Use short, direct sentences.
• Minimise scrolling.
• Have a meaningful but short title bar.
• Have your institution’s phone number in the footer of every page.
• Don’t expect people to fill out long forms.
• Lots of video, animation or large image files slow down your site – if you must have them, keep them to a minimum.
• Remember the user’s details. Remembering preferences and behaviour helps you speed up their access to information. Pre-completed forms and “customise my home page” settings are even more critical to mobile than PC sites.
• Label your form fields.
• Use heading styles H1, H2, H3, H4.
• Use minimally sized margins and padding (remember your screen real estate is already small).

Design

Best design practices for mobile Web sites include:

• Switch your thinking to portrait mode where the page is taller than it is wide
• Design to the limitations of the expected screen sizes – 200 pixels wide x 250 pixels height
• Use colour banding for navigation categories, to give a sense of where you are.

‘Sniffing’

It is possible to set up a service to divert all you mobile devices automatically from your desktop site to your mobile site. This process is called ‘sniffing’. You can also sniff to know what mobile handset your user has and display a site optimised to maximum of their capabilities. Both approaches are not recommended.

Testing

Test your site on as many emulators [2] as possible and as many phones as possible. Ask your community to help you test. Make sure your desktop site contains a link to your mobile site and vice versa. The recommended link wordings are: ‘Mobile Site’ and ‘Full Site’. You also need to make sure your mobile site is picked up by all the main search engines (e.g. send Google a mobile sitemap.)

Conclusions

When designing for the mobile Web recognize its limitations (small screen, no mouse) but also think about its extra capabilities (phone, camera, GPS, SMS, MMS, Bluetooth, QR reader, MP3 player etc). Too many mobile websites needlessly limit functionality, offering a bare bones experience that leaves the user wanting more. Mobile devices can do many things – use them in new ways to add real value.

Acknowledgements

This document was written by Sharon Steeples, University of Essex who ran a workshop on this topic at the IWMW 2009 event (see her accompanying handout at [3]). We are grateful to Sharon for permission to republish this document under a Creative Commons licence.

References

1. An Introduction to the Mobile Web, Cultural Heritage briefing paper no. 62, UKOLN,
   <http://www.ukoln.ac.uk/cultural-heritage/documents/briefing-62/>
2. Mobile Web best practices (flip cards), W3C,
   <http://www.w3.org/2007/02/mwbp_flip_cards.html>
3. The Mobile Web: keep up if you can! Useful links including emulators, Slideshare,
   <http://www.slideshare.net/mobilewebslides/supporting-handout-the-mobile-web-keep-up-if-you-can>

Filed under: Mobile Technologies, Needs-checking