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