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

2. DEVELOPING SITES
OPTIMIZED FOR
MOBILE DEVICES

3. DEVELOPING SITES
OPTIMIZED FOR
MOBILE DEVICES
Brendan Ryan
Library Commons Assistant
Phillips Memorial Library
Providence College

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

5. 1 Getting Started

6. 1 Getting Started
1. Key considerations when developing
for mobile devices

7. 1 Getting Started
1. Key considerations when developing
for mobile devices
2. What purpose does this site serve?

8. 1 Getting Started
1. Key considerations when developing
for mobile devices
2. What purpose does this site serve?
3. Assess your resources

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

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

11. Key considerations

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

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

14. What purpose does this site
serve?

15. What purpose does this site
serve?
✴ Clearly identify your audience
✴ Helps the library determine what
services to offer

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

17. Assess Your Resources

18. Assess Your Resources

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

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

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

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)

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

24. Browse other mobile
sites

25. Browse other mobile
sites
✴ Allows you to find models at other
library sites

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

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

28. Helpful web resources

29. Helpful web resources
✴Excellent mobile sites from libraries:
✴Public: New York Public Library
✴Academic: Oregon State University

30. Helpful web resources
✴Excellent mobile sites from libraries:
✴Public: New York Public Library
✴Academic: Oregon State University

31. Helpful web resources
✴Excellent mobile sites from libraries:
✴Public: New York Public Library
✴Academic: Oregon State University

32. Helpful web resources
✴Excellent mobile sites from libraries:
✴Public: New York Public Library
✴Academic: Oregon State University

33. Helpful web resources
✴Excellent mobile sites from libraries:
✴Public: New York Public Library
✴Academic: Oregon State University

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

35. 2 Tools to Create

36. 2 Tools to Create
✴ Device Emulators

37. 2 Tools to Create
✴Device Emulators
✴Free Editors

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

39. 2 Tools to Create
✴Device Emulators
✴Free Editors
✴Drawbacks to Dreamweaver
✴Good mobile coding sites

40. Device Emulators

41. Device Emulators
Opera Browser

42. Device Emulators
Opera Browser

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

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

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

46. Free Editors

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

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

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

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

51. Drawbacks to Dreamweaver

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

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

54. 3 Rules to design by…

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

56. Clickstream

57. Clickstream
✴Limit the amount of sites the
user has to navigate to get the
desired information

58. Clickstream
✴Limit the amount of sites the
user has to navigate to get the
desired information
✴Often sites load slowly on
mobile devices

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

63. Using Image Files

64. Using Image Files
Mobile devices feature small
screens

65. Using Image Files
Mobile devices feature small
screens
Limit the size and
detail of your graphic
images

66. Using Image Files
Mobile devices feature small
screens Use .gif images
Limit the size and
detail of your graphic
images

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

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

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

70. Use percentages or ems to
size text

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

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

73. CSS is your friend

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

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

76. 4 Just when you think you’re done…

77. 4 Just when you think you’re done…
Essential steps to ensure
that your site is really done

78. Validate all code

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

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

81. Design with the limitations of
Internet Explorer in mind

82. Design with the limitations of
Internet Explorer in mind
✴ Mobile devices often use this operating
system

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

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

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

86. Things I’d like to do

87. Things I’d like to do
✴ Automatically direct mobile devices from
the general library site to the mobile site

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

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!

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

91. Contact Information
Brendan Ryan
Library Commons Assistant
Phillips Memorial Library
Providence College
bryan1@providence.edu
401.865.1993
http://m.providence.edu/library/