mobile or immobile? (responsive design, cookies and kiosks) html5css3
Post on 18-Oct-2014
1.204 views
DESCRIPTION
When recently tasked with simultaneously developing both mobile web and iPad kiosk interfaces we turned to responsive design, jQuery Mobile and some javascript trickery to make one web app both mobile and immobile. This session will talk about some of the user driven design process we used, the flexibility of jQM and how we used the canvas tag to power our book locator.TRANSCRIPT
![Page 1: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/1.jpg)
Mobile or immobile?
HTML5 and CSS3: Ready for Prime Time?,An Amigos Online Conference,8 February, 2013
Bill Helman,Integrated Digital Services Librarian,University of Baltimore Langsdale Librarytwitter.com/thinkpolslideshare.net/whelman
(responsive design, cookies and kiosks)
photo by flicker user His Sad Shadow
![Page 2: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/2.jpg)
What to expect in the next hour or so
1. An introduction (this slide), followed by a little bit about the people involved in the kiosk project, and a look at the kiosks in the wild
2. Background on the user centered design approach we took
3. Why we went with an HTML5 framework (and some of the other choices for what's under the hood)
4. We'll take a look at the responsive site that the backbone of the kiosk
5. The devilish trickery we used to immobilize our mobile site
6. Take a look at some code and share our link to it on GitHub
photo by flicker user leynik
![Page 3: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/3.jpg)
(me, Margo Kabel and Juan Francisco Reyes)
![Page 4: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/4.jpg)
![Page 5: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/5.jpg)
![Page 6: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/6.jpg)
Can you build us a mobile... "something?"
photo by flicker user statelibrarynsw
![Page 7: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/7.jpg)
Stormtroopers all look, and act, the same. Mobile websites shouldn't.
photo by flicker user jdhancock
![Page 8: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/8.jpg)
Your users are unique snowflakes. Take some time to get to know them.
photo by flicker user yelllowcloud
![Page 9: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/9.jpg)
How will this new feature solve an existing problem?
photo by flicker user yelllowcloud
![Page 10: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/10.jpg)
Does this solution make sense for the device they are using?
photo by flicker user yelllowcloud
![Page 11: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/11.jpg)
Do user needs assessment on the cheep cheap.
photo by flicker user reubeninstt
![Page 12: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/12.jpg)
Focus groups:use a student and run them for free!*
photo by flicker user usaghumphreys
![Page 13: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/13.jpg)
Gamestorming: design the box
![Page 14: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/14.jpg)
Whiteboards: conduct polls in real time
![Page 15: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/15.jpg)
Frameworks: read some online documentation, feel like an expert.
![Page 16: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/16.jpg)
Besides a jQM framework, what else is under the hood?
![Page 17: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/17.jpg)
JavaScript and JSON
![Page 18: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/18.jpg)
JavaScript and JSON... along with ColdFusion,
![Page 19: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/19.jpg)
JavaScript and JSON... along with ColdFusion, XML
![Page 20: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/20.jpg)
JavaScript and JSON... along with ColdFusion, XML and the ALEPH api
![Page 21: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/21.jpg)
photo by flicker user Nels_P_Olsen
![Page 22: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/22.jpg)
![Page 23: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/23.jpg)
![Page 24: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/24.jpg)
![Page 25: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/25.jpg)
![Page 26: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/26.jpg)
![Page 27: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/27.jpg)
![Page 28: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/28.jpg)
![Page 29: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/29.jpg)
Resources we used and our code
All our code is belong to you: github.com/whelman
Head first html5 programing. http://www.worldcat.org/oclc/706018590
Head first mobile web. http://www.worldcat.org/oclc/744291335
Gamestorming: A playbook for innovators, rulebreakers, and changemakers. http://www.worldcat.org/oclc/471816034
jQuery Mobile: http://jquerymobile.com (this is an awesome site to get you up and running)
![Page 30: Mobile or immobile? (responsive design, cookies and kiosks) html5css3](https://reader034.vdocuments.mx/reader034/viewer/2022051816/5442696eafaf9fef098b463c/html5/thumbnails/30.jpg)
Thank you.
William Helmantwitter.com/thinkpolhttp://whelman.com
Find this presentation at: slideshare.net/whelman