Your SlideShare is downloading. ×
0
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Apps and Responsive Design for Libraries

2,688

Published on

Slides from the Mobile in Libraries Information Sharing event.

Slides from the Mobile in Libraries Information Sharing event.

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,688
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
28
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 yourassumptions 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 yourassumptions about mobile
  • 14. What isresponsive web design anyway?
  • 15. Who redesigned theirwebsite in the last five years?
  • 16. Which devicesdid you target?
  • 17. credit : http://www.flickr.com/photos/sdasmarchives/7142833961/
  • 18. “Fragmenting our content across different “device-optimized” experiences is a losing proposition, orat least an unsustainable one. “ ―Ethan Marcotte, Responsive Web Design
  • 19. You have no control of the device somebodywill access your site on.
  • 20. Responsive Web Design• A flexible grid• Flexible media and images• media queries http://www.alistapart.com/articles/responsive-web-design/
  • 21. Eh?http://m.bbc.co.uk/newshttp://mg.co.uk/http://www.starbucks.com/
  • 22. Building multi-device product in 2012...
  • 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. 2 - Web site and adistinct Mobile website
  • 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. 4 - Web wrapped in app Http://phonegap.com http://www.appcelerator.com/
  • 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. Exercise• Get into groups• Pick an approach• Discuss pros and cons of approach
  • 29. Native Apps
  • 30. Native Apps - Pros• Faster rendering of graphics• Smoother interactions• Feels part of OS• You can charge to download it
  • 31. Native Apps - Cons• Which platform?• App store terms and control• An app is a relationship• Costly to develop• Promoting it...
  • 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. • 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. Phone Gap & Similar
  • 35. Phone Gap & Similar• Write once, deploy to lots of devices• Use existing web skills
  • 36. Phone Gap & Similar• App store terms• Non-native look and feel• Promoting it...• Can be slower than equivalent native app
  • 37. Separate Sites
  • 38. Separate Sites - Pros• Smaller download / Faster• All platforms• You control it
  • 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. Responsive Web App
  • 41. Responsive Web App• One site that works on any device• Maintainable• One set of uris• You control it
  • 42. Responsive Web App• Hard to retrofit• Requires modern web thinking• Sometimes send larger media than needed
  • 43. If we want a usable solution, thats maintainable across a wide customer base, makes use ofexisting skills and that we control...
  • 44. Responsive Web App
  • 45. Almost...• Retrofitting is hard• Especially when you have 80 customers• ..whose design you don’t control
  • 46. Adaptive
  • 47. prism.talis.com/mmu
  • 48. AdaptiveAll the content, differently presented
  • 49. HTML5CSS3 Media QueriesLocalStorage
  • 50. Web as platform
  • 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. Trick Question
  • 53. “The future is already here, itsjust not very evenly distributed” - William Gibson
  • 54. Boot to Gecko http://www.youtube.com/watch?v=OAaH5vikEOM
  • 55. http://www.tuaw.com/2012/05/01/financial-times-to-discontinue-ipad-iphone-apps-move-to-html5
  • 56. Responsive Web Design• Maintainable• one web• multi-device solution
  • 57. Web Apps• Will soon do anything native apps do
  • 58. Question yourassumptions about “mobile”

×