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…
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
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
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.
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
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
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/
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
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
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
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)
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
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
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
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
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
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
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/
Notas do Editor
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