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/

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