![Page 1: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/1.jpg)
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
![Page 2: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/2.jpg)
Disclaimer
![Page 3: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/3.jpg)
Does your library need a mobile presence?
YES!* *Some special libraries may be exceptions
![Page 4: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/4.jpg)
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
![Page 5: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/5.jpg)
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
![Page 6: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/6.jpg)
Early WordPress Plugin
![Page 7: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/7.jpg)
Full page Mobile top
Mobile bottom
http://techtips.eastgreenbushlibrary.org
![Page 8: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/8.jpg)
Plugin Fail
![Page 9: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/9.jpg)
2. Create a Separate Mobile Site
![Page 10: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/10.jpg)
What to Include
![Page 11: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/11.jpg)
General Tips
![Page 12: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/12.jpg)
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.
![Page 13: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/13.jpg)
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
![Page 14: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/14.jpg)
Choosing “Safe” Colors
http://www.visibone.com/colorblind/
http://safecolours.rigdenage.com/colourchoice.html
![Page 15: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/15.jpg)
Your First Stop
http://libsuccess.org/M-Libraries
![Page 16: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/16.jpg)
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/
![Page 17: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/17.jpg)
Test and Test again Emulators Validators
• iPhone/iPad – http://iphone-emulator.org
• http://www.testiphone.com/ • Android –
http://developer.android.com/sdk/index.html
• Windows Phone – http://dev.windowsphone.com/en-us/downloadsdk
• Blackberry – https://bdsc.webapps.blackberry.com/html5/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
![Page 18: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/18.jpg)
Emulator http://www.mobilephoneemulator.com/
![Page 19: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/19.jpg)
Validator
![Page 20: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/20.jpg)
Firebug
![Page 21: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/21.jpg)
How Will They Find It?
• “m.” subdomain
• Yourlibrary.org/mobile
• Link on your full site
• Optional redirect
![Page 22: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/22.jpg)
3. Start from Scratch (or Template)
![Page 23: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/23.jpg)
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
![Page 24: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/24.jpg)
Example - OverDrive
http://digitalcollection.uhls.org
![Page 25: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/25.jpg)
More Examples • http://blog.lib.uiowa.edu/hardinmd/2012/05/03/res
ponsive-design-sites-higher-ed-libraries-notables/
• http://bostonglobe.com/
• http://jstor.com/
• http://www.bbc.co.uk/news/
• http://2012.buildconf.com/
• http://contentsmagazine.com/
• http://css-tricks.com/
*also a useful site on this subject
![Page 26: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/26.jpg)
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.
![Page 27: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/27.jpg)
OnePager
http://weareinflux.com/onepagerdemo/
![Page 28: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/28.jpg)
![Page 30: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/30.jpg)
Testing RWD
• http://designyourway.net/blog/resources/tools-for-
testing-responsive-websites-21-items
• Emulators and validators
![Page 31: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/31.jpg)
4. Apps
What kinds are there?
Should we have one?
Why?
![Page 32: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/32.jpg)
Free(ish) Services
http://iui-js.org
![Page 33: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/33.jpg)
Other Charges
![Page 34: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/34.jpg)
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?
![Page 35: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/35.jpg)
App Ideas Virtual Tour
![Page 36: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/36.jpg)
Local History Tour
http://www.historypin.com
http://m.lib.ncsu.edu/wolfwalk/
![Page 37: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/37.jpg)
Scavenger Hunt – Library or Region
![Page 38: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/38.jpg)
Complementary Tools
![Page 39: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/39.jpg)
QR Codes
![Page 40: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/40.jpg)
![Page 41: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/41.jpg)
How We Use Them
![Page 42: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/42.jpg)
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
![Page 43: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/43.jpg)
What Do Your Patrons Need?
TESCO/Home Plus in South Korea: http://www.youtube.com/watch?v=fGaVFRzTTP4
![Page 44: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/44.jpg)
• 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.
![Page 45: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/45.jpg)
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/
![Page 46: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/46.jpg)
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.
![Page 47: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/47.jpg)
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/
![Page 48: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/48.jpg)
Augmented Reality
Tools: http://www.augmentedplanet.com/resources/developer-tools/
![Page 49: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/49.jpg)
Questions?
![Page 50: Get SMART with Mobile Websites - NYLA SMART... · Get SMART with Mobile Websites Or, How to Optimize Your Mobile Presence with Minimal Investment and Expertise New York Library Association](https://reader034.vdocuments.us/reader034/viewer/2022042303/5ece9309646b3a36ef41f4ad/html5/thumbnails/50.jpg)
Contact Info: Karrie McLellan
Head of Digital Services
East Greenbush Community Library
Slides: http://www.slideshare.net/techbrarian
Links: http://delicious.com/karriem