Web Apps and Responsive Design for Libraries

Responsive Web Design for Libraries Matt Machell, Capita Libraries blogs.capita-libraries.co.uk/prism matt.machell @ capita.co.uk eclecticdreams.com / @shuckle

Themes• What is responsive web design?• Web apps vs other mobile solutions

Question yourassumptions about mobile

Apps are the only way

Mobile Context

The Mobile Web...

We’ve done this...• Prism Mobile• Adaptive layout• Released Sept 2011

Before all that• Who has a smartphone?• What do you actually do with it?

Quick Exercise• Get out your phones• Discuss which apps and websites you use on them• Come up with list of top 3

Big question• Did anybody use a library web site?• Their institutional site?• Anybody say the phonecall app?

• Among all U.S. adults, only one in three report using any apps on their cell phone on a regular, weekly basis. http://www.pewinternet.org/~/media/Files/Reports/2011/PIP_Apps-Update-2011.pdf

Question yourassumptions about mobile

What isresponsive web design anyway?

Who redesigned theirwebsite in the last ﬁve years?

Which devicesdid you target?

credit : http://www.ﬂickr.com/photos/sdasmarchives/7142833961/

“Fragmenting our content across different “device-optimized” experiences is a losing proposition, orat least an unsustainable one. “ ―Ethan Marcotte, Responsive Web Design

You have no control of the device somebodywill access your site on.

Responsive Web Design• A ﬂexible grid• Flexible media and images• media queries http://www.alistapart.com/articles/responsive-web-design/

Eh?http://m.bbc.co.uk/newshttp://mg.co.uk/http://www.starbucks.com/

Building multi-device product in 2012...

1- Single responsive or adaptive website http://library.duke.edu/ http://prism.talis.com/mmu/ http://www.lancs.ac.uk/ http://www.eastsussex.gov.uk/default.htm

2 - Web site and adistinct Mobile website

3 - Native app that calls web APIs http://itunes.apple.com/gb/app/worcestershire-county-council/id465947187?mt=8 http://www.ombiel.com/campusm.html

4 - Web wrapped in app Http://phonegap.com http://www.appcelerator.com/

• Who has an app for their library?• Who has a separate mobile website?• Who has a single adaptive or responsive site?• Anybody use Phonegap?

Exercise• Get into groups• Pick an approach• Discuss pros and cons of approach

Native Apps

Native Apps - Pros• Faster rendering of graphics• Smoother interactions• Feels part of OS• You can charge to download it

Native Apps - Cons• Which platform?• App store terms and control• An app is a relationship• Costly to develop• Promoting it...

Targeting Platforms• iOS 5 captured approximately 75% of all iOS users in the same amount of time it took Gingerbread to get 4% of all Android users.” http://thenextweb.com/apple/2012/03/06/why-do-developers-prefer-ios-over-android- try-75-adoption-of-ios-5-while-ics-is-stuck-at-1/

• 99% of Imangis customer support emails are people complaining their Android device is not supported. Imangi supports 707 Android devices. http://thenextweb.com/mobile/2012/03/30/the-shocking-toll-of-hardware-and-software-fragmentation-on-android-development/

Phone Gap & Similar

Phone Gap & Similar• Write once, deploy to lots of devices• Use existing web skills

Phone Gap & Similar• App store terms• Non-native look and feel• Promoting it...• Can be slower than equivalent native app

Separate Sites

Separate Sites - Pros• Smaller download / Faster• All platforms• You control it

Separate Sites - Cons• Different sites get out of sync.• Twice the management overhead.• How many sites do you have?• Device detection is unreliable• Multiple uris

Responsive Web App

Responsive Web App• One site that works on any device• Maintainable• One set of uris• You control it

Responsive Web App• Hard to retroﬁt• Requires modern web thinking• Sometimes send larger media than needed

If we want a usable solution, thats maintainable across a wide customer base, makes use ofexisting skills and that we control...

Responsive Web App

Almost...• Retroﬁtting is hard• Especially when you have 80 customers• ..whose design you don’t control

Adaptive

prism.talis.com/mmu

AdaptiveAll the content, differently presented

HTML5CSS3 Media QueriesLocalStorage

Web as platform

What can’t you do in a web browser?• Add to home screen • Audio manipulation• Access the file system • Detect location• Use the device’s camera • Fullscreen video• Store data on the device • Drag and Drop for later • Make a phone call• Work offline • Scan a barcode• 3D graphics • Send notifications• Image manipulation

Trick Question

“The future is already here, itsjust not very evenly distributed” - William Gibson

Boot to Gecko http://www.youtube.com/watch?v=OAaH5vikEOM

http://www.tuaw.com/2012/05/01/ﬁnancial-times-to-discontinue-ipad-iphone-apps-move-to-html5

Responsive Web Design• Maintainable• one web• multi-device solution

Web Apps• Will soon do anything native apps do

Question yourassumptions about “mobile”

http://storify.com	29
http://lanyrd.com	19
https://twimg0-a.akamaihd.net	9
https://si0.twimg.com	5
http://www.linkedin.com	3
http://us-w1.rockmelt.com	1

Web Apps and Responsive Design for Libraries

by Matt Machell

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 66

Statistics