Slides from the Mobile in Libraries Information Sharing event.

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

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

3. So...

4. Question your
assumptions about
mobile

5. Apps are the only way

6. Mobile Context

7. The Mobile Web...

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

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

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

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

12. • 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

13. Question your
assumptions about
mobile

14. What is
responsive web design
anyway?

15. Who redesigned their
website in the last five
years?

16. Which devices
did you target?

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

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

25. You have no control of
the device somebody
will access your site on.

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

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

29. Building multi-device
product in 2012...

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

31. 2 - Web site and a
distinct Mobile website

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

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

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

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

36. Native Apps

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

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

39. 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/

40. • 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/

41. Phone Gap & Similar

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

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

44. Separate Sites

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

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

48. Responsive Web App

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

50. Responsive Web App
• Hard to retrofit
• Requires modern web thinking
• Sometimes send larger media than needed

51. If we want a usable solution, that's
maintainable across a wide
customer base, makes use of
existing skills and that we control...

52. Responsive Web App

53. Almost...
• Retrofitting is hard
• Especially when you have 80 customers
• ..whose design you don’t control

54. Adaptive

55. prism.talis.com/mmu

58. Adaptive
All the content, differently presented

59. HTML5
CSS3 Media Queries
LocalStorage

60. Web as platform

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

62. Trick Question

63. “The future is already here, it's
just not very evenly distributed”
- William Gibson

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

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

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

67. Web Apps
• Will soon do anything native apps do

68. Question your
assumptions about
“mobile”