1. Designing web pages for handheld mobile devices Improving the client experience

2. 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

3. Background

4. 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

5. 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)

6. 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)

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

8. 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

9. 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

10. 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.

11. 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

12. 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

13. 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

14. How to Improve the Client Experience

15. 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??

16. 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

17. 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

18. 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

19. 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

20. Best Practices for Mobile Web Design

21. 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: http://www.w3.org/TR/mobile-bp/ http://www.w3.org/TR/mobile-bp/ MobileOK 1.0 –Mobile Web Best Practices checker http://validator.w3.org/mobile/ http://validator.w3.org/mobile/

22. 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

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. 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

36. Mobile Portals

37. Mobile Portal : Skweezer

38. Mobile Portal: MobileLeap

39. a university for the world real R Questions