An Introduction to Responsive & Adaptive Web Design

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 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).

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

January 16, 2012
Tweet

Transcript

  1. Hands-On Responsive & Adaptive Web Design https://github.com/sparkbox/CodeMash-RWD 1 Monday, January

    16, 2012
  2. Ben Callahan President of Sparkbox @bencallahan http://seesparkbox.com https://github.com/sparkbox/CodeMash-RWD 2 Monday,

    January 16, 2012
  3. The web is not fixed-width. 3 Monday, January 16, 2012

  4. 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
  5. This is a paradigm shift. ENIAC, 1946 5 Monday, January

    16, 2012
  6. This is a paradigm shift. Micral, 1972 6 Monday, January

    16, 2012
  7. This is a paradigm shift. Ericsson R380, 2000 7 Monday,

    January 16, 2012
  8. This is a paradigm shift. Over 60% of new handset

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

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

    Kindle Fires in December of 2011. 10 Monday, January 16, 2012
  11. Flexibility is the new norm. 11 Monday, January 16, 2012

  12. Flexibility is the new norm. Mobile internet usage is predicted

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

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

    book via A Book Apart 14 Monday, January 16, 2012
  15. Responsive Web Design Ethan Marcotte • stickler on definitions 15

    Monday, January 16, 2012
  16. 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
  17. A Flexible Foundation 17 Monday, January 16, 2012

  18. 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
  19. A Flexible Foundation Open up cm-1.html The CSS is all

    in the <head> of the example files. 19 Monday, January 16, 2012
  20. 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
  21. 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
  22. A Flexible Foundation Turn the 300px 3-column grid into a

    fluid grid. cm-1.html 22 Monday, January 16, 2012
  23. 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
  24. A Flexible Foundation www.semantic.gs with LESS or SASS 24 Monday,

    January 16, 2012
  25. A Flexible Foundation There are links to more resources on

    this in the readme file. 25 Monday, January 16, 2012
  26. Flexible Content 26 Monday, January 16, 2012

  27. Flexible Content img { float: right; max-width: 100%; } 27

    Monday, January 16, 2012
  28. Flexible Content 28 Monday, January 16, 2012

  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. Major Challenges • Images • Ads • Big Tables •

    Complex Navigation • Process 37 Monday, January 16, 2012
  38. Challenge: Images It’s irresponsible to serve large images to small

    screens. 38 Monday, January 16, 2012
  39. 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
  40. 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
  41. Challenge: Images Join in the conversation: @grigs, @scottjehl, @beep, @yoavweiss,

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

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

    reposition • Fixed-width and centered • Clipped at some resolutions 43 Monday, January 16, 2012
  44. 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
  45. Challenge: Big Tables Tables with large amounts of data become

    unmanageable at smaller resolutions. 45 Monday, January 16, 2012
  46. 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
  47. Challenge: Big Tables Switch Orientation Hide Columns Visualize Use CSS

    to hide specific columns at certain resolutions. 47 Monday, January 16, 2012
  48. 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
  49. Challenge: Complex Navigation Large navigations are challenging to build and

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

    so many resolutions are supported. 50 Monday, January 16, 2012
  51. Resources The readme.md file is a list of resources. Check

    it out. 51 Monday, January 16, 2012
  52. 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
  53. 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