• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing Sites Optimized For Mobile Devices

Developing Sites Optimized For Mobile Devices



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

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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 9

http://www.slideshare.net 8
http://www.cleeki.com 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Include http://m.providence.edu/library/index.htmlhttp://m.providence.edu/library/hours.htmlhttp://m.providence.edu/library/holidays.html
  • Include screenshot of mobile.css, code for index.html, and index.html

Developing Sites Optimized For Mobile Devices Developing Sites Optimized For Mobile Devices Presentation Transcript

  • 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…
    • Key considerations when developing for mobile devices
    • What purpose does this site serve?
    • Assess your resources
    • Browse other mobile sites
    • Helpful web resources
    Getting Started
  • 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
  • What purpose does this site serve?
    • IM a librarian
    • Get hours & directions
    • Search the catalog
    • Etc.
    Clearly identify your audience
    Helps the library determine what services to offer
  • 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
  • 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
  • Helpful web resources
    Excellent mobile sites from libraries:
    Public: http://m.nypl.org/
    Academic: http://m.library.oregonstate.edu/
    Development tools
    • Device Emulators
    • Free Editors
    • Drawbacks to Dreamweaver
    • Good mobile coding sites
    Tools to Create
  • 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
    Allows users to simulate all cell-phone operating systems with the proper device profile code
    Opera Browser
    Firefox User-Agent Switcher
  • Free Editors
    • Notetab Pro is available as a free download for 30 days
    • The basic version that is free does not include text line numbers
    • More features than Notetab or Code Lobster
    • Code Lobster:
    • Free editor which matches Notetab Pro
    • OpenOffice.org Bluefish
    • GNU/Linux free option
    Searching the web for editors will net a number of possibilities
  • 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
    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
  • 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…
  • 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
  • Using Image Files
    Use .gif Image Files
    Smaller size than .jpg’s results in quicker loading
    Limit the size and detail of your graphic images
    • I incorporated all images into my CSS
    • This made the XHTML code simpler while making my CSS files very large
    • Needed class tags for each image
    • Conversely, Russ placed all images in the XHTML
    Mobile devices feature small screens
  • http://m.providence.edu/library/index.html
    The combination of the xhtml coding and the .css coding results in the images on the http://m.providence.edu/library/index.html
  • Use percentages or ems to size text
    This will allow it to scale to proper sizing
    A tremendous variable in designing for mobile devices is screen dimensions
    Ems and percentages are malleable and allow text to fit proportionally
    Ems 1em is 16pt font on standard web browsers
    Sized to window
    • This won’t work with image files as they are not resizable to device window while remaining conspicuous
  • CSS is your friend
    Link to external style-sheet (CSS) to format all pages
    This reduces XHTML file size, and consequently load time
    Simplifies large editing of site style, as pages are linked to the same CSS
    DO NOT:
    • Use tables or frames
    • Format pages through XHTML
  • Essential steps to ensure that your site is really done
    Just when you think you’re done…
  • 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
  • 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
  • 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
  • Contact Information
    Brendan Ryan
    Library Commons Assistant
    Phillips Memorial Library
    Providence College