ux & responsive design

Download UX & Responsive Design

Post on 17-Aug-2014




0 download

Embed Size (px)


At UXCamp DC, January 5, 2013.


  • UX & Responsive DesignOptimizing User Experience Across DevicesUXCamp DC -- January 5, 2013 Clarissa Peterson clarissapeterson.com @clarissa
  • "So youre going to make websiteswork better on mobile phones?Because right now they mostly all suck." - my friend whos not a web designer
  • You have some options:
  • Fixed-width Site
  • Separate Mobile Site
  • One Website
  • History
  • Photo credit: Brad Frost via Creative Commons http://ic.kr/p/cfQwL7
  • Responsive Design
  • How It Works(but words dont mean much)
  • two things:
  • Flexible
  • Adjustable
  • http://www.unitedpixelworkers.com/
  • http://www.unitedpixelworkers.com/
  • http://www.unitedpixelworkers.com/
  • http://www.unitedpixelworkers.com/
  • http://www.unitedpixelworkers.com/
  • Why?
  • 85% of American adultsown a cell phonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • 45% of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • 40% have a cell phone thatsnot a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • 17%do most of their online browsing on their phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • But most of them also have a desktop or laptop.
  • Content Parity
  • The beauty of the web is its openness.Dont arbitrarily lock people out becauseof browser, device or conguration. - Brad Frost @brad_frost
  • Access
  • http://www.unheap.com/
  • Future-Friendly
  • Illustration credit: Anna Debenham via Creative Commons http://ic.kr/p/dtMQTL
  • Photo Credit: Rafel Miro via Creative Commons http://ic.kr/p/8KSGt7
  • Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://ic.kr/p/dpGnUj
  • Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://ic.kr/p/4nGFUd
  • The best way to be future friendly is to bebackwards-compatible. - Jeremy Keith @adactio
  • Context of Use
  • Photo credit: Kai Chan Vong via Creative Commons http://ic.kr/p/5c4Sfv
  • Photo credit: Mith Huang via Creative Commons http://ic.kr/p/9B7A4c
  • Photo credit: Carlos Smith via Creative Commons http://ic.kr/p/8tLb4P
  • Photo credit: Pete Markham via Creative Commons http://ic.kr/p/2zvrrJ
  • Photo credit: Wendi Dunlap via Creative Commons http://ic.kr/p/vMJM6
  • Photo credit: Channy Yun via Creative Commons http://ic.kr/p/51QJr6
  • Photo credit: Matt Hamm via Creative Commons http://ic.kr/p/EyrLG
  • Small-Screen First
  • Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger
  • Design Process
  • Start with content.
  • DesignDevelop
  • Prototyping
  • Illustration credit: podluzny via Creative Commons http://ic.kr/p/cJJdzm
  • Frameworks
  • http://foundation.zurb.com/
  • http://foundation.zurb.com/
  • http://foundation.zurb.com/prototype-example2.php
  • http://foundation.zurb.com/docs/forms.php
  • http://foundation.zurb.com/docs/buttons.php
  • http://foundation.zurb.com/docs/typography.php
  • Style Tiles
  • Communicate theessence of a visual brand for the web
  • Style Tiles via Creative Commons http://styletil.es/
  • help form acommon visual language between the designers and the stakeholders
  • Style Tiles via Creative Commons http://styletil.es/
  • Testing
  • Touch
  • Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  • "Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." - Dan Willis @uxcrank
  • Give everybody the same content Displayed appropriately for their deviceNo matter what device they have.
  • There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web. - Stephen Hay @stephenhay
  • Fin