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.

1. Mobile or
immobile?
(responsive design, cookies and kiosks)
HTML5 and CSS3: Ready for Prime Time?,
An Amigos Online Conference,
8 February, 2013
Bill Helman,
Integrated Digital Services Librarian,
University of Baltimore Langsdale Library
twitter.com/thinkpol
slideshare.net/whelman
photo by flicker user His Sad Shadow

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

3. (me, Margo Kabel and Juan Francisco Reyes)

6. Can you build us a mobile...
"something?"
photo by flicker user statelibrarynsw

7. Stormtroopers all look, and act, the same.
Mobile websites shouldn't.
photo by flicker user jdhancock

8. Your users are unique snowflakes.
Take some time to get to know them.
photo by flicker user yelllowcloud

9. How will this new feature solve an
existing problem?
photo by flicker user yelllowcloud

10. Does this solution make sense for the
device they are using?
photo by flicker user yelllowcloud

11. Do user needs assessment
on the cheep cheap.
photo by flicker user reubeninstt

12. Focus groups:
use a student and run them for free!*
photo by flicker user usaghumphreys

13. Gamestorming: design the box

14. Whiteboards: conduct polls in real time

15. Frameworks: read some online
documentation, feel like an expert.

16. Besides a jQM framework, what else is
under the hood?

17. JavaScript and JSON

18. JavaScript and JSON... along with
ColdFusion,

19. JavaScript and JSON... along with
ColdFusion, XML

20. JavaScript and JSON... along with
ColdFusion, XML and the ALEPH api

21. photo by flicker user Nels_P_Olsen

29. 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)

30. Thank you.
Find this presentation at: slideshare.net/whelman
William Helman
twitter.com/thinkpol
http://whelman.com