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

30
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 Library twitter.com/thinkpol slideshare.net/whelman (responsive design, cookies and kiosks) photo by flicker user His Sad Shadow
  • date post

    18-Oct-2014
  • Category

    Education

  • view

    1.201
  • download

    2

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

Page 1: 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

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

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

(me, Margo Kabel and Juan Francisco Reyes)

Page 4: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 5: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 6: Mobile or immobile? (responsive design, cookies and kiosks) html5css3

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

photo by flicker user statelibrarynsw

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

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

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

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

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

Do user needs assessment on the cheep cheap.

photo by flicker user reubeninstt

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

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

Gamestorming: design the box

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

Whiteboards: conduct polls in real time

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

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

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

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

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

JavaScript and JSON

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

JavaScript and JSON... along with ColdFusion,

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

JavaScript and JSON... along with ColdFusion, XML

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

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

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

photo by flicker user Nels_P_Olsen

Page 22: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 23: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 24: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 25: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 26: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 27: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 28: Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Page 29: Mobile or immobile? (responsive design, cookies and kiosks) html5css3

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

Thank you.

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

Find this presentation at: slideshare.net/whelman