Trent Walton: Break Everything

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