Redesigning the web for mobile devices (lecture 6)

Written by: Jonathan Briggs

March 12, 2007 [5513 views]

This week’s lecture looks at the mobile web and at how companies need to change their Internet sites to make them suitable for access from phones, PDAs and other mobile devices.

Why bother?

• Growing use of the mobile Internet (.mobi, Google mobile, BBC)
• 3G provides usable download and access speeds
• Operators pushing additional services in search of revenue
• Mobile users are not the same as web users

Why is the web different on mobiles?

• Smaller screens, single windows, slower rendering, limited memory for browser software, limited colour, poorer user interface, variations across handsets
• Different frame of reference: “I want some information or service immediately”
• Easier to see how information can be personalised or related to location and presence
• Phone users are used to Pushed information as well as Pulled (requested)
• Mobile users are generally paying for data used

Brief history of WAP

WAP 1.0

• Developed for Europe & US (Japan’s DoCoMo had its own iMode system based on cHTML)
• Special protocol for mobile content using its own language WML
• Special formats for images
• Wireless scripting language
• Web pages became stacks of cards
• Content was passed through a gateway to make it smaller
• Compatible with most phones (at the time)
• Hard to write
• Content had to be developed especially for WAP 1.0
• Oversold Surf the BT Cellnet
  An example WAP 1.0 site written in WML can be found here

WAP 2.0

• Cutdown version of xHTML called xHTML Mobile Profile
• Supports a cutdown version of CSS
• No gateway required (HTTP used instead)
• Allows web designers to start designing for mobile

Build a simple site for free

1. Go to the following site and sign up http://www.mobisitegalore.com/
2. Choose the design you want
3. Choose the structure of your site (which sub pages will you use)
4. Edit the content of each of page (using the tools or HTML)
5. Upload images as necessary
6. Preview your site
7. Publish your site via FTP or sign up for a free site at websiteforever.mobi
8. Test your site using one of the emulators
9. Test your site on your own phone

Here are some questions to help you think about the purpose and navigation for your own site:

1. What is the site for?
2. What do you want visitors to do when they have visited your site: buy something, contribute/comment, call you, make an enquiry
3. Why would they bookmark the site?
4. How will your site be found? (need to register in directories or buy advertising etc)
5. What will make visitors trust the site you have created?
6. What are the limitations imposed by sites such as MobisiteGalore?

Common changes needed

1. Simplify your branding but be consistent
2. Reduce the number of pages and the services offered
3. Focus on key messages only: who, what, where, how much
4. Make sure the site provides contact information
5. Limit the customer journey to 3-4 clicks
6. Reduce the amount of information on each page and the amount of scrolling needed
7. Simplify the calls to action (call me, let me call you)
8. Use it as an extension channel for the web (allow purchasing by regular customers only)

Compare http://www.amazon.co.uk and www.amazon.co.uk (mobile version)

Designing for PCs and Mobiles

1. Serve the same content with different style sheets
2. Consider the order of items on your page carefully
3. Use style sheets to hide extra content
4. Provide jumps to deeper content to minimise scrolling
5. Avoid PC design where the left hand menu comes “at the top” of every page
6. Test your designs by turning off the style sheets

Design considerations

Useful site on mobile design

Developers Guide from .mobi

Useful resources

Mobile phone emulators

Powerful emulator from .mobi

BBC emulator for testing their services

http://www.yospace.com/spedemo.html

Summary of development approaches

http://en.wikipedia.org/wiki/Mobile_development

Why xHTML?

Free WAP hosting sites

Build a simple site for free at MobiSiteGalore

http://www.entaspace.co.uk/

http://tagtag.com

Recent comments:

What do you think?

Add your comments