Responsive Web Design for Libraries

Matt Machell, Capita Librariesblogs.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

So...

Question your assumptions 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 your assumptions about

mobile

What is responsive web design

anyway?

Who redesigned their website in the last five

years?

Which devices did you target?

credit : http://www.flickr.com/photos/sdasmarchives/7142833961/

“Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one. “

―Ethan Marcotte, Responsive Web Design

You have no control of the device somebody

will access your site on.

Responsive Web Design

• A flexible 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 a distinct Mobile website

3 - Native app that calls web APIs

http://itunes.apple.com/gb/app/worcestershire-county-council/id465947187?mt=8http://www.ombiel.com/campusm.html

4 - Web wrapped in app

Http://phonegap.comhttp://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 Imangi's 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 retrofit

• Requires modern web thinking

• Sometimes send larger media than needed

If we want a usable solution, that's maintainable across a wide

customer base, makes use of existing skills and that we control...

Responsive Web App

Almost...

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

• Add to home screen

• Access the file system

• Use the device’s camera

• Store data on the device for later

• Work offline

• 3D graphics

• Image manipulation

• Audio manipulation

• Detect location

• Fullscreen video

• Drag and Drop

• Make a phone call

• Scan a barcode

• Send notifications

What can’t you do in a web browser?

Trick Question

“The future is already here, it's just not very evenly distributed”

- William Gibson

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

http://www.tuaw.com/2012/05/01/financial-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 your assumptions about

“mobile”