Get SMART with mobile websites
-
Upload
techbrarian -
Category
Technology
-
view
391 -
download
2
Transcript of Get SMART with mobile websites
![Page 1: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/1.jpg)
Get SMART with Mobile
WebsitesOr, How to Optimize Your Mobile Presence
with Minimal Investment and Expertise
New York Library Association Annual Conference 2013Karrie McLellanHead of Digital ServicesEast Greenbush Community Library
![Page 2: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/2.jpg)
Disclaimer
![Page 3: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/6.jpg)
Early WordPress Plugin
![Page 7: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/7.jpg)
Full pageMobile top
Mobile bottom
http://techtips.eastgreenbushlibrary.org
![Page 8: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/8.jpg)
Plugin Fail
![Page 9: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/9.jpg)
2. Create a Separate Mobile Site
![Page 10: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/10.jpg)
What to Include
![Page 11: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/11.jpg)
General Tips
![Page 12: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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 tagso Headingso Color choiceo PDF warningo Target attribute
• HTML5 and CSS tips: http://caniuse.com/#feat=css-mediaqueries
![Page 14: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/15.jpg)
Your First Stop
http://libsuccess.org/M-Libraries
![Page 16: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/16.jpg)
Many, Many Resources• http://libsuccess.org/M-Libraries • http://oedb.org/ilibrarian/the-ultimate-mega-essen
tial-website-design-guide-115-resources/
• Rock stars to follow online:o Chad Mairno Jason Clarko 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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/17.jpg)
Test and Test againEmulators 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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/18.jpg)
Emulatorhttp://www.mobilephoneemulator.com/
![Page 19: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/19.jpg)
Validator
![Page 20: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/20.jpg)
Firebug
![Page 21: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/22.jpg)
3. Start from Scratch (or Template)
![Page 23: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/23.jpg)
Responsive Design• Create a grid
(sketch at http://tinyurl.com/RWDsketch or http://balsamiq.com/)
• Make the grid fluido 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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/24.jpg)
Example - OverDrive
http://digitalcollection.uhls.org
![Page 25: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/25.jpg)
More Examples• http://blog.lib.uiowa.edu/hardinmd/2012/05/03/re
sponsive-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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/26.jpg)
Mobile Design Tools
Free to low cost • One-pager – free codehttp://weareinflux.com/onepagerdemo/
• 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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/27.jpg)
OnePager
http://weareinflux.com/onepagerdemo/
![Page 28: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/28.jpg)
![Page 30: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/31.jpg)
4. Apps
What kinds are there?
Should we have one?
Why?
![Page 32: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/32.jpg)
Free(ish) Services
http://iui-js.org
![Page 33: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/33.jpg)
Other Charges
![Page 34: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/34.jpg)
Free App BuildersPros 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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/35.jpg)
App IdeasVirtual Tour
![Page 36: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/36.jpg)
Local History Tour
http://www.historypin.com
http://m.lib.ncsu.edu/wolfwalk/
![Page 37: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/37.jpg)
Scavenger Hunt – Library or Region
![Page 38: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/38.jpg)
Complementary Tools
![Page 39: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/39.jpg)
QR Codes
![Page 40: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/40.jpg)
![Page 41: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/41.jpg)
How We Use Them
![Page 42: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/46.jpg)
Fitvids.jsVideo 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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/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](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/48.jpg)
Augmented Reality
Tools:http://www.augmentedplanet.com/resources/developer-tools/
![Page 49: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/49.jpg)
Questions?
![Page 50: Get SMART with mobile websites](https://reader036.fdocuments.net/reader036/viewer/2022062515/55d4fc74bb61eba4528b4632/html5/thumbnails/50.jpg)
Contact Info: Karrie McLellanHead of Digital ServicesEast Greenbush Community [email protected]
Slides: http://www.slideshare.net/techbrarian
Links: http://delicious.com/karriem