get smart with mobile websites - nyla smart... · get smart with mobile websites or, how to...
Post on 25-May-2020
3 Views
Preview:
TRANSCRIPT
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
Disclaimer
Does your library need a mobile presence?
YES!* *Some special libraries may be exceptions
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
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
Early WordPress Plugin
Full page Mobile top
Mobile bottom
http://techtips.eastgreenbushlibrary.org
Plugin Fail
2. Create a Separate Mobile Site
What to Include
General Tips
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.
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
Choosing “Safe” Colors
http://www.visibone.com/colorblind/
http://safecolours.rigdenage.com/colourchoice.html
Your First Stop
http://libsuccess.org/M-Libraries
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/
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
Emulator http://www.mobilephoneemulator.com/
Validator
Firebug
How Will They Find It?
• “m.” subdomain
• Yourlibrary.org/mobile
• Link on your full site
• Optional redirect
3. Start from Scratch (or Template)
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
Example - OverDrive
http://digitalcollection.uhls.org
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
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.
OnePager
http://weareinflux.com/onepagerdemo/
Testing RWD
• http://designyourway.net/blog/resources/tools-for-
testing-responsive-websites-21-items
• Emulators and validators
4. Apps
What kinds are there?
Should we have one?
Why?
Free(ish) Services
http://iui-js.org
Other Charges
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?
App Ideas Virtual Tour
Local History Tour
http://www.historypin.com
http://m.lib.ncsu.edu/wolfwalk/
Scavenger Hunt – Library or Region
Complementary Tools
QR Codes
How We Use Them
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
What Do Your Patrons Need?
TESCO/Home Plus in South Korea: http://www.youtube.com/watch?v=fGaVFRzTTP4
• 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.
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/
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.
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/
Augmented Reality
Tools: http://www.augmentedplanet.com/resources/developer-tools/
Questions?
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
top related