Mobile or immobile? (responsive design, cookies and kiosks) html5css3

Post on 18-Oct-2014

1.201 views 2 download

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 of Mobile or immobile? (responsive design, cookies and kiosks) html5css3

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

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

(me, Margo Kabel and Juan Francisco Reyes)

Can you build us a mobile... "something?"

photo by flicker user statelibrarynsw

Stormtroopers all look, and act, the same. Mobile websites shouldn't.

photo by flicker user jdhancock

Your users are unique snowflakes. Take some time to get to know them.

photo by flicker user yelllowcloud

How will this new feature solve an existing problem?

photo by flicker user yelllowcloud

Does this solution make sense for the device they are using?

photo by flicker user yelllowcloud

Do user needs assessment on the cheep cheap.

photo by flicker user reubeninstt

Focus groups:use a student and run them for free!*

photo by flicker user usaghumphreys

Gamestorming: design the box

Whiteboards: conduct polls in real time

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

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

JavaScript and JSON

JavaScript and JSON... along with ColdFusion,

JavaScript and JSON... along with ColdFusion, XML

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

photo by flicker user Nels_P_Olsen

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)

Thank you.

William Helmantwitter.com/thinkpolhttp://whelman.com

Find this presentation at: slideshare.net/whelman