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

UX & Responsive Design

on

  • 10,536 views

At UXCamp DC, January 5, 2013.

At UXCamp DC, January 5, 2013.

Statistics

Views

Total Views
10,536
Views on SlideShare
8,939
Embed Views
1,597

Actions

Likes
39
Downloads
165
Comments
1

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

Accessibility

Categories

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.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Ok yes http://giaunhanh.mobi
    Are you sure you want to
    Your message goes here
    Processing…
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