• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
UX & Responsive Design

UX & Responsive Design



At UXCamp DC, January 5, 2013.

At UXCamp DC, January 5, 2013.



Total Views
Views on SlideShare
Embed Views



17 Embeds 1,597

http://womentalkdesign.com 1238
http://www.womentalkdesign.com 110
http://lanyrd.com 79
http://www.scoop.it 64
http://articulategeek.tumblr.com 49
https://twitter.com 25
http://ec2-54-242-168-170.compute-1.amazonaws.com 9
http://womentalkdesign.zippysites.com 9
http://www.linkedin.com 3
http://feeds.feedburner.com 2
http://www.clarissapeterson.com 2
http://www.tumblr.com 2
http://kred.com 1
http://pinterest.com 1
https://www.google.ca 1
https://www.google.com 1
https://www.rebelmouse.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Ok yes http://giaunhanh.mobi
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    UX & Responsive Design UX & Responsive Design Presentation Transcript

    • UX & Responsive DesignOptimizing User Experience Across DevicesUXCamp DC -- January 5, 2013 Clarissa Peterson clarissapeterson.com @clarissa
    • "So you’re 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://flic.kr/p/cfQwL7
    • Responsive Design
    • How It Works(but words don’t 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 that’snot 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.Don’t arbitrarily lock people out becauseof browser, device or configuration. - Brad Frost @brad_frost
    • Access
    • http://www.unheap.com/
    • Future-Friendly
    • Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
    • Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7
    • Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj
    • Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.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://flic.kr/p/5c4Sfv
    • Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
    • Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
    • Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
    • Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
    • Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
    • Photo credit: Matt Hamm via Creative Commons http://flic.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://flic.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