Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX & Responsive Design

3,155 views

Published on

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.

Published in: Design

UX & Responsive Design

  1. 1. UX & Responsive Design @clarissa https://flic.kr/p/ohrJBb
  2. 2. 2002
  3. 3. 2010 http://archive.aneventapart.com/2010/dc/
  4. 4. Flexible https://flic.kr/p/jXxfeF
  5. 5. Adjustable https://flic.kr/p/j9KrpA
  6. 6. http://www.unitedpixelworkers.com/
  7. 7. http://www.unitedpixelworkers.com/
  8. 8. http://www.unitedpixelworkers.com/
  9. 9. http://www.unitedpixelworkers.com/
  10. 10. http://www.unitedpixelworkers.com/
  11. 11. article { width: 92%; } @media only screen and (min-width:40em) { article { width: 70%; float: left; }
  12. 12. http://www.apple.com
  13. 13. http://www.apple.com
  14. 14. http://www.apple.com
  15. 15. https://flic.kr/p/gTH5oL
  16. 16. https://flic.kr/p/gTH5oL
  17. 17. https://flic.kr/p/oq2r8z
  18. 18. https://flic.kr/p/5yk9cA
  19. 19. https://flic.kr/p/f1oriS
  20. 20. https://flic.kr/p/bR4vGi
  21. 21. https://flic.kr/p/oBTNuP
  22. 22. https://flic.kr/p/4oVCo
  23. 23. https://flic.kr/p/4FGx7a
  24. 24. https://flic.kr/p/gFgXfS
  25. 25. https://flic.kr/p/mw5wzT
  26. 26. https://flic.kr/p/aAJin6
  27. 27. Performance
  28. 28. https://flic.kr/p/23xNNg
  29. 29. “You can't mock up performance in Photoshop.” - Brad Frost @brad_frost
  30. 30. Performance Budget https://flic.kr/p/hT9yw7
  31. 31. http://mobitest.akamai.com
  32. 32. https://flic.kr/p/5R51o3
  33. 33. https://flic.kr/p/7NFTF6
  34. 34. Blocking CSS & JavaScript https://flic.kr/p/5kcFk
  35. 35. -100ms ➔ +1%
  36. 36. -400ms ➔ +9%
  37. 37. Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print. - Luke Wroblewski @lukew
  38. 38. Touch https://flic.kr/p/jRnhnU
  39. 39. http://2014.blendconf.com
  40. 40. http://2014.blendconf.com
  41. 41. https://flic.kr/p/6rMRUZ
  42. 42. ul a { display: block; }
  43. 43. ul a { display: block; padding: 3px 5px; }
  44. 44. http://www.cupcakeipsum.com
  45. 45. https://flic.kr/p/9UByoJ
  46. 46. Mobile https://flic.kr/p/d5DEjS
  47. 47. https://flic.kr/p/nNu7sP
  48. 48. http://www.kiwibank.co.nz
  49. 49. http://www.kiwibank.co.nz
  50. 50. http://www.kiwibank.co.nz
  51. 51. <a href=”tel:202-123-4567”>202-123-4567</a>
  52. 52. Typography https://flic.kr/p/4r1D8w
  53. 53. http://www.trentwalton.com
  54. 54. http://www.trentwalton.com
  55. 55. http://www.trentwalton.com
  56. 56. http://www.trentwalton.com
  57. 57. https://flic.kr/p/eYEFGY Ems & Rems
  58. 58. 1em = default
  59. 59. 2em = twice as big 1em = default
  60. 60. 2em = twice as big 1em = default .5em = half as big
  61. 61. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
  62. 62. body { font-size: 100%; }
  63. 63. https://flic.kr/p/8iNCNU
  64. 64. https://flic.kr/p/dhufQk
  65. 65. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
  66. 66. 45-75 Characters
  67. 67. max-width https://flic.kr/p/7nCGk3
  68. 68. article { max-width: 28em; }
  69. 69. article { max-width: 28em; }
  70. 70. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  71. 71. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  72. 72. http://wearyoubelong.com/
  73. 73. http://wearyoubelong.com/
  74. 74. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
  75. 75. #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; } }
  76. 76. Media Queries https://flic.kr/p/ajTNcB
  77. 77. https://flic.kr/p/8U1KwJ
  78. 78. Design Process https://flic.kr/p/bSHvgv
  79. 79. https://flic.kr/p/abN4Q4
  80. 80. https://flic.kr/p/4qc5EB
  81. 81. http://teamtreehouse.com
  82. 82. http://teamtreehouse.com
  83. 83. http://teamtreehouse.com
  84. 84. Testing https://flic.kr/p/bPZzeM
  85. 85. http://www.browserstack.com/
  86. 86. http://dcdevicelab.com
  87. 87. https://flic.kr/p/fyTLNm Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa

×