Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Introduction to Responsive & Adaptive Web Design

Ben Callahan
January 16, 2012

An Introduction to Responsive & Adaptive Web Design

My presentation from CodeMash 2012 on responsive web design. The code examples are here (https://github.com/sparkbox/CodeMash-RWD).

Ben Callahan

January 16, 2012
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. This is a paradigm shift. “...scientific advancement is not evolutionary,

    but rather is a series of peaceful interludes punctuated by intellectually violent revolutions, and in those revolutions one conceptual world is replaced by another...” Thomas Kuhn 4 Monday, January 16, 2012
  2. This is a paradigm shift. Over 60% of new handset

    sales are smartphones. 8 Monday, January 16, 2012
  3. This is a paradigm shift. Apple sold around 13 million

    iPads in Q4 of 2011. 9 Monday, January 16, 2012
  4. This is a paradigm shift. Amazon sold over 4 million

    Kindle Fires in December of 2011. 10 Monday, January 16, 2012
  5. Flexibility is the new norm. Mobile internet usage is predicted

    to overtake desktop in the next two years. 12 Monday, January 16, 2012
  6. Flexibility is the new norm. People are trying to browse

    your websites on these devices, today. 13 Monday, January 16, 2012
  7. Responsive Web Design Ethan Marcotte • article on alistapart.com •

    book via A Book Apart 14 Monday, January 16, 2012
  8. Responsive Web Design • A flexible foundation (fluid grid) •

    Flexible content (images, video, etc.) • Media queries https://github.com/sparkbox/CodeMash-RWD 16 Monday, January 16, 2012
  9. A Flexible Foundation <div class=”span-1”> <!-- one column --> </div>

    <div class=”span-2”> <!-- two columns --> </div> <div class=”span-3”> <!-- three columns --> </div> 18 Monday, January 16, 2012
  10. A Flexible Foundation Open up cm-1.html The CSS is all

    in the <head> of the example files. 19 Monday, January 16, 2012
  11. A Flexible Foundation .span-1, .span-2, .span-3 { margin-right: 10px; }

    .span-1, .span-2, .span-3 { margin-right: /* ??% */ } Fixed-Width Fluid 20 Monday, January 16, 2012
  12. A Flexible Foundation .span-1, .span-2, .span-3 { margin-right: 10px; }

    .span-1, .span-2, .span-3 { margin-right: 3.33333%; } Fixed-Width Fluid 10 / 300 = .0333 21 Monday, January 16, 2012
  13. A Flexible Foundation Turn the 300px 3-column grid into a

    fluid grid. cm-1.html 22 Monday, January 16, 2012
  14. A Flexible Foundation .span-1, .span-2, .span-3 { margin-right: 10px; }

    .span-1, .span-2, .span-3 { margin-right: 3%; } Fixed-Width Fluid 9 / 300 = .03 23 Monday, January 16, 2012
  15. A Flexible Foundation There are links to more resources on

    this in the readme file. 25 Monday, January 16, 2012
  16. Flexible Content http://www.netmagazine.com/tutorials/create-fluid-width-videos • set width to 100%, remove height

    • add a wrapper to maintain aspect ratio • use JS to detect and maintain size 29 Monday, January 16, 2012
  17. Media Queries • width, height • device-width, device-height • orientation

    • aspect ratio • several others http://www.w3.org/TR/css3-mediaqueries/ 30 Monday, January 16, 2012
  18. Media Queries @media only screen and (min-width: 600px) { /*

    styles for 600px and up here */ } @media only screen and (max-width: 600px) { /* styles for 600px and down here */ } 31 Monday, January 16, 2012
  19. Media Queries /* Large Resolution First CSS File Structure */

    /* large resolution layouts here */ @media only screen and (max-width: 850px) { /* styles for 850px and down here */ } @media only screen and (max-width: 450px) { /* styles for 450px and down here */ } 32 Monday, January 16, 2012
  20. Media Queries /* Small Resolution First CSS File Structure */

    /* smallest resolution layouts here */ @media only screen and (min-width: 450px) { /* styles for 450px and up here */ } @media only screen and (min-width: 850px) { /* styles for 850px and up here */ } 33 Monday, January 16, 2012
  21. Media Queries Large Resolution First PRO: IE support by default

    CON: Smallest devices load all assets Small Resolution First PRO: More logical (build up vs tear down) CON: IE support is tricky 34 Monday, January 16, 2012
  22. Media Queries Large Resolution First PRO: IE support by default

    CON: Smallest devices load all assets Small Resolution First PRO: More logical (build up vs tear down) CON: IE support is tricky 35 Monday, January 16, 2012
  23. How We Do It Use a fluid grid. Keep your

    eye on the image issue. Mobile first CSS. Test on actual devices. 36 Monday, January 16, 2012
  24. Major Challenges • Images • Ads • Big Tables •

    Complex Navigation • Process 37 Monday, January 16, 2012
  25. Challenge: Images JavaScript Device Detection Resize Service Headers New <img>

    tag New format There are quite a few potential solutions 39 Monday, January 16, 2012
  26. Challenge: Images JavaScript Device Detection Resize Service Headers New <img>

    tag New format <img src="tiny.jpg"> <source src="bigger.jpg" media="min-width:600px"> <source src="biggest.jpg" media="min-width:900px"> </img> 40 Monday, January 16, 2012
  27. Challenge: Images Join in the conversation: @grigs, @scottjehl, @beep, @yoavweiss,

    @robertnyman, @necolas http://cloudfour.com/responsive-imgs/ 41 Monday, January 16, 2012
  28. Challenge: Ads Ads are sold based on size and position,

    which is dynamic in responsive web design. 42 Monday, January 16, 2012
  29. Challenge: Ads Boston Globe Mark Boulton • Use JavaScript to

    reposition • Fixed-width and centered • Clipped at some resolutions 43 Monday, January 16, 2012
  30. Challenge: Ads Boston Globe Mark Boulton Mark wrote a solid

    summary of the major issues he’s facing while working on this. (Google “responsive advertising”) 44 Monday, January 16, 2012
  31. Challenge: Big Tables Tables with large amounts of data become

    unmanageable at smaller resolutions. 45 Monday, January 16, 2012
  32. Challenge: Big Tables Switch Orientation Hide Columns Visualize Chris Coyer

    originally suggested that we use some CSS to change the orientation. 46 Monday, January 16, 2012
  33. Challenge: Big Tables Switch Orientation Hide Columns Visualize Use CSS

    to hide specific columns at certain resolutions. 47 Monday, January 16, 2012
  34. Challenge: Big Tables Switch Orientation Hide Columns Visualize We could

    replace the table of data with a chart that provides a summary. 48 Monday, January 16, 2012
  35. Challenge: Complex Navigation Large navigations are challenging to build and

    use on small and mid- sized devices. 49 Monday, January 16, 2012
  36. Challenge: Process Design deliverables become very difficult to define when

    so many resolutions are supported. 50 Monday, January 16, 2012
  37. Thanks. Ben Callahan President of Sparkbox @bencallahan http://seesparkbox.com I’ll be

    publishing this presentation soon. Follow me on Twitter for more info. 52 Monday, January 16, 2012
  38. And, finally... Ben Callahan President of Sparkbox @bencallahan http://seesparkbox.com Responsive

    web design is always the right decision, but it’s not always the only decision. (a bit of controversy to discuss instead of questions...) 53 Monday, January 16, 2012