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.
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Developing Sites Optimized For Mobile Devices
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…
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
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/
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
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
31.
32. This made the XHTML code simpler while making my CSS files very large
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
Notas do Editor
Include http://m.providence.edu/library/index.htmlhttp://m.providence.edu/library/hours.htmlhttp://m.providence.edu/library/holidays.html
Include screenshot of mobile.css, code for index.html, and index.html