Designing Responsive Websites

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=47 Clarissa Peterson
September 03, 2014

Designing Responsive Websites

Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.

Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

September 03, 2014
Tweet

Transcript

  1. Designing Responsive Websites Clarissa Peterson @clarissa

  2. http://www.oliverharvey.co.uk/

  3. http://www.oliverharvey.co.uk/

  4. http://www.linksture.com/

  5. http://www.linksture.com/

  6. http://skinnyties.com/

  7. http://skinnyties.com/

  8. Flexible https://flic.kr/p/jXxfeF

  9. None
  10. None
  11. None
  12. None
  13. #content { width: 90%; }

  14. Adjustable https://flic.kr/p/j9KrpA

  15. http://www.unitedpixelworkers.com/

  16. http://www.unitedpixelworkers.com/

  17. http://www.unitedpixelworkers.com/

  18. http://www.unitedpixelworkers.com/

  19. http://www.unitedpixelworkers.com/

  20. article { width: 92%; } @media only screen and (min-width:40em)

    { article { width: 70%; float: left; }
  21. None
  22. None
  23. None
  24. None
  25. None
  26. https://flic.kr/p/ca1kU

  27. https://flic.kr/p/cfQwL7

  28. Design Process https://flic.kr/p/bSHvgv

  29. https://flic.kr/p/35Ahx

  30. Design Develop

  31. Design Develop

  32. https://flic.kr/p/rZVTg

  33. “It's not like our industry nailed web design before we

    started doing responsive design. It's still a work in progress.” - Dan Willis @uxcrank
  34. Content https://flic.kr/p/4qc5EB

  35. http://teamtreehouse.com

  36. http://teamtreehouse.com

  37. http://teamtreehouse.com

  38. http://teamtreehouse.com

  39. Small Screen First https://flic.kr/p/abN4Q4

  40. None
  41. None
  42. None
  43. None
  44. Wireframes

  45. http://flic.kr/p/cJJdzm

  46. http://foundation.zurb.com/

  47. http://foundation.zurb.com/prototype-example2.php

  48. http://foundation.zurb.com/prototype-example2.php

  49. http://foundation.zurb.com/prototype-example2.php

  50. http://foundation.zurb.com/prototype-example2.php

  51. http://foundation.zurb.com/docs/forms.php

  52. http://foundation.zurb.com/docs/typography.php

  53. http://www.hotgloo.com/

  54. Typography https://flic.kr/p/4r1D8w

  55. http://www.trentwalton.com

  56. http://www.trentwalton.com

  57. http://www.trentwalton.com

  58. http://www.trentwalton.com

  59. https://flic.kr/p/eYEFGY Ems & Rems

  60. None
  61. 1em = default

  62. 2em = twice as big 1em = default

  63. 2em = twice as big 1em = default .5em =

    half as big
  64. h1 { font-size: 3em; } h2 { font-size: 2em; }

    h3 { font-size: 1.5em; }
  65. h1 { font-size: 3em; } h2 { font-size: 2em; }

    h3 { font-size: 1.5em; }
  66. body { font-size: 100%; }

  67. https://flic.kr/p/8iNCNU

  68. Scale https://flic.kr/p/dhufQk

  69. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

  70. None
  71. None
  72. 45-75 Characters

  73. max-width https://flic.kr/p/7nCGk3

  74. article { max-width: 28em; }

  75. article { max-width: 28em; }

  76. None
  77. None
  78. @media only screen and (min-width:48em) { article { font-size: 1.1em;

    } article p { line-height: 1.4; margin: 1.4em auto; } }
  79. @media only screen and (min-width:48em) { article { font-size: 1.1em;

    } article p { line-height: 1.4; margin: 1.4em auto; } }
  80. http://wearyoubelong.com/

  81. http://wearyoubelong.com/

  82. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }

  83. #intro { font-size: 1em; font-family: Helvetica, sans-serif; } @media only

    screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; } }
  84. Mobile https://flic.kr/p/d5DEjS

  85. https://flic.kr/p/jRnhnU

  86. https://flic.kr/p/nNu7sP

  87. None
  88. None
  89. None
  90. None
  91. None
  92. <a href=”tel:202-123-4567”>202-123-4567</a>

  93. Performance

  94. https://flic.kr/p/23xNNg

  95. “You can't mock up performance in Photoshop.” - Brad Frost

    @brad_frost
  96. Performance Budget https://flic.kr/p/hT9yw7

  97. https://flic.kr/p/5R51o3

  98. None
  99. https://flic.kr/p/7NFTF6

  100. Testing https://flic.kr/p/bPZzeM

  101. http://www.browserstack.com/

  102. Device Labs

  103. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa