mobile ux: responsive design & tips - internet librarian 2012

15
Responsive, user driven, mobile. Internet Librarian, Monterey, CA 23 October, 2012 Bill Helman and Juan-Francisco Reyes, University of Baltimore Langsdale Library twitter.com/pacoreyes http://xentido.com

Upload: juan-francisco-reyes

Post on 01-Nov-2014

614 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Responsive, user driven, mobile.

Internet Librarian, Monterey, CA 23 October, 2012

Bill Helman and Juan-Francisco Reyes, University of Baltimore Langsdale

Library twitter.com/pacoreyes

http://xentido.com

Page 2: Mobile UX: Responsive Design & Tips - Internet librarian 2012

What to expect in the next 25 minutes

1.  Introduction (this slide)

2.  User Centered Design philosophy (the next few slides)

3.  Technologies and methods (what's under the hood)

4.  Responsive design in practice (screen size matters)

5.  Resources (our code on GitHub along with book and link suggestions)

photo by flicker user leynik

Page 3: Mobile UX: Responsive Design & Tips - Internet librarian 2012

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

photo by flicker user statelibrarynsw

Page 4: Mobile UX: Responsive Design & Tips - Internet librarian 2012

One-size-fits-all does not make sense for mobile.

photo by flicker user jdhancock

Page 5: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Your community is like a snowflake. Treat it that way.

photo by flicker user elifayse

Page 6: Mobile UX: Responsive Design & Tips - Internet librarian 2012

1. How does this solve a problem my users are having? 2. Does this solution makes sense in a mobile context?

photo by flicker user elifayse

Page 7: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Do user needs assessment on the cheap.

•  Observations of users in the wild

•  Whiteboard survey questions

•  Focus groups and gamestorming

photo by flicker user elifayse

Page 8: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Gamestorming: design the box

Page 9: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Learn new skills and put them, immediately, into practice

Page 10: Mobile UX: Responsive Design & Tips - Internet librarian 2012

A list of common ingredients:

•  jQuery Mobile •  HTML5 •  CSS3 •  JavaScript •  JSON

•  ColdFusion •  XML •  Aleph

Page 11: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Book locator: translating shelves into pixels

Page 12: Mobile UX: Responsive Design & Tips - Internet librarian 2012

One response to panic screamsscreens

Page 13: Mobile UX: Responsive Design & Tips - Internet librarian 2012

now test and adjust (then repeat)

Page 14: Mobile UX: Responsive Design & Tips - Internet librarian 2012

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

Gamestorming: A playbook for innovators, rulebreakers,

and changemakers. http://www.worldcat.org/oclc/471816034

Head first mobile web.

http://www.worldcat.org/oclc/744291335

jQuery Mobile: http://jquerymobile.com/test/ (this is an awesome site to get you up and running)

Page 15: Mobile UX: Responsive Design & Tips - Internet librarian 2012

Contact us and keep the conversation going.

William Helman twitter.com/thinkpol http://whelman.com

Juan Francisco Reyes twitter.com/pacoreyes http://xentido.com

Find this presentation at: slideshare.net/whelman