Developing Sites Optimized For Mobile Devices


Published on

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.

Published in: Education, Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Include
  • Include screenshot of mobile.css, code for index.html, and index.html
  • Developing Sites Optimized For Mobile Devices

    1. 1. Developing sites optimized for mobile devices<br />Brendan Ryan<br />Library Commons Assistant<br />Phillips Memorial Library<br />Providence College<br />Getting Started<br />Tools to Create<br />Rules to design by…<br />Just when you think you’re done…<br />
    2. 2. <ul><li>Key considerations when developing for mobile devices
    3. 3. What purpose does this site serve?
    4. 4. Assess your resources
    5. 5. Browse other mobile sites
    6. 6. Helpful web resources</li></ul>Getting Started<br />1<br />
    7. 7. Key considerations<br />Device screen-width varies widely<br />Simplicity in design enhances legibility<br />Do not use absolute text sizes<br />Detailed images will not translate well to most devices<br />Mobile devices are not as powerful as computers<br />Pages will load slowly<br />Flash objects will not work properly<br />
    8. 8. What purpose does this site serve?<br /><ul><li>PURPOSES:
    9. 9. IM a librarian
    10. 10. Get hours & directions
    11. 11. Search the catalog
    12. 12. Etc.</li></ul>Clearly identify your audience<br />Helps the library determine what services to offer<br />
    13. 13. Assess your Resources<br />Work with what you have<br />Providence College is a small liberal arts college so the project was largely the library’s responsibility<br />We kept it simple because that’s what skills were available<br />Large universities may be able to draw support from computer science or design students<br />Constraints largely dictate what is possible at your institution<br />
    14. 14. Browse other mobile sites<br />Allows you to find models at other library sites<br />Determine what works and what doesn’t<br />Access sites outside of the library world in order to get new perspectives<br />They may be done by professional web-designers<br />
    15. 15. Helpful web resources<br />Excellent mobile sites from libraries:<br />Public:<br />Academic:<br />Development tools<br /><br /><br /><br /><br /><br />
    16. 16. <ul><li>Device Emulators
    17. 17. Free Editors
    18. 18. Drawbacks to Dreamweaver
    19. 19. Good mobile coding sites</li></ul>Tools to Create<br />2<br />
    20. 20. Device Emulators<br />Found on many mobile devices<br />Excellent for working with different screen widths of devices<br />Handy when ensuring designs work with Microsoft OS<br />Firefox add-on<br />Customizable<br />Allows users to simulate all cell-phone operating systems with the proper device profile code <br />Opera Browser<br />Firefox User-Agent Switcher<br />
    21. 21. Free Editors<br /><ul><li>Notetab Pro is available as a free download for 30 days
    22. 22. The basic version that is free does not include text line numbers
    23. 23. More features than Notetab or Code Lobster
    24. 24. Code Lobster:
    25. 25. Free editor which matches Notetab Pro
    26. 26. Bluefish
    27. 27. GNU/Linux free option</li></ul>Searching the web for editors will net a number of possibilities<br />
    28. 28. Drawbacks to Dreamweaver<br />Very sloppy coding<br />Initially worked with this to develop our site<br />After designing it fully I then had to re-edit it in order to validate the code of the pages<br />Excessive<br />File size become unmanageable<br />Essential that they be small for ease of loading on mobile devices<br />Not cross-compatible<br />DW files are saved in a unique format that is only accessible by the program<br />DW is expensive<br />Regular editors like Notetab, Code Lobster, Bluefish, and any number of others are interchangeable w/ .html and .txt<br />
    29. 29. Simple hints that can start you down the right path and help you avoid frustration and wasted time.<br />(or things I wish I knew then)<br />Rules to design by…<br />3<br />
    30. 30. Clickstream<br />Limit the amount of sites the user has to navigate to get the desired information<br />Often sites load slowly on mobile devices<br />They are difficult to access<br />
    31. 31. Using Image Files<br />Use .gif Image Files<br />Smaller size than .jpg’s results in quicker loading<br />Limit the size and detail of your graphic images<br /><ul><li>I incorporated all images into my CSS
    32. 32. This made the XHTML code simpler while making my CSS files very large
    33. 33. Needed class tags for each image
    34. 34. Conversely, Russ placed all images in the XHTML</li></ul>Mobile devices feature small screens<br />
    35. 35.<br />+<br /><br />The combination of the xhtml coding and the .css coding results in the images on the<br />=<br />
    36. 36. Use percentages or ems to size text<br />This will allow it to scale to proper sizing<br />A tremendous variable in designing for mobile devices is screen dimensions<br />Ems and percentages are malleable and allow text to fit proportionally<br />Ems 1em is 16pt font on standard web browsers<br />Sized to window<br /><ul><li>This won’t work with image files as they are not resizable to device window while remaining conspicuous</li></li></ul><li>CSS is your friend<br />Link to external style-sheet (CSS) to format all pages<br />This reduces XHTML file size, and consequently load time<br />Simplifies large editing of site style, as pages are linked to the same CSS<br />DO NOT:<br /><ul><li> Use tables or frames
    37. 37. Format pages through XHTML</li></li></ul><li>Essential steps to ensure that your site is really done<br />Just when you think you’re done…<br />4<br />
    38. 38. Validate all code<br />W3 Schools provides the most authoritative source<br />General sites:<br />Mobile checker:<br />This step is essential to creating any proper, well-functioning website<br />Dreamweaver did not magically create valid code, so I was left with a lot of clean-up work to do<br />
    39. 39. Design with the limitations of Internet Explorer in mind<br />Mobile devices often use this operating system<br />Ex. Rounded button coding doesn’t work w/ IE, making the code and images required for this effect cumbersome<br />Requires the use of an image file for each corner, adding 4 images to load for each button<br />Constantly have to evaluate the importance and value of features<br />Often most effective to keep it very simple<br />
    40. 40. Things I’d like to do<br />Automatically direct mobile devices from the general library site to the mobile site<br />Create an overriding webpage that would give users the status of the library in inclement weather<br />We have snow days!<br />Create a fully searchable library catalog for mobile devices<br />
    41. 41. Contact Information<br />Brendan Ryan<br />Library Commons Assistant<br />Phillips Memorial Library<br />Providence College<br /><br />401.865.1993<br />