Designing web pages for handheld mobile devices

1
Designing web pages for handheld mobile devices

• Improving the client experience

Presented by Cathy Slaven, Web Development
Coordinator, QUT Library 28 August 2006
2
Overview

• Background
• Desktop vs. Mobile Devices
• How to Improve the Client Experience
• Best Practices for Mobile Web Design
• QUT Library a Work in Progress

3
Background
4
The Mobile Web

• the use of the Web from mobile devices
• reach a wider audience, at all times and
  anywhere
• in Australia wireless internet access is
  increasing
• more providers with 3G networks
• increasingly powerful web-capable mobile devices
  becoming more affordable

5
One Web

• In order to realize its full potential the Web
  has to be accessible via any browser enabled
  device anywhere and at any time.
• it does not mean that exactly the same
  information is available in exactly the same
  representation across all devices.
• (W3C Mobile Web Initiative)

6
W3C Mobile Web Initiative

• The intention of the W3C Mobile Web Initiative
  is to make Web access from a mobile device as
  simple, easy and convenient as Web access from a
  desktop device and to facilitate advancement
  towards the ultimate goal of "One Web".(W3C
  Mobile Web Initiative)

7
Desktop vs. Mobile Devices

• Why the mobile experience can be poor or unusable
  for clients

8
Diversity of Mobile Devices

• Mobile devices have many different
• types PDAs, smartphones, mobile phones..
• brands
• operating systems
• browsers
• screen size and resolutions
• from 120 pixels wide
• average desktop 1024x768 pixels wide

9
Page Display

• Mobile devices have limited screen size
• limited amount of information visible initially
• can be no immediate feedback to indicate if they
  are at the right page
• lots of scrolling required

10
Text Input and Navigation

• Mobile devices
• limited keypad compared with desktop keyboard
• maybe a stylus (pointing device)
• back button functionality may not exist or is
  not obvious
• hard to recover from errors, broken links etc.

11
Device Limitations

• Mobile devices have limited
• support for scripting or plug-ins
• content not usable
• difficult or not possible for client to upgrade
  browser
• processing power
• slow page display
• memory
• incomplete page display

12
Bandwidth and Cost

• Mobile networks can be slow
• longer time for page to display
• Mobile data transfer costs money
• large images, advertising etc. can increase costs

13
Mobile User Goals

• Mobile users
• want to find specific information relevant to
  their context e.g. bus timetable, movie times,
  sports results etc.
• less interested in large documents or in browsing

14
How to Improve the Client Experience
15
Think About the Service you Provide

• Some services have primarily
• mobile appeal
• mobile appeal with complementary desktop
• desktop appeal with complementary mobile
• desktop appeal
• What is the library service??

16
The Client Experience

• Mobile Web Best Practices suggests
• provide the best possible client experience in
  the context in which their service has the most
  appeal
• however, it is considered best practice to
  provide as reasonable experience as is possible
  given device limitations and not to exclude
  access from any particular class of device,
  except where this is necessary because of device
  limitations

17
How to Design for Mobile Devices?

• Cameron Moll suggests you can
• do nothing
• strip images and styling
• handheld stylesheets
• mobile-specific site or application

Easiest to do worst client experience
Most complex best client experience
18
What Option did we Choose?

• do nothing
• strip images and styling
• handheld stylesheets
• mobile-specific site or application

19
How Does this Work?

• separate page content from presentation

Desktop stylesheet desktop.css
index.html
Handheld stylesheet handheld.css
Print stylesheet print.css
20
Best Practices for Mobile Web Design
21
Mobile Web Best Practices

• Best Practices 1.0
• focuses improving the client experience of the
  Web when accessed from a mobile device
• available athttp//www.w3.org/TR/mobile-bp/
• MobileOK 1.0
• Mobile Web Best Practices checkerhttp//validator
  .w3.org/mobile/

22
QUT Library A Work in Progress

• wireless Internet usage at QUT increasing
• potential for access to library resources via
  handheld devices
• renewing loans?
• catalogue searching?
• opening hours?
• current approach is primarily desktop with some
  mobile application

23
Library Website No Stylesheets
24
Library Website Desktop Design
25
Library Website No Handheld Stylesheets
26
Library Website With Handheld Stylesheets
27
Catalogue No Stylesheets
28
Catalogue Desktop Design
29
Catalogue No Handheld Stylesheets
30
Catalogue With Handheld Stylesheets
31
Searching the Catalogue Desktop
32
Searching the Catalogue Mobile
33
Viewing and Renewing Loans Desktop
34
Viewing and Renewing Loans Mobile
35
Key Points to Remember

• think about best practices when writing page
  content
• this will make it easier to adapt your content to
  a variety of devices
• adhere to appropriate web standards
• valid XHTML and CSS
• test on as many real devices as possible

36
Mobile Portals
37
Mobile Portal Skweezer
38
Mobile Portal MobileLeap
39
Questions