Trent Walton: Break Everything

New Adventures, 19th January 2012

Transcript

1. Break Everything @TrentWalton New Adventures 2012
2. A little about myself... Howdy!
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.
17. How did they approach their work?
25. These guys broke things like their lives depended on it.
27. I believe we should do the same.
28. Why break things?
29. So that we know limitations 1
31. motorcyclemuseum.org
32. motorcyclemuseum.org
33. So that we can develop an understanding 2
34. http://patft.uspto.gov
37. So that we can make things better 3
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
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.
63. Testing the limitations of IE9 Platform Preview
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>
78. Breaking takes gumption.
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
83. What would the web look like if no one ventured out of bounds?
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
105. Not always fun, but necessary
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
117. To think about the web responsively is to think in proportions, not pixels.
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
131. Can fine control of web type coexist with RWD?
132. Dave Rupert solves all my problems with javascript!
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
152. Thanks! trentwalton.com @TrentWalton