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

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 pageMobile 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 tagso Headingso Color choiceo PDF warningo 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-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/

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

Emulatorhttp://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 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

Example - OverDrive

http://digitalcollection.uhls.org

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

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.

OnePager

http://weareinflux.com/onepagerdemo/

Prefab Library

http://helloprefab.com/

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 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?

App IdeasVirtual 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.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.

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 McLellanHead of Digital ServicesEast Greenbush Community Librarymclelk@eastgreenbushlibrary.org

Slides: http://www.slideshare.net/techbrarian

Links: http://delicious.com/karriem