ux & responsive design
Post on 17-Aug-2014
10.785 views
Embed Size (px)
DESCRIPTION
At UXCamp DC, January 5, 2013.TRANSCRIPT
- 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