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