Mobile or immobile? (responsive design, cookies and kiosks) html5css3
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,205 views

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

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.

Statistics

Views

Total Views
1,205
Views on SlideShare
1,183
Embed Views
22

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 22

http://home.ubalt.edu 17
http://www.linkedin.com 3
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Mobile orimmobile?(responsive design, cookies and kiosks)HTML5 and CSS3: Ready for Prime Time?,An Amigos Online Conference,8 February, 2013Bill Helman,Integrated Digital Services Librarian,University of Baltimore Langsdale Librarytwitter.com/thinkpolslideshare.net/whelman photo by flicker user His Sad Shadow
  • What to expect in the next hour or so1. 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 wild2. Background on the user centered design approach we took3. Why we went with an HTML5 framework (and some of the other choices for whats under the hood)4. Well take a look at the responsive site that the backbone of the kiosk5. The devilish trickery we used to immobilize our mobile site6. 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 shouldnt. 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 anexisting problem? photo by flicker user yelllowcloud
  • Does this solution make sense for thedevice they are using? photo by flicker user yelllowcloud
  • Do user needs assessmenton 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 onlinedocumentation, feel like an expert.
  • Besides a jQM framework, what else isunder the hood?
  • JavaScript and JSON
  • JavaScript and JSON... along withColdFusion,
  • JavaScript and JSON... along withColdFusion, XML
  • JavaScript and JSON... along withColdFusion, XML and the ALEPH api
  • photo by flicker user Nels_P_Olsen
  • Resources we used and our codeAll our code is belong to you: github.com/whelmanHead first html5 programing. http://www.worldcat.org/oclc/706018590Head first mobile web. http://www.worldcat.org/oclc/744291335Gamestorming: A playbook for innovators, rulebreakers,and changemakers. http://www.worldcat.org/oclc/471816034jQuery Mobile: http://jquerymobile.com (this is an awesomesite to get you up and running)
  • Thank you.Find this presentation at: slideshare.net/whelmanWilliam Helman twitter.com/thinkpol http://whelman.com