The document An Introduction to the Mobile Web [1] explains how increasing use of mobile devices offers institutions and organisations many opportunities for allowing their resources to be used in exciting new ways. This innovation relates in part to the nature of mobile devices (their portability, location awareness and abundance) but also to the speed and ease with which new applications can be created for them. Some of the current complimentary technologies are described below.

QR Codes

Quick Response (QR) codes are two-dimensional barcodes (matrix codes) that allow their contents to be decoded at high speed. They were created by Japanese corporation Denso-Wave in 1994 and have been primarily used for tracking purposes but have only recently filtered into mainstream use with the creations of applications that allow them to be read by mobile phone cameras. For further information see An Introduction to QR Codes [2].

Location Based Services (GPS)

More mobile phones are now being sold equipped with global Positioning System (GPS) chips. GPS, which uses a global navigation satellite system developed in the US, allows the device to provide pinpoint data about location.

Mobile GPS still has a way to go to become fully accurate when pinpointing locations but the potential of this is clear. GPS enabled devices serve as a very effective navigational aid and maps may eventually become obsolete. Use of GPS offers many opportunities for organisations to market their location effectively.

SMS Short Codes

Instant is already used by consumers in a multitude of ways, for example to vote, enter a competition or answer a quiz. In the future organisations could set up SMS short codes allowing their users to:

• Express an interest in a product or service or request a brochure
• Request a priority call back
• Receive picture, music, or video content
• Receive search results
• Receive a promotional voucher
• Pay for goods or services
• Engage in learning activities

Bluetooth and Bluecasting

Bluetooth is an open wireless protocol for exchanging data over short distances from fixed and mobile devices. Bluecasting is the provision of any media for Bluetooth use. Organisations could offer content to users who opt-in by making their mobile phones discoverable.

Cashless Financial Transactions

Using Paypal it is now possible to send money to anyone with and email address or mobile phone number. Paying using SMS is becoming more common, for example to pay for car parking. In the future people will be able to use the chip in their phone to make contactless payments at the point of sale by waving it across a reader.

The Future

The next ‘big thing’ for mobile devices could be speech recognition. The voice-enabled Web will have significant implications for authentication and ease of use. Future phones are likely to work in a more multi-sensory way and use smell, light and heat more. They may also begin to use artificial intelligence and augmented reality.

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. An Introduction to QR Codes, Cultural Heritage briefing paper no. 61, UKOLN,
   <http://www.ukoln.ac.uk/cultural-heritage/documents/briefing-61/>

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>

Access to Web services used to be only through desk top computers. Improvement of laptop, personal digital assistant (PDA) and mobile phone technologies, alongside expansion of mobile networks, has meant that this is no longer the case. The number of mobile Web users is growing rapidly, now over half the globe pays to use one [1], and any organisation with a Web site will need to give consideration to mobile devices.

Challenges in Exploiting the Mobile Web

For most browsing the Internet using a mobile device is currently not an enjoyable experience [2]. The main challenges relate to interoperability and usability, and stem from the following issues:

• Web technologies may be incompatible with mobile devices – JavaScript, cookies etc. may not work
• There are serious device limitations – smaller screens, difficult to use keyboards, limited battery life etc.
• Mobile network connection can be very slow and intermittent.

At present mobile data connectivity can be costly but this is likely to change. Whatever the challenges, users will increasingly want to access Web sites while on the move.

Opportunities Provided by the Mobile Web

Gaddo F Benedetti, Mobile Web expert, states that “what sells the mobile Web is not how it is similar to the desktop Web, but how it differs” [3]. A mobile device is transportable, personal, always on, prolific and these days often location aware. Such factors offer many opportunities for institutions and organisations who wish to allow their resources to be used in exciting new ways.

Mobile Web Sites

If you are a Web site provider there are a number of options available to you. You could chose to do nothing or merely reduce your images and styling to help with mobile viewing. There are a number of third party sites that will help with this.

Alternately you can create handheld style sheets using CSS or create mobile optimised content using XHTML or WML (wireless markup language) to deliver content. New browsers are moving towards using modifications of HTML. Each approach has its pros and cons which will need consideration.

The Mobi Approach

In July 2005 a number of big companies (Google, Microsoft, Nokia, Samsung, and Vodafone) sponsored the creation of the .mobi top-level domain dedicated to delivering the Internet to mobile devices. Mobi has received criticism because it goes against the principle of device independence.

W3C Mobile Web Initiative

The W3C Mobile Web Initiative [4] is a initiative set up by the W3C to develop best practices and technologies relevant to the Mobile Web. They offer a helpful set of mobile Web best practices and Mobile Web Checker tools. One project WC3 have been involved in is the development of a validation scheme: the Mobile OK scheme.

Creating Mobile Web Sites

If you are creating a mobile Internet site you will need to give some consideration of what information and services your stakeholders will want to consume while on the move, for example opening hours, directions, staff information etc. Currently there are very few dedicated UK cultural heritage mobile sites, however in the US there are more and a number of examples are listed on the Tame the Web blog [5].

References

1. Nice talking to you … mobile phone use passes milestone, Guardian, 3 Mar 2009,
   <http://www.guardian.co.uk/technology/2009/mar/03/mobile-phones1>
2. Mobile Usability, Jakob Nielsen’s Alertbox,
   <http://www.useit.com/alertbox/mobile-usability.html>
3. Mobile First, Web Second, Mobi Forge blog,
   <http://mobiforge.com/analysts/blog/mobile-first-web-second>
4. Mobile Web Initiative, W3C,
   <http://www.w3.org/Mobile/>
5. Mobile Versions of Library Web sites, Tame the Web,
   <http://tametheweb.com/2008/06/18/mobile-versions-of-library-web-sites/comment-page-1/>