Bringing a knife to a gunfight

Bringing a knife to a gunfight

In the mid-nineties, when designers started making their mark on the web, they did it with software tools and processes that they’d brought with them from print. But the web’s a different place now than it was ten, five, even two years ago; the tools and processes we’ve relied on for years are no longer capable of properly designing today’s flexible, responsive web. In this session, we’ll find new ways to design that better serve the needs of today’s responsive web, and investigate better, alternative tools and approaches to design. We’ll learn too how new tools and approaches can improve communication between designers and developers and our clients.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

July 11, 2012
Tweet

Transcript

  1. 1.
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 11.
  9. 12.
  10. 13.

    Variable leading Percentage-based layouts CSS capabilities Active/focus Animations Form element

    styling Font rendering Web fonts Transitions Variable fonts sizes Media Queries CSS3 ligatures Flexible measure :hover pseudo-classes CSS3 swashes
  11. 17.
  12. 18.
  13. 19.
  14. 20.
  15. 21.
  16. 22.
  17. 24.

    We don’t support 800 x 600 anymore, nor do we

    640 x 480. Do you? JASON SANTA MARIA http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
  18. 25.
  19. 26.
  20. 28.
  21. 29.
  22. 30.
  23. 31.
  24. 32.
  25. 33.
  26. 34.
  27. 36.

    Arguing about 640, 800 or 1024 pixels is like arguing

    about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing. The numbers game is a red herring. A big xed-width red herring. JEREMY KEITH http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
  28. 37.

    The control which designers know in the print medium, and

    often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility. JOHN ALLSOPP http://www.alistapart.com/articles/dao/
  29. 38.

    The web’s content must be built to travel across networks

    to unknown devices and browsers. JEFFREY VEEN Hotwired Style book, 1997
  30. 40.
  31. 46.
  32. 48.
  33. 50.
  34. 52.
  35. 54.
  36. 55.
  37. 56.
  38. 57.
  39. 58.
  40. 59.
  41. 60.
  42. 61.
  43. 63.
  44. 65.

    Type Colour Texture Atmosphere Typefaces, type treatments and white space

    Emotion and interaction vocabulary Decorative elements, line-work, patterns and shapes
  45. 67.
  46. 68.
  47. 69.

    Elements Styles inventory Captions Headings Labels Legends Lists Paragraphs Quotations

    Small Tables Classi cations Alerts Comments Copyright information Dates and times Form text (error, help) Pull quotes (marks) Intro paragraphs Related article summaries Related article titles
  48. 70.
  49. 72.
  50. 73.
  51. 74.
  52. 77.
  53. 80.
  54. 81.
  55. 82.
  56. 83.
  57. 88.
  58. 91.
  59. 92.

    h1 { font-size : 6vw; } h2 { font-size :

    3vh; } p { font-size : 2vmin; }
  60. 93.

    vw vh vmin vmax Equal to 1% of the width

    of the viewport Equal to 1% of the height of the viewport Equal to either vw or vh, whichever is smaller http://www.w3.org/TR/css3-values/#viewport-relative-lengths New. The opposite behaviour to vmin
  61. 94.
  62. 95.
  63. 96.
  64. 97.
  65. 99.

    h1 { font-size : 32px; font-size : 6vw; } h2

    { font-size : 24px; font-size : 3vh; } p { font-size : 16px; font-size : 2vmin; }
  66. 100.
  67. 103.
  68. 104.
  69. 105.
  70. 106.
  71. 107.
  72. 108.
  73. 109.
  74. 110.
  75. 111.
  76. 115.
  77. 119.
  78. 120.
  79. 122.

    background-color:rgb(75,13,13); border-color:rgb(0,0,0); border-width:1px; border-style:solid; /* Firefox v3.5+ */ -moz-box-shadow:0px 0px

    10px rgba(0,0,0,0.65); /* Safari v3.0+ and by Chrome v0.2+ */ -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.65); /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */ box-shadow:0px 0px 10px rgba(0,0,0,0.65); background-color: #4b0d0d; border: 1px solid #000; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.65); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.65); box-shadow: 0 0 10px rgba(0,0,0,0.65); Before After
  80. 124.
  81. 125.
  82. 126.

    Web designers will have to look beyond the layout in

    front of them to envision how its elements will re ow & lockup at various widths while maintaining form & hierarchy. TRENT WALTON http://trentwalton.com/2011/07/14/content-choreography
  83. 129.
  84. 130.
  85. 131.
  86. 134.
  87. 135.
  88. 136.
  89. 137.
  90. 138.
  91. 139.

    @media screen and (min-width : 0px) and (max-width : 319px)

    { .row { margin-left : -25px; } .col { border-left-width : 25px; padding : 0; } .span_1 { width : 33.3333333333%; } .span_2 { width : 66.6666666667%; } .span_3 { margin-left : 0; width : 100%; } }
  92. 140.

    @media screen and (min-width: 0px) and (max-width: 319px) { /*

    styles */ } @media screen and (min-width: 320px) and (max-width: 479px) { /* styles */ } @media screen and (min-width: 480px) and (max-width: 599px) { /* styles */ }
  93. 141.

    @media screen and (min-width: 600px) and (max-width: 758px) { /*

    styles */ } @media screen and (min-width: 759px) and (max-width: 958px) { /* styles */ } @media screen and (min-width: 959px) { /* styles */ }
  94. 142.
  95. 143.

    g

  96. 144.
  97. 145.
  98. 148.
  99. 149.
  100. 150.
  101. 151.
  102. 152.
  103. 153.
  104. 154.
  105. 155.
  106. 156.
  107. 157.
  108. 158.
  109. 159.
  110. 160.
  111. 161.
  112. 162.
  113. 163.
  114. 166.
  115. 167.
  116. 168.
  117. 169.
  118. 170.
  119. 171.
  120. 172.

    If clients only see at images of their website, there

    is a danger that they are surprised by the outcome when seen in a browser. JOSH EMERSON http://joshemerson.co.uk/blog/responsive-process/
  121. 174.
  122. 175.
  123. 176.
  124. 177.

    The more time we’ve spent working on responsive websites, the

    clearer it’s become that mock-ups aren’t very good representations of the nal product. BEARDED http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do
  125. 179.
  126. 180.
  127. 181.
  128. 182.
  129. 183.
  130. 184.
  131. 188.
  132. 189.

    Design doesn’t work when it’s separate from development Drawing tools

    are now relevant only for creative expression and experimentation In the browser and on the device is now the way to communicate design