Presentation given at the New York Library Association Annual Conference 2013. Sponsored by the SMART section of NYLA.
Edit 10/5/13 - Added "safe color" information
1. Get SMART with
Mobile Websites
Or, How to Optimize Your Mobile Presence
with Minimal Investment and Expertise
New York Library Association Annual Conference 2013
Karrie McLellan
Head of Digital Services
East Greenbush Community Library
3. Does your library need a
mobile presence?
YES!*
*Some special libraries may be exceptions
4. Four Approaches
• Retrofit an existing site
• Create a separate mobile site
• Start from scratch and create a single website that
works on all devices.
• Create an app
5. 1. Retrofit Existing Site
WordPress Plugins:
• WordPress Mobile Pack
• MobilePress
• WP Touch
• WP Mobile Detector
Joomla Plugins:
• Mobile Joomla
• MobileTemplate
• Simple Mobile Detection
Joomla Themes:
http://tinyurl.com/knpcjyc
Drupal Plugins:
• Mobile Tools
• Mobile Plugin
Drupal Themes:
http://tinyurl.com/kt66yag
WordPress Themes:
• Twenty Twelve
• 40 more:
http://tinyurl.com/82d8nqh
12. Simplicity Is Key
• Minimize scrolling, clicks, and typing
• Limit HTML for loading and caching. Leave out
unnecessary characters and white space in code and
scripts (minify) JSLint, CleanCSS
• Use URL shorteners – bit.ly, tinyurl, goo.gl, etc.
• Keep directory names short.
• Use basic fonts
• No Flash
• No tables – single column with white space or flexible
elements (responsive)
• Always link to the full site
• Avoid linking to PDFs
• Close tags and don’t use target attribute to open a new
window.
13. Images and Styling
• Make links easy to see and click (finger size)
• Minimize the use of pictures.
• Keep picture size under 200KB – preserve quality
• Format with CSS, not HTML
• Consider ADA
o Alt tags
o Headings
o Color choice
o PDF warning
o Target attribute
• HTML5 and CSS tips: http://caniuse.com/#feat=css-
mediaqueries
16. Many, Many Resources
• http://libsuccess.org/M-Libraries
• http://oedb.org/ilibrarian/the-ultimate-mega-
essential-website-design-guide-115-resources/
• Rock stars to follow online:
o Chad Mairn
o Jason Clark
o Ellyssa Kroski (iLibrarian blog)
o Jonathan Stark (non-librarian)
Responsive:
http://www.abookapart.com/, http://www.alistapart.com/
17. Test and Test again
Emulators Validators
• iPhone/iPad –
http://iphone-emulator.org
• http://www.testiphone.com/
• Android –
http://developer.android.com/sdk/inde
x.html
• Windows Phone –
http://dev.windowsphone.com/en-
us/downloadsdk
• Blackberry –
https://bdsc.webapps.blackberry.com/h
tml5/download
• Symbian (Nokia) –
http://tinyurl.com/33rxvl5
• Opera –
http://www.opera.com/developer/tools
/mobile/
• Model-specific -
http://www.mobilephoneemulator.com/
• Keynote – ($) http://www.keynote.com/
• Google (Basic)-
http://www.google.com/gwt/n
• W3C Mobile OK
Checker
http://validator.w3.org/
mobile/
• Unicorn –
http://validator.w3.org/
unicorn
• MobiReady –
http://mobiready.com
23. Responsive Design
• Create a grid
(sketch at http://tinyurl.com/RWDsketch or http://balsamiq.com/)
• Make the grid fluid
o Adaptive images (http://css-tricks.com/which-responsive-
images-solution-should-you-use/)
o Flexible page elements
• Set break points
• Media queries (CSS3) – “If the screen size is between x
and y wide, display element at z% width”
http://caniuse.com/#feat=css-mediaqueries
26. Mobile Design Tools
Free to low cost • One-pager – free code
http://weareinflux.com/on
epagerdemo/
• Prefab library – Based in
WordPress and more full-
featured. Free to try,
flexible pricing.
http://helloprefab.com/
Free, but limited templates.
More options and flexibility.
Also more planning needed.
34. Free App Builders
Pros Cons
• Quick and easy
• No expertise required
• No cost to get started
• Most are only free to a
point
• Sometimes the app is
only available for
download in *their* app
store.
• Do you have control over
permissions?
• Limited customization
• Available on all
platforms?
• Permanence?
42. Other Library Ideas
• Link to movie trailers
• Link to librarian book talks
• Readers advisory – “If you like
this…”
• Nonfiction pathfinders
• Scavenger hunt
• Scan to sign up for electronic
newsletter
• Pull up a map of the library
43. What Do Your Patrons Need?
TESCO/Home Plus in South Korea:
http://www.youtube.com/watch?v=fGaVFRzTTP4
44. • Always lead to a mobile
friendly page
• Test your codes
• Don’t use proprietary
codes
• Pick a service that will let
you keep stats
• Provide patron instruction
at point of use.
45. QR Code Resources
• http://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-
qr-code/
• http://oedb.org/ilibrarian/qr-code-roundup-10-resources-for-
librarians-and-educators/
• http://mashable.com/2010/08/23/how-to-create-qr-codes/
QR Code Generators:
• http://delivr.com/QR-Code-Generator
• http://qrcode.kaywa.com/ (no free stats)
• http://www.qrstuff.com/
46. Fitvids.js
Video embeds don’t resize well
for RWD, even if you use the
HTML5 video element.
Fitvids.js is a plugin that uses jQuery to make your
videos embeds fluid. http://fitvidsjs.com
Works with YouTube, Vimeo, Blip.tv, etc.
47. RSS
“The report of my death was an
exaggeration.”
–Mark Twain (often misquoted)
WordPress, Joomla, and Drupal have RSS feed creation built in.
Feedburner is now a Google service:
https://accounts.google.com/ServiceLogin?service=feedburner
Another feed creator:
http://page2rss.com/
DIY: http://www.wikihow.com/Create-an-RSS-Feed
Embed a feed on your site: http://www.rapidfeeds.com/
50. Contact Info: Karrie McLellan
Head of Digital Services
East Greenbush Community Library
mclelk@eastgreenbushlibrary.org
Slides: http://www.slideshare.net/techbrarian
Links: http://delicious.com/karriem
Notes de l'éditeur
Most of this presentation is geared toward those who are not website coding experts. I have had one class in HTML and some continuing education. However, some of the resources I cite at the end include higher-level concepts and coding.
Best reviewed paid resource for libraries is Boopsie, but it’s costly.
