Get SMART with mobile websites

496 views
448 views

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
496
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Get SMART with mobile websites

    1. 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
    2. 2. Disclaimer
    3. 3. Does your library need a mobile presence? YES!* *Some special libraries may be exceptions
    4. 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. 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
    6. 6. Early WordPress Plugin
    7. 7. Full page Mobile top Mobile bottom http://techtips.eastgreenbushlibrary.org
    8. 8. Plugin Fail
    9. 9. 2. Create a Separate Mobile Site
    10. 10. What to Include
    11. 11. General Tips
    12. 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. 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
    14. 14. Choosing “Safe” Colors http://www.visibone.com/colorblind/ http://safecolours.rigdenage.com/colourchoice.html
    15. 15. Your First Stop http://libsuccess.org/M-Libraries
    16. 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. 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
    18. 18. Emulator http://www.mobilephoneemulator.com/
    19. 19. Validator
    20. 20. Firebug
    21. 21. How Will They Find It? • “m.” subdomain • Yourlibrary.org/mobile • Link on your full site • Optional redirect
    22. 22. 3. Start from Scratch (or Template)
    23. 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
    24. 24. Example - OverDrive http://digitalcollection.uhls.org
    25. 25. 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
    26. 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.
    27. 27. OnePager http://weareinflux.com/onepagerdemo/
    28. 28. Prefab Library http://helloprefab.com/
    29. 29. Testing RWD • http://designyourway.net/blog/resources/tools-for- testing-responsive-websites-21-items • Emulators and validators
    30. 30. 4. Apps What kinds are there? Should we have one? Why?
    31. 31. Free(ish) Services http://iui-js.org
    32. 32. Other Charges
    33. 33. 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?
    34. 34. App Ideas Virtual Tour
    35. 35. Local History Tour http://www.historypin.com http://m.lib.ncsu.edu/wolfwalk/
    36. 36. Scavenger Hunt – Library or Region
    37. 37. Complementary Tools
    38. 38. QR Codes
    39. 39. How We Use Them
    40. 40. 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
    41. 41. What Do Your Patrons Need? TESCO/Home Plus in South Korea: http://www.youtube.com/watch?v=fGaVFRzTTP4
    42. 42. • 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.
    43. 43. 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/
    44. 44. 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.
    45. 45. 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/
    46. 46. Augmented Reality Tools: http://www.augmentedplanet.com/resources/developer-tools/
    47. 47. Questions?
    48. 48. 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

    ×