Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Trent Walton: Break Everything

1ce62c03f0d718799266a77070433e2e?s=47 New Adventures
January 26, 2012

Trent Walton: Break Everything

New Adventures, 19th January 2012

1ce62c03f0d718799266a77070433e2e?s=128

New Adventures

January 26, 2012
Tweet

Transcript

  1. Break Everything @TrentWalton New Adventures 2012

  2. A little about myself... Howdy!

  3. None
  4. I work with 2 of my best friends in Texas.

  5. Dave Rupert

  6. Reagan Ray

  7. My wife had to put me on a font allowance.

  8. I think about food all the time.

  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. How did they approach their work?

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. These guys broke things like their lives depended on it.

  26. None
  27. I believe we should do the same.

  28. Why break things?

  29. So that we know limitations 1

  30. None
  31. motorcyclemuseum.org

  32. motorcyclemuseum.org

  33. So that we can develop an understanding 2

  34. http://patft.uspto.gov

  35. None
  36. None
  37. So that we can make things better 3

  38. None
  39. motorcyclemuseum.org

  40. motorcyclemuseum.org

  41. Blessed are those who break.

  42. Know1 Limitations

  43. Develop an Understanding 2

  44. Make things 3 Better

  45. Breaking Limitations 1 ...or How far can we push web

    type?
  46. As web typography improves, web designers want the same level

    of control print designers have.
  47. But what does that mean?

  48. I want to use all these...

  49. Not just these.

  50. And put all this...

  51. Into this.

  52. So how did I get started? Pushing CSS(3) as far

    as I could
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. <div class="itried">I tried to...</div> <div class="css">CSS Three</div> <span class="line-left"></span> <div

    class="itworked">&amp; it worked</div> <span class="line-right"></span> <div class="hoo">hooray!</div> For shame.
  60. Break rules for the sake of progress.

  61. None
  62. None
  63. Testing the limitations of IE9 Platform Preview

  64. None
  65. None
  66. None
  67. Injects <spans> around letters, words, or lines

  68. For example...

  69. Gets you this. <h1 id="txt_onward"> <span class="char1">O</span> <span class="char2">n</span> <span

    class="char3">w</span> <span class="char4">a</span> <span class="char5">r</span> <span class="char6">d</span> <span class="char7"></span> <span class="char8">&amp;</span> <span class="char9"></span> <span class="char10">U</span> <span class="char11">p</span> </h1>
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. Breaking takes gumption.

  79. None
  80. This isn’t ideal. <h1 id="txt_onward"> <span class="char1">O</span> <span class="char2">n</span> <span

    class="char3">w</span> <span class="char4">a</span> <span class="char5">r</span> <span class="char6">d</span> <span class="char7"></span> <span class="char8">&amp;</span> <span class="char9"></span> <span class="char10">U</span> <span class="char11">p</span> </h1>
  81. But imagine this h1::nth-letter(4); or h1::nth-char(4); targeting the 4th letter

    within an <h1> tag h1::nth-word(3); targeting the 3rd word within an <h1> tag
  82. None
  83. What would the web look like if no one ventured

    out of bounds?
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. What limitations will you break? The web is ripe for

    expansion.
  94. Typecast App

  95. Wood Type Revival

  96. Animatable

  97. Gimme Bar

  98. The Manual

  99. Break things to develop an understanding. 2

  100. None
  101. None
  102. None
  103. None
  104. None
  105. Not always fun, but necessary

  106. None
  107. None
  108. Responsive Web Design

  109. Responsive Web Design isn’t bolt-on.

  110. I’ve always seen the web in pixels

  111. Complete Control at 3200%

  112. ARCHY IER H

  113. What is this dark magic?!

  114. The only way to understand RWD was to get my

    hands dirty.
  115. We’d like a responsive video site for the new dolectures.co.uk.

    Jon Heslop January 2011
  116. None
  117. To think about the web responsively is to think in

    proportions, not pixels.
  118. None
  119. None
  120. Hierarchy can be maintained.

  121. A New Kind of Control

  122. Use flexible grids, fluid images, and media queries to build

    not a page, but a network of content that can be rearranged at any screen size to best convey a message.
  123. Break things to make them better. ...or Responsivizing My Broke-Ass

    Blog 3
  124. I wanted to make my blog responsive.

  125. Every.

  126. Single.

  127. Post.

  128. But I couldn’t see from point A to B.

  129. • Flexible Grids • Fluid Images • Media Queries

  130. None
  131. Can fine control of web type coexist with RWD?

  132. Dave Rupert solves all my problems with javascript!

  133. None
  134. None
  135. None
  136. Teamwork makes dreams work!

  137. The web community is our greatest asset. Camaraderie is everything.

  138. “It’s fun to talk about design and to work on

    my career, but that’s not going to last… the relationships in my life are where I really want to make the biggest impact.” Phil Coffman November 2011—The Great Discontent
  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. None
  149. None
  150. None
  151. None
  152. Thanks! trentwalton.com @TrentWalton