This slide show was part of a presentation done for the Handheld Librarian Conference II (2/18/10) focused on optimizing academic library websites for mobile devices. Topics covered included beginning the process of developing for mobile devices, assessing project goals, text-based contact with library staff, and mobile device emulators. It is hoped that participants will share resources and sites that will be applicable to academic institutions. Ideally, participants can develop a collection of best practices regarding design. Participants included Brendan Ryan, developer a mobile site at Providence College, and Russ Franks, developer of a mobile site for Special Collections and Archives at Providence College. Anyone new to the process is welcome to participate so that needs and goals can be identified.

1. Developing sites optimized for mobile devices Brendan Ryan Library Commons Assistant Phillips Memorial Library Providence College Getting Started Tools to Create Rules to design by… Just when you think you’re done…

3. What purpose does this site serve?

4. Assess your resources

5. Browse other mobile sites

6. Helpful web resourcesGetting Started 1

7. Key considerations Device screen-width varies widely Simplicity in design enhances legibility Do not use absolute text sizes Detailed images will not translate well to most devices Mobile devices are not as powerful as computers Pages will load slowly Flash objects will not work properly

9. IM a librarian

10. Get hours & directions

11. Search the catalog

12. Etc.Clearly identify your audience Helps the library determine what services to offer

13. Assess your Resources Work with what you have Providence College is a small liberal arts college so the project was largely the library’s responsibility We kept it simple because that’s what skills were available Large universities may be able to draw support from computer science or design students Constraints largely dictate what is possible at your institution

14. Browse other mobile sites Allows you to find models at other library sites Determine what works and what doesn’t Access sites outside of the library world in order to get new perspectives They may be done by professional web-designers

15. Helpful web resources Excellent mobile sites from libraries: Public: http://m.nypl.org/ Academic: http://m.library.oregonstate.edu/ Development tools http://www.mobify.me/ http://www.webpagefx.com/design-build-mobile-web-site.html http://www.mobisitegalore.com/index.html http://www.developershome.com/ http://library.gameology.org/2009/11/24/iphone/

17. Free Editors

18. Drawbacks to Dreamweaver

19. Good mobile coding sitesTools to Create 2

20. Device Emulators Found on many mobile devices Excellent for working with different screen widths of devices Handy when ensuring designs work with Microsoft OS Firefox add-on Customizable Allows users to simulate all cell-phone operating systems with the proper device profile code Opera Browser Firefox User-Agent Switcher

22. The basic version that is free does not include text line numbers

23. More features than Notetab or Code Lobster

24. Code Lobster:

25. Free editor which matches Notetab Pro

26. OpenOffice.org Bluefish

27. GNU/Linux free optionSearching the web for editors will net a number of possibilities

28. Drawbacks to Dreamweaver Very sloppy coding Initially worked with this to develop our site After designing it fully I then had to re-edit it in order to validate the code of the pages Excessive File size become unmanageable Essential that they be small for ease of loading on mobile devices Not cross-compatible DW files are saved in a unique format that is only accessible by the program DW is expensive Regular editors like Notetab, Code Lobster, Bluefish, and any number of others are interchangeable w/ .html and .txt

29. Simple hints that can start you down the right path and help you avoid frustration and wasted time. (or things I wish I knew then) Rules to design by… 3

30. Clickstream Limit the amount of sites the user has to navigate to get the desired information Often sites load slowly on mobile devices They are difficult to access

32. This made the XHTML code simpler while making my CSS files very large

33. Needed class tags for each image

34. Conversely, Russ placed all images in the XHTMLMobile devices feature small screens

35. http://m.providence.edu/library/index.html + http://m.providence.edu/library/mobile.css The combination of the xhtml coding and the .css coding results in the images on the http://m.providence.edu/library/index.html =

38. Validate all code W3 Schools provides the most authoritative source General sites: http://validator.w3.org/ Mobile checker: http://waxler.w3.org/mobileok/index.html This step is essential to creating any proper, well-functioning website Dreamweaver did not magically create valid code, so I was left with a lot of clean-up work to do

39. Design with the limitations of Internet Explorer in mind Mobile devices often use this operating system Ex. Rounded button coding doesn’t work w/ IE, making the code and images required for this effect cumbersome Requires the use of an image file for each corner, adding 4 images to load for each button Constantly have to evaluate the importance and value of features Often most effective to keep it very simple

40. Things I’d like to do Automatically direct mobile devices from the general library site to the mobile site Create an overriding webpage that would give users the status of the library in inclement weather We have snow days! Create a fully searchable library catalog for mobile devices

41. Contact Information Brendan Ryan Library Commons Assistant Phillips Memorial Library Providence College bryan1@providence.edu 401.865.1993