Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DEVELOPING SITES
  OPTIMIZED FOR
  MOBILE DEVICES
DEVELOPING SITES
  OPTIMIZED FOR
  MOBILE DEVICES
         Brendan Ryan
         Library Commons Assistant
         Philli...
DEVELOPING SITES
                         OPTIMIZED FOR
                         MOBILE DEVICES
                          ...
1   Getting Started
1   Getting Started
      1. Key considerations when developing
      for mobile devices
1   Getting Started
      1. Key considerations when developing
      for mobile devices
      2. What purpose does this s...
1   Getting Started
      1. Key considerations when developing
      for mobile devices
      2. What purpose does this s...
1   Getting Started
      1. Key considerations when developing
      for mobile devices
      2. What purpose does this s...
1   Getting Started
      1. Key considerations when developing
      for mobile devices
      2. What purpose does this s...
Key considerations
Key considerations

✴   Device screen-width varies widely
 ✴   Simplicity in design enhances legibility
 ✴   Do not use ab...
Key considerations

✴   Device screen-width varies widely
 ✴   Simplicity in design enhances legibility
 ✴   Do not use ab...
What purpose does this site
serve?
What purpose does this site
serve?


✴   Clearly identify your audience

    ✴   Helps the library determine what
        ...
What purpose does this site
serve?
                                           PURPOSES:
                                  ...
Assess Your Resources
Assess Your Resources
Assess Your Resources

✴Providence College is a small liberal arts college
 so the project was largely the library’s
 resp...
Assess Your Resources

✴Providence College is a small liberal arts college
 so the project was largely the library’s
 resp...
Assess Your Resources

✴Providence College is a small liberal arts college
 so the project was largely the library’s
 resp...
Assess Your Resources

✴Providence College is a small liberal arts college
 so the project was largely the library’s
 resp...
Assess Your Resources

✴Providence College is a small liberal arts college
 so the project was largely the library’s
 resp...
Browse other mobile
       sites
Browse other mobile
            sites
✴   Allows you to find models at other
    library sites
Browse other mobile
           sites
✴ Allows you to find models at other
  library sites
✴ Determine what works and what

...
Browse other mobile
           sites
✴ Allows you to find models at other
  library sites
✴ Determine what works and what

...
Helpful web resources
Helpful web resources

✴Excellent mobile sites from libraries:
      ✴Public: New York Public Library
      ✴Academic: Ore...
Helpful web resources

✴Excellent mobile sites from libraries:
      ✴Public: New York Public Library
      ✴Academic: Ore...
Helpful web resources

✴Excellent mobile sites from libraries:
      ✴Public: New York Public Library
      ✴Academic: Ore...
Helpful web resources

✴Excellent mobile sites from libraries:
      ✴Public: New York Public Library
      ✴Academic: Ore...
Helpful web resources

✴Excellent mobile sites from libraries:
      ✴Public: New York Public Library
      ✴Academic: Ore...
Helpful web resources

✴Excellent mobile sites from libraries:
      ✴Public: New York Public Library
      ✴Academic: Ore...
2   Tools to Create
2   Tools to Create
      ✴   Device Emulators
2   Tools to Create
      ✴Device Emulators
      ✴Free Editors
2   Tools to Create
      ✴Device Emulators
      ✴Free Editors

      ✴Drawbacks to Dreamweaver
2   Tools to Create
      ✴Device Emulators
      ✴Free Editors

      ✴Drawbacks to Dreamweaver

      ✴Good mobile codin...
Device Emulators
Device Emulators

Opera Browser
Device Emulators

Opera Browser
Device Emulators

Opera Browser
✴   Found on many
    mobile devices
✴   Excellent for
    working with
    different scre...
Device Emulators

Opera Browser            Firefox User-Agent
✴   Found on many
    mobile devices
✴   Excellent for
    w...
Device Emulators

Opera Browser            Firefox User-Agent
✴   Found on many        ✴   Firefox add-on
    mobile devic...
Free Editors
Free Editors
✴   Notetab Pro is available as a free download for 30
    days
    ✴ The basic version that is free does not...
Free Editors
✴   Notetab Pro is available as a free download for 30
    days
    ✴ The basic version that is free does not...
Free Editors
✴   Notetab Pro is available as a free download for 30
    days
    ✴ The basic version that is free does not...
Free Editors
✴   Notetab Pro is available as a free download for 30
    days
    ✴ The basic version that is free does not...
Drawbacks to Dreamweaver
Drawbacks to Dreamweaver
✴Very sloppy coding
      ✴Initially worked with Dw to develop our site
      ✴After designing it...
Drawbacks to Dreamweaver
✴Very sloppy coding
      ✴Initially worked with Dw to develop our site
      ✴After designing it...
3   Rules to design by…
3   Rules to design by…
     Simple hints that can start you down
     the right path and help you avoid
     frustration ...
Clickstream
Clickstream
✴Limit the amount of sites the
 user has to navigate to get the
 desired information
Clickstream
✴Limit the amount of sites the
 user has to navigate to get the
 desired information
  ✴Often sites load slowl...
Clickstream
✴Limit the amount of sites the
 user has to navigate to get the
 desired information
  ✴Often sites load slowl...
Clickstream
✴Limit the amount of sites the
 user has to navigate to get the
 desired information
  ✴Often sites load slowl...
Clickstream
✴Limit the amount of sites the
 user has to navigate to get the
 desired information
  ✴Often sites load slowl...
Clickstream
✴Limit the amount of sites the
 user has to navigate to get the
 desired information
  ✴Often sites load slowl...
Using Image Files
Using Image Files
Mobile devices feature small
screens
Using Image Files
Mobile devices feature small
screens

Limit the size and
detail of your graphic
images
Using Image Files
Mobile devices feature small
screens                        Use .gif images
Limit the size and
detail of...
Using Image Files
Mobile devices feature small
screens                        Use .gif images
Limit the size and          ...
Using Image Files
Mobile devices feature small
screens                        Use .gif images
Limit the size and          ...
Using Image Files
Mobile devices feature small
screens                        Use .gif images
Limit the size and          ...
Use percentages or ems to
        size text
Use percentages or ems to
              size text
✴   This will allow it to scale to proper
    sizing
✴   A tremendous va...
Use percentages or ems to
              size text
✴   This will allow it to scale to proper
    sizing
✴   A tremendous va...
CSS is your friend
CSS is your friend
✴   Link to external style-sheet (CSS) to
    format all pages
✴ This reduces XHTML file size, and
  con...
CSS is your friend
✴   Link to external style-sheet (CSS) to
    format all pages
✴ This reduces XHTML file size, and
  con...
4   Just when you think you’re done…
4   Just when you think you’re done…

      Essential steps to ensure
    that your site is really done
Validate all code
Validate all code

✴   W3 Schools provides the most authoritative
    source
✴   General sites: http://validator.w3.org/
✴...
Validate all code

✴   W3 Schools provides the most authoritative
    source
✴   General sites: http://validator.w3.org/
✴...
Design with the limitations of
Internet Explorer in mind
Design with the limitations of
Internet Explorer in mind
✴   Mobile devices often use this operating
    system
Design with the limitations of
Internet Explorer in mind
✴   Mobile devices often use this operating
    system
    ✴ ex. ...
Design with the limitations of
Internet Explorer in mind
✴   Mobile devices often use this operating
    system
    ✴ ex. ...
Design with the limitations of
Internet Explorer in mind
✴   Mobile devices often use this operating
    system
    ✴ ex. ...
Things I’d like to do
Things I’d like to do
✴   Automatically direct mobile devices from
    the general library site to the mobile site
Things I’d like to do
✴   Automatically direct mobile devices from
    the general library site to the mobile site
✴   Cre...
Things I’d like to do
✴   Automatically direct mobile devices from
    the general library site to the mobile site
✴   Cre...
Things I’d like to do
✴   Automatically direct mobile devices from
    the general library site to the mobile site
✴   Cre...
Contact Information


Brendan Ryan
Library Commons Assistant
Phillips Memorial Library
Providence College
bryan1@providenc...
Mobile Websites for Public Libraries
Upcoming SlideShare
Loading in …5
×

Mobile Websites for Public Libraries

This is a presentation given for the OLIS continuing education series. It is in reference to developing mobile websites for public libraries.

  • Login to see the comments

Mobile Websites for Public Libraries

  1. 1. DEVELOPING SITES OPTIMIZED FOR MOBILE DEVICES
  2. 2. DEVELOPING SITES OPTIMIZED FOR MOBILE DEVICES Brendan Ryan Library Commons Assistant Phillips Memorial Library Providence College
  3. 3. DEVELOPING SITES OPTIMIZED FOR MOBILE DEVICES Brendan Ryan Library Commons Assistant Phillips Memorial Library Getting Started Providence College 1. 2. Tools to Create 3. Rules to design by… 4. Just when you think you’re done…
  4. 4. 1 Getting Started
  5. 5. 1 Getting Started 1. Key considerations when developing for mobile devices
  6. 6. 1 Getting Started 1. Key considerations when developing for mobile devices 2. What purpose does this site serve?
  7. 7. 1 Getting Started 1. Key considerations when developing for mobile devices 2. What purpose does this site serve? 3. Assess your resources
  8. 8. 1 Getting Started 1. Key considerations when developing for mobile devices 2. What purpose does this site serve? 3. Assess your resources 4. Browse other mobile sites
  9. 9. 1 Getting Started 1. Key considerations when developing for mobile devices 2. What purpose does this site serve? 3. Assess your resources 4. Browse other mobile sites 5. Helpful web resources
  10. 10. Key considerations
  11. 11. 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
  12. 12. 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
  13. 13. What purpose does this site serve?
  14. 14. What purpose does this site serve? ✴ Clearly identify your audience ✴ Helps the library determine what services to offer
  15. 15. What purpose does this site serve? PURPOSES: ✴ IM a ✴ Clearly identify your audience librarian ✴ Get hours & directions ✴ Helps the library determine what ✴ Search the catalog services to offer ✴ Etc.
  16. 16. Assess Your Resources
  17. 17. Assess Your Resources
  18. 18. Assess Your Resources ✴Providence College is a small liberal arts college so the project was largely the library’s responsibility
  19. 19. Assess Your Resources ✴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
  20. 20. Assess Your Resources ✴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 ✴Perhaps patrons can offer assistance to your institution
  21. 21. Assess Your Resources ✴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 ✴Perhaps patrons can offer assistance to your institution ✴Local students (college, secondary)
  22. 22. Assess Your Resources ✴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 ✴Perhaps patrons can offer assistance to your institution ✴Local students (college, secondary) ✴Business and marketing classes alongside computer and design courses
  23. 23. Browse other mobile sites
  24. 24. Browse other mobile sites ✴ Allows you to find models at other library sites
  25. 25. Browse other mobile sites ✴ Allows you to find models at other library sites ✴ Determine what works and what doesn’t
  26. 26. Browse other mobile sites ✴ Allows you to find models at other library sites ✴ Determine what works and what doesn’t ✴ Assess sites outside of the library world in order to get new perspectives
  27. 27. Helpful web resources
  28. 28. Helpful web resources ✴Excellent mobile sites from libraries: ✴Public: New York Public Library ✴Academic: Oregon State University
  29. 29. Helpful web resources ✴Excellent mobile sites from libraries: ✴Public: New York Public Library ✴Academic: Oregon State University
  30. 30. Helpful web resources ✴Excellent mobile sites from libraries: ✴Public: New York Public Library ✴Academic: Oregon State University
  31. 31. Helpful web resources ✴Excellent mobile sites from libraries: ✴Public: New York Public Library ✴Academic: Oregon State University
  32. 32. Helpful web resources ✴Excellent mobile sites from libraries: ✴Public: New York Public Library ✴Academic: Oregon State University
  33. 33. Helpful web resources ✴Excellent mobile sites from libraries: ✴Public: New York Public Library ✴Academic: Oregon State University ✴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://www.emailmeform.com/
  34. 34. 2 Tools to Create
  35. 35. 2 Tools to Create ✴ Device Emulators
  36. 36. 2 Tools to Create ✴Device Emulators ✴Free Editors
  37. 37. 2 Tools to Create ✴Device Emulators ✴Free Editors ✴Drawbacks to Dreamweaver
  38. 38. 2 Tools to Create ✴Device Emulators ✴Free Editors ✴Drawbacks to Dreamweaver ✴Good mobile coding sites
  39. 39. Device Emulators
  40. 40. Device Emulators Opera Browser
  41. 41. Device Emulators Opera Browser
  42. 42. Device Emulators Opera Browser ✴ Found on many mobile devices ✴ Excellent for working with different screen widths of devices ✴ Handy when ensuring designs work with multiple devices
  43. 43. Device Emulators Opera Browser Firefox User-Agent ✴ Found on many mobile devices ✴ Excellent for working with different screen widths of devices ✴ Handy when ensuring designs work with multiple devices
  44. 44. Device Emulators Opera Browser Firefox User-Agent ✴ Found on many ✴ Firefox add-on mobile devices ✴Customizable ✴ Excellent for working with ✴ Allows users to different screen simulate all cell- widths of devices phone operating systems with the ✴ Handy when proper device profile ensuring designs code work with multiple devices
  45. 45. Free Editors
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. Drawbacks to Dreamweaver
  51. 51. Drawbacks to Dreamweaver ✴Very sloppy coding ✴Initially worked with Dw 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 need to be small for ease of loading on mobile devices
  52. 52. Drawbacks to Dreamweaver ✴Very sloppy coding ✴Initially worked with Dw 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 need to be small for ease of loading on mobile devices ✴Not cross-compatible ✴Dw files are saved in a proprietary 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
  53. 53. 3 Rules to design by…
  54. 54. 3 Rules to design by… 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)
  55. 55. Clickstream
  56. 56. Clickstream ✴Limit the amount of sites the user has to navigate to get the desired information
  57. 57. Clickstream ✴Limit the amount of sites the user has to navigate to get the desired information ✴Often sites load slowly on mobile devices
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. Using Image Files
  63. 63. Using Image Files Mobile devices feature small screens
  64. 64. Using Image Files Mobile devices feature small screens Limit the size and detail of your graphic images
  65. 65. Using Image Files Mobile devices feature small screens Use .gif images Limit the size and detail of your graphic images
  66. 66. Using Image Files Mobile devices feature small screens Use .gif images Limit the size and Smaller size detail of your graphic than .jpg’s results images in quicker loading
  67. 67. Using Image Files Mobile devices feature small screens Use .gif images Limit the size and Smaller size detail of your graphic than .jpg’s results images in quicker loading ✴I incorporated all images into my CSS
  68. 68. Using Image Files Mobile devices feature small screens Use .gif images Limit the size and Smaller size detail of your graphic than .jpg’s results images in quicker loading ✴I incorporated all images into my CSS ✴This made the XHTML code simpler while making my CSS files very large
  69. 69. Use percentages or ems to size text
  70. 70. 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
  71. 71. 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 This won’t work with image files as they are not resizable to device window while remaining conspicuous
  72. 72. CSS is your friend
  73. 73. 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
  74. 74. 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
  75. 75. 4 Just when you think you’re done…
  76. 76. 4 Just when you think you’re done… Essential steps to ensure that your site is really done
  77. 77. Validate all code
  78. 78. 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
  79. 79. 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
  80. 80. Design with the limitations of Internet Explorer in mind
  81. 81. Design with the limitations of Internet Explorer in mind ✴ Mobile devices often use this operating system
  82. 82. 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
  83. 83. 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 one to evaluate the importance and value of features
  84. 84. 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 one to evaluate the importance and value of features ✴ Often most effective to keep it very simple
  85. 85. Things I’d like to do
  86. 86. Things I’d like to do ✴ Automatically direct mobile devices from the general library site to the mobile site
  87. 87. 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
  88. 88. 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!
  89. 89. 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
  90. 90. Contact Information Brendan Ryan Library Commons Assistant Phillips Memorial Library Providence College bryan1@providence.edu 401.865.1993 http://m.providence.edu/library/

×