0
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

818

Published on

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

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
818
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide





























































































  • Include

    http://m.providence.edu/library/index.html


    


    http://m.providence.edu/library/hours.html


    


    http://m.providence.edu/library/holidays.html



  • Include

    http://m.providence.edu/library/index.html


    


    http://m.providence.edu/library/hours.html


    


    http://m.providence.edu/library/holidays.html



  • Include

    http://m.providence.edu/library/index.html


    


    http://m.providence.edu/library/hours.html


    


    http://m.providence.edu/library/holidays.html



  • Include

    http://m.providence.edu/library/index.html


    


    http://m.providence.edu/library/hours.html


    


    http://m.providence.edu/library/holidays.html



  • Include

    http://m.providence.edu/library/index.html


    


    http://m.providence.edu/library/hours.html


    


    http://m.providence.edu/library/holidays.html



  • 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


  • Include
    screenshot of mobile.css, code for index.html, and index.html


  • Include
    screenshot of mobile.css, code for index.html, and index.html


  • Include
    screenshot of mobile.css, code for index.html, and index.html


  • Include
    screenshot of mobile.css, code for index.html, and index.html


  • Include
    screenshot of mobile.css, code for index.html, and index.html

































  • Transcript of "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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×