Web Apps and Responsive Design for Libraries

3,273 views

Published on

Slides from the Mobile in Libraries Information Sharing event.

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,273
On SlideShare
0
From Embeds
0
Number of Embeds
85
Actions
Shares
0
Downloads
35
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Web Apps and Responsive Design for Libraries

  1. 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. 2. Themes• What is responsive web design?• Web apps vs other mobile solutions
  3. 3. So...
  4. 4. Question yourassumptions about mobile
  5. 5. Apps are the only way
  6. 6. Mobile Context
  7. 7. The Mobile Web...
  8. 8. We’ve done this...• Prism Mobile• Adaptive layout• Released Sept 2011
  9. 9. Before all that• Who has a smartphone?• What do you actually do with it?
  10. 10. Quick Exercise• Get out your phones• Discuss which apps and websites you use on them• Come up with list of top 3
  11. 11. Big question• Did anybody use a library web site?• Their institutional site?• Anybody say the phonecall app?
  12. 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. 13. Question yourassumptions about mobile
  14. 14. What isresponsive web design anyway?
  15. 15. Who redesigned theirwebsite in the last five years?
  16. 16. Which devicesdid you target?
  17. 17. credit : http://www.flickr.com/photos/sdasmarchives/7142833961/
  18. 18. “Fragmenting our content across different “device-optimized” experiences is a losing proposition, orat least an unsustainable one. “ ―Ethan Marcotte, Responsive Web Design
  19. 19. You have no control of the device somebodywill access your site on.
  20. 20. Responsive Web Design• A flexible grid• Flexible media and images• media queries http://www.alistapart.com/articles/responsive-web-design/
  21. 21. Eh?http://m.bbc.co.uk/newshttp://mg.co.uk/http://www.starbucks.com/
  22. 22. Building multi-device product in 2012...
  23. 23. 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
  24. 24. 2 - Web site and adistinct Mobile website
  25. 25. 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
  26. 26. 4 - Web wrapped in app Http://phonegap.com http://www.appcelerator.com/
  27. 27. • Who has an app for their library?• Who has a separate mobile website?• Who has a single adaptive or responsive site?• Anybody use Phonegap?
  28. 28. Exercise• Get into groups• Pick an approach• Discuss pros and cons of approach
  29. 29. Native Apps
  30. 30. Native Apps - Pros• Faster rendering of graphics• Smoother interactions• Feels part of OS• You can charge to download it
  31. 31. Native Apps - Cons• Which platform?• App store terms and control• An app is a relationship• Costly to develop• Promoting it...
  32. 32. 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/
  33. 33. • 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/
  34. 34. Phone Gap & Similar
  35. 35. Phone Gap & Similar• Write once, deploy to lots of devices• Use existing web skills
  36. 36. Phone Gap & Similar• App store terms• Non-native look and feel• Promoting it...• Can be slower than equivalent native app
  37. 37. Separate Sites
  38. 38. Separate Sites - Pros• Smaller download / Faster• All platforms• You control it
  39. 39. 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
  40. 40. Responsive Web App
  41. 41. Responsive Web App• One site that works on any device• Maintainable• One set of uris• You control it
  42. 42. Responsive Web App• Hard to retrofit• Requires modern web thinking• Sometimes send larger media than needed
  43. 43. If we want a usable solution, thats maintainable across a wide customer base, makes use ofexisting skills and that we control...
  44. 44. Responsive Web App
  45. 45. Almost...• Retrofitting is hard• Especially when you have 80 customers• ..whose design you don’t control
  46. 46. Adaptive
  47. 47. prism.talis.com/mmu
  48. 48. AdaptiveAll the content, differently presented
  49. 49. HTML5CSS3 Media QueriesLocalStorage
  50. 50. Web as platform
  51. 51. 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
  52. 52. Trick Question
  53. 53. “The future is already here, itsjust not very evenly distributed” - William Gibson
  54. 54. Boot to Gecko http://www.youtube.com/watch?v=OAaH5vikEOM
  55. 55. http://www.tuaw.com/2012/05/01/financial-times-to-discontinue-ipad-iphone-apps-move-to-html5
  56. 56. Responsive Web Design• Maintainable• one web• multi-device solution
  57. 57. Web Apps• Will soon do anything native apps do
  58. 58. Question yourassumptions about “mobile”

×