Responsive Web Design

A8dce9db2fc97b2f7ff5b323cf036fa7?s=47 webmn
April 24, 2012

Responsive Web Design

A talk about Responsive Web Design given by Juliano Moreira Dasilva at the Minneapolis Community and Technical College.

A8dce9db2fc97b2f7ff5b323cf036fa7?s=128

webmn

April 24, 2012
Tweet

Transcript

  1. RESPONSIVE WEB DESIGN By Juliano  Moreira  Dasilva Tuesday, April 24,

    12
  2. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! Tuesday, April 24,

    12
  3. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM Tuesday, April

    24, 12
  4. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  5. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  6. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  7. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  8. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  9. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  10. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  11. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  12. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Who Am I?!?! JULIANOMOREIRA.COM I WORK

    FOR DOT COM Tuesday, April 24, 12
  13. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Tuesday, April 24, 12

  14. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN What we’re going to talk about

    today Tuesday, April 24, 12
  15. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN What we’re going to talk about

    today The  Flexible  Grid  (bye  bye  pixels) Flexible  Images Becoming  Responsive Catering  to  “Awesome”  (IE<=8)   Browsers Tuesday, April 24, 12
  16. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN — John Allsopp April, 7, 2000

    “As  web  designers  we  need  to  rethink  this  role,  to   abandon  control,  and  seek  a  new  relationship  with   the  page.  As  designers  we  9ind  ourselves   constraining  pages  as  they  were  made  out  of   paper.  This  conservatism  is  natural,  “closely  held   beliefs  are  not  easily  released”,  but  it  is  time  to   move  on,  to  embrace  the  web  as  its  own  medium.   It’s  time  to  throw  out  the  rituals  of  the  printed   page,  and  to  engage  the  medium  of  the  web  and  its   own  nature. Tuesday, April 24, 12
  17. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Before we dig in... Tuesday, April

    24, 12
  18. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” Before we dig in... Tuesday, April 24, 12
  19. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” 1.3  million  touch  phones  sold  per  day  in  2009 Before we dig in... Tuesday, April 24, 12
  20. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” 1.3  million  touch  phones  sold  per  day  in  2009 100  thousand  android  phones  activated  per  day Before we dig in... Tuesday, April 24, 12
  21. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” 1.3  million  touch  phones  sold  per  day  in  2009 100  thousand  android  phones  activated  per  day Apple  sells  97  thousand  iPhones  per  day Before we dig in... Tuesday, April 24, 12
  22. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” 1.3  million  touch  phones  sold  per  day  in  2009 100  thousand  android  phones  activated  per  day Apple  sells  97  thousand  iPhones  per  day 40  thousand  iPads  sold  per  day Before we dig in... Tuesday, April 24, 12
  23. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” 1.3  million  touch  phones  sold  per  day  in  2009 100  thousand  android  phones  activated  per  day Apple  sells  97  thousand  iPhones  per  day 40  thousand  iPads  sold  per  day 100  thousand  Blackberry  6.0  sold  per  day Before we dig in... Tuesday, April 24, 12
  24. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “Mobile  is  growing  outrageously.  Mobile  web

     is   growing  at  least  8x  faster  than  desktop  web.” 1.3  million  touch  phones  sold  per  day  in  2009 100  thousand  android  phones  activated  per  day Apple  sells  97  thousand  iPhones  per  day 40  thousand  iPads  sold  per  day 100  thousand  Blackberry  6.0  sold  per  day Between  these  three  devices,  there  are  over  300   thousand  touch  devices  sold  per  day Before we dig in... Tuesday, April 24, 12
  25. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Before we dig in... Tuesday, April

    24, 12
  26. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Before we dig in... Heavy  mobile

     data  will  reach  1  billion  users   within  the  next  two  years  (outpace) Tuesday, April 24, 12
  27. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Before we dig in... Heavy  mobile

     data  will  reach  1  billion  users   within  the  next  two  years  (outpace) ATT  mobile  data  trafXic  in  the  past  3  years  has   increased  50  times Tuesday, April 24, 12
  28. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Before we dig in... Heavy  mobile

     data  will  reach  1  billion  users   within  the  next  two  years  (outpace) ATT  mobile  data  trafXic  in  the  past  3  years  has   increased  50  times Study  done  by  cisco  says  that  iPhone  uses  30   times  as  much  mobile  trafXic  as  feature  mobile   user Tuesday, April 24, 12
  29. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Before we dig in... Heavy  mobile

     data  will  reach  1  billion  users   within  the  next  two  years  (outpace) ATT  mobile  data  trafXic  in  the  past  3  years  has   increased  50  times Study  done  by  cisco  says  that  iPhone  uses  30   times  as  much  mobile  trafXic  as  feature  mobile   user Smartphones  are  projected  to  pass  PC's  in  sales   by  next  year.  Huge  booming  opportunity Tuesday, April 24, 12
  30. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN What does it take to build

    a responsive design? Tuesday, April 24, 12
  31. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN What does it take to build

    a responsive design? A  Xlexible,  grid-­‐based  layout Tuesday, April 24, 12
  32. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN What does it take to build

    a responsive design? A  Xlexible,  grid-­‐based  layout Flexible  images  and  media Tuesday, April 24, 12
  33. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN What does it take to build

    a responsive design? A  Xlexible,  grid-­‐based  layout Flexible  images  and  media Media  queries Tuesday, April 24, 12
  34. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN The Flexible Grid Tuesday, April 24,

    12
  35. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN The Flexible Grid No  more  pixels,

     relative  unit  (em)   instead Tuesday, April 24, 12
  36. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN The Flexible Grid No  more  pixels,

     relative  unit  (em)   instead Formula  (target  /  context  =  result) Tuesday, April 24, 12
  37. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “However,  media  queries  alone  do  not

     a   responsive  design  make.  A  truly  responsive   design  begins  with  a  9lexible  layout,  with   media  queries  layered  upon  that  non-­‐9ixed   foundation.” — Ethan Marcotte Tuesday, April 24, 12
  38. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN “As  it  turned  out,  making  the

     layout  work  on  a   variety  of  devices  was  just  a  matter  of  adding   a  few  CSS  media  queries  to  the  9inished   product.  The  key  to  making  it  easy  was  that   the  layout  was  already  liquid,  so  optimizing  it   for  small  screens  meant  collapsing  a  few   margins  to  maximize  space  and  tweaking  the   sidebar  layout  in  the  cases  where  the  screen  is   too  narrow  to  show  two  columns.” — 37signals Tuesday, April 24, 12
  39. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Minnesota Web Design Grid based layout

    Tuesday, April 24, 12
  40. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Tuesday, April 24, 12

  41. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Tuesday, April 24, 12

  42. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Tuesday, April 24, 12

  43. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Are you ready to have some

    fun? Let’s  do  this!!! Tuesday, April 24, 12
  44. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN 970 Grid Tuesday, April 24, 12

  45. Fixed to Flexible Container Tuesday, April 24, 12

  46. Fixed to Flexible Container #container {width:970px;} Tuesday, April 24, 12

  47. Fixed to Flexible Container #container {width:970px;} container / body font-size

    = result Tuesday, April 24, 12
  48. Fixed to Flexible Container 970 / 16 = 60.625em #container

    {width:970px;} container / body font-size = result Tuesday, April 24, 12
  49. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN The Powerful Formula Tuesday, April 24,

    12
  50. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN The Powerful Formula Target / Context

    = Result Tuesday, April 24, 12
  51. The Powerful Formula Tuesday, April 24, 12

  52. The Powerful Formula 642px Tuesday, April 24, 12

  53. The Powerful Formula 642px Target / Context = Result Tuesday,

    April 24, 12
  54. The Powerful Formula 642  /  970  =  66.18556% 642px Target

    / Context = Result Tuesday, April 24, 12
  55. The Powerful Formula Tuesday, April 24, 12

  56. The Powerful Formula 315px Tuesday, April 24, 12

  57. The Powerful Formula 315px Target / Context = Result Tuesday,

    April 24, 12
  58. The Powerful Formula 315  /  970  =  32.47422% 315px Target

    / Context = Result Tuesday, April 24, 12
  59. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN 1280x1024 1024x1024 768x1024 Tuesday, April 24,

    12
  60. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Flexible Images Tuesday, April 24, 12

  61. The problem Tuesday, April 24, 12

  62. The problem <img src="snacks.jpg" width="1200" height="805" /> Tuesday, April 24,

    12
  63. The problem <img src="snacks.jpg" width="1200" height="805" /> Tuesday, April 24,

    12
  64. The solution Tuesday, April 24, 12

  65. The solution <img src="snacks.jpg" /> Tuesday, April 24, 12

  66. The solution img, embed, object, video {max-width: 100%;} <img src="snacks.jpg"

    /> Tuesday, April 24, 12
  67. The solution img, embed, object, video {max-width: 100%;} <img src="snacks.jpg"

    /> Tuesday, April 24, 12
  68. The solution img, embed, object, video {max-width: 100%;} <img src="snacks.jpg"

    /> Tuesday, April 24, 12
  69. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Media Queries Tuesday, April 24, 12

  70. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Viewport Tuesday, April 24, 12

  71. Viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Tuesday, April 24, 12

  72. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Tuesday, April 24, 12

  73. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Media Queries for different resolution @media

    screen and (max-width: 768px){ ! header[role="main-header"] { ! ! padding: 1em; ! } } @media screen and (max-width: 600px) { ! body { ! ! padding: 1em; ! } } @media screen and (max-width: 520px), screen and (max-width: 480px){ ! div[role="logo"] { ! ! float: none; ! ! width: auto; ! } } @media screen and (max-width: 320px) { ! div[role="venue"] .location! { ! ! float: none; ! ! width: auto; ! ! padding: 0; ! } ! div[role="venue"] .venue-image { ! ! float: none; ! ! width: 75%; ! ! margin: 0 auto; ! } ! div[role="speakers"] .speaker { ! ! min-height: 14.285em; /*200*/ ! } } Tuesday, April 24, 12
  74. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Desktop (1280x1024) iPad iPhone Tuesday, April

    24, 12
  75. JULIANOMOREIRA.COM RESPONSIVE +WEB+ DESIGN Thank you... Tuesday, April 24, 12