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

Responsive Design

on

  • 5,667 views

Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.

Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.

Statistics

Views

Total Views
5,667
Views on SlideShare
4,293
Embed Views
1,374

Actions

Likes
6
Downloads
52
Comments
0

6 Embeds 1,374

http://womentalkdesign.com 1243
http://www.womentalkdesign.com 108
https://twitter.com 12
http://womentalkdesign.zippysites.com 9
https://www.google.ca 1
http://www.clarissapeterson.com 1

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Design Responsive Design Presentation Transcript

    • Responsive DesignLVL Studio UX Soirée at Station CNovember 21, 2012 in Montreal, Quebec Clarissa Peterson @clarissa
    • A Little History
    • Fixed-width Site
    • Separate Mobile Site
    • One Website
    • Before
    • After
    • Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
    • Responsive Web Design
    • Responsive Web Design http://www.abookapart.com/products/responsive-web-design/
    • Responsive web design offers us a wayforward, finally allowing us to “design forthe ebb and flow of things.” - Ethan Marcotte
    • How It Works
    • 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
    • 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
    • #content {! width: 90%;}
    • img {! max-width: 100%;}
    • 1. Flexible Grid2. Flexible Images/Media 3. Media Queries
    • http://www.unitedpixelworkers.com/
    • http://www.unitedpixelworkers.com/
    • http://www.unitedpixelworkers.com/
    • http://www.unitedpixelworkers.com/
    • http://www.unitedpixelworkers.com/
    • http://www.unitedpixelworkers.com/
    • @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
    • @media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}
    • @media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; }}
    • Why?
    • Mobile
    • 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
    • Content Parity
    • www.consumerreports.org/
    • The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or configuration. - Brad Frost @brad_frost
    • http://www.geico.com/
    • 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
    • Responsive Design
    • Context of Use
    • Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
    • Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
    • Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
    • Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
    • Assumptions
    • 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
    • Mobile First
    • Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger
    • Make it work better for everybody.
    • Touchscreen
    • Touch
    • Hover
    • Swipe
    • Navigation
    • Top Navigation
    • http://www.gravitatedesign.com
    • http://www.gravitatedesign.com
    • http://www.tuj.ac.jp/
    • http://www.tuj.ac.jp/
    • Footer Navigation
    • http://contentsmagazine.com/
    • http://contentsmagazine.com/
    • <div id="site-nav"> <form> ... </form>! <nav>! ! <ul class="nav nav-primary">! ! ! <li><a href="#">Archive</a></li>! ! ! <li><a href="#">About</a></li>! ! ! <li><a href="#">Write For Us</a></li>! ! ! <li><a href="#">Subscribe</a></li>! ! !! ! </ul>! </nav></div>
    • @media screen and (min-width: 48em) {! #site-nav {! ! position: absolute;! ! top: -5em;! ! width: 100%;! ! z-index: 5;! }}
    • http://contentsmagazine.com/
    • Toggle Navigation
    • http://starbucks.com/
    • http://starbucks.com/
    • http://starbucks.com/
    • Left Nav Flyout
    • http://www.emerilsrestaurants.com
    • http://www.emerilsrestaurants.com
    • http://www.emerilsrestaurants.com
    • Breakpoints
    • Illustration credit: Ruth Leth Andersen via Creative Commons http://flic.kr/p/bmbZgo
    • Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
    • Design Process
    • 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/
    • http://foundation.zurb.com/
    • http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
    • http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
    • http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/
    • http://foundation.zurb.com/docs/forms.php
    • http://foundation.zurb.com/docs/buttons.php
    • http://foundation.zurb.com/docs/typography.php
    • http://www.getswizzle.com/
    • http://www.getswizzle.com/
    • http://www.getswizzle.com/
    • 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
    • Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
    • Examples
    • http://worldwildlife.org/
    • http://worldwildlife.org/
    • http://worldwildlife.org/
    • http://emerilsrestaurants.com/
    • http://emerilsrestaurants.com/
    • http://emerilsrestaurants.com/
    • http://emerilsrestaurants.com/
    • http://www.oxideinteractive.com.au/
    • http://www.oxideinteractive.com.au/
    • http://www.oxideinteractive.com.au/
    • http://www.wm.edu/
    • http://www.wm.edu/
    • http://www.wm.edu/
    • Responsive Web Design1. Give everybody the same content2. Displayed appropriately for their device3. No 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
    • Resources
    • A Few More Examples of Responsive Design Boston Globe http://www.bostonglobe.com Smashing Magazine http://www.smashingmagazine.com People (mobile site) http://m.people.com Disney http://disney.com/ Mashable (beta) http://beta.mashable.com/ Stuff & Nonsense http://www.stuffandnonsense.co.uk/ Google Nexus http://www.google.com/nexus/ Hotellweb http://www.hotellweb.no/?lang=en_US Andersson-Wise Architects http://www.anderssonwise.comWordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
    • ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/En français: Le Web Design Réactifhttp://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/Presidential Smackdown Edition: Separate Mobile Website Vs.Responsive Website - Brad Frost (Aug. 2012)http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
    • Prototyping & Design ProcessDive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/Design Process In The Responsive Age (Drew Clemons) - May 2012http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Responsive Web Design Sketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsStyle Tileshttp://styletil.es/
    • FrameworksWhich Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained(Joshua Johnson) - August 2012http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
    • NavigationResponsive Navigation Patterns (Brad Frost) - February 2012http://bradfrostweb.com/blog/web/responsive-nav-patterns/Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -October 2012http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/10 Responsive Navigation Solutions and Tutorials - August 2012http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
    • Other Websites & Misc.@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking things that are future-friendlyhttp://futurefriend.ly/Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/
    • BooksResponsive Web DesignEthan Marcotte (2011)http://www.abookapart.com/products/responsive-web-design/En françaishttp://www.editions-eyrolles.com/Livre/9782212133318/responsive-web-designMobile FirstLuke Wroblewski (2011)http://www.abookapart.com/products/mobile-firstEn françaishttp://www.editions-eyrolles.com/Livre/9782212134063/mobile-first
    • Thanks!Clarissa Peterson clarissapeterson.commail@clarissapeterson.com @clarissa