UX & Responsive Design

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=47 Clarissa Peterson
September 13, 2014

UX & Responsive Design

Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

September 13, 2014
Tweet

Transcript

  1. UX & Responsive Design @clarissa https://flic.kr/p/ohrJBb

  2. 2002

  3. 2010 http://archive.aneventapart.com/2010/dc/

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

  5. None
  6. None
  7. None
  8. None
  9. Adjustable https://flic.kr/p/j9KrpA

  10. http://www.unitedpixelworkers.com/

  11. http://www.unitedpixelworkers.com/

  12. http://www.unitedpixelworkers.com/

  13. http://www.unitedpixelworkers.com/

  14. http://www.unitedpixelworkers.com/

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

    { article { width: 70%; float: left; }
  16. http://www.apple.com

  17. http://www.apple.com

  18. http://www.apple.com

  19. None
  20. https://flic.kr/p/gTH5oL

  21. https://flic.kr/p/gTH5oL

  22. https://flic.kr/p/oq2r8z

  23. https://flic.kr/p/5yk9cA

  24. https://flic.kr/p/f1oriS

  25. https://flic.kr/p/bR4vGi

  26. https://flic.kr/p/oBTNuP

  27. https://flic.kr/p/4oVCo

  28. https://flic.kr/p/4FGx7a

  29. https://flic.kr/p/gFgXfS

  30. https://flic.kr/p/mw5wzT

  31. https://flic.kr/p/aAJin6

  32. Performance

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

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

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

  36. http://mobitest.akamai.com

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

  38. None
  39. https://flic.kr/p/7NFTF6

  40. Blocking CSS & JavaScript https://flic.kr/p/5kcFk

  41. -100ms ➔ +1%

  42. -400ms ➔ +9%

  43. Being a Web designer & not considering speed/performance is like

    being a print designer & not considering how your colors will print. - Luke Wroblewski @lukew
  44. Touch https://flic.kr/p/jRnhnU

  45. http://2014.blendconf.com

  46. http://2014.blendconf.com

  47. https://flic.kr/p/6rMRUZ

  48. None
  49. ul a { display: block; }

  50. ul a { display: block; padding: 3px 5px; }

  51. http://www.cupcakeipsum.com

  52. https://flic.kr/p/9UByoJ

  53. Mobile https://flic.kr/p/d5DEjS

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

  55. http://www.kiwibank.co.nz

  56. http://www.kiwibank.co.nz

  57. http://www.kiwibank.co.nz

  58. <a href=”tel:202-123-4567”>202-123-4567</a>

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

  60. http://www.trentwalton.com

  61. http://www.trentwalton.com

  62. http://www.trentwalton.com

  63. http://www.trentwalton.com

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

  65. None
  66. 1em = default

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

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

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

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

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

  72. https://flic.kr/p/dhufQk

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

  74. None
  75. None
  76. 45-75 Characters

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

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

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

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

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

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

  84. http://wearyoubelong.com/

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

  86. #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; } }
  87. Media Queries https://flic.kr/p/ajTNcB

  88. https://flic.kr/p/8U1KwJ

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

  90. https://flic.kr/p/abN4Q4

  91. https://flic.kr/p/4qc5EB

  92. http://teamtreehouse.com

  93. http://teamtreehouse.com

  94. http://teamtreehouse.com

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

  96. http://www.browserstack.com/

  97. None
  98. http://dcdevicelab.com

  99. https://flic.kr/p/fyTLNm Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa