Designing web pages for handheld mobile devices Improving the client experience

a university for the world real R Overview Background Desktop vs. Mobile Devices How to Improve the Client Experience Best Practices for Mobile Web Design QUT Library: a Work in Progress

Background

a university for the world real R 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

a university for the world real R 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)

a university for the world real R 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)

Desktop vs. Mobile Devices Why the mobile experience can be poor or unusable for clients

a university for the world real R 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

a university for the world real R 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

a university for the world real R 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.

a university for the world real R 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

a university for the world real R 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

a university for the world real R 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

How to Improve the Client Experience

a university for the world real R 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??

a university for the world real R 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

a university for the world real R 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

a university for the world real R What Option did we Choose? –do nothing –strip images and styling –handheld stylesheets –mobile-specific site or application

a university for the world real R index.html Desktop stylesheet desktop.css Print stylesheet print.css Handheld stylesheet handheld.css How Does this Work? separate page content from presentation

Best Practices for Mobile Web Design

a university for the world real R Mobile Web Best Practices Best Practices 1.0: –focuses improving the client experience of the Web when accessed from a mobile device –available at: MobileOK 1.0 –Mobile Web Best Practices checker

a university for the world real R 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

Library Website: No Stylesheets

Library Website: Desktop Design

Library Website: No Handheld Stylesheets

Library Website: With Handheld Stylesheets

Catalogue: No Stylesheets

Catalogue: Desktop Design

Catalogue: No Handheld Stylesheets

Catalogue: With Handheld Stylesheets

Searching the Catalogue: Desktop

Searching the Catalogue: Mobile

Viewing and Renewing Loans: Desktop

Viewing and Renewing Loans: Mobile

a university for the world real R 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

Mobile Portals

Mobile Portal : Skweezer

Mobile Portal: MobileLeap

a university for the world real R Questions