Trent Walton: Break Everything

New Adventures, 19th January 2012

Transcript

1. Break
   Everything
   @TrentWalton
   New Adventures 2012
   

   View Slide

2. A little about myself...
   Howdy!
   

   View Slide

3. View Slide

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

   View Slide

5. Dave Rupert
   

   View Slide

6. Reagan Ray
   

   View Slide

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

   View Slide

8. I think about food all the time.
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. How did they
    approach
    their work?
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. These guys
    broke things
    like their lives
    depended on it.
    

    View Slide

26. View Slide

27. I believe we
    should do
    the same.
    

    View Slide

28. Why break
    things?
    

    View Slide

29. So that we
    know
    limitations
    1
    

    View Slide

30. View Slide

31. motorcyclemuseum.org
    

    View Slide

32. motorcyclemuseum.org
    

    View Slide

33. So that we can
    develop an
    understanding
    2
    

    View Slide

34. http://patft.uspto.gov
    

    View Slide

35. View Slide

36. View Slide

37. So that we
    can make
    things better
    3
    

    View Slide

38. View Slide

39. motorcyclemuseum.org
    

    View Slide

40. motorcyclemuseum.org
    

    View Slide

41. Blessed are
    those who
    break.
    

    View Slide

42. Know1
    Limitations
    

    View Slide

43. Develop an
    Understanding
    2
    

    View Slide

44. Make things
    3
    Better
    

    View Slide

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

    View Slide

46. As web typography
    improves, web
    designers want the
    same level of control
    print designers have.
    

    View Slide

47. But what does
    that mean?
    

    View Slide

48. I want to use all these...
    

    View Slide

49. Not just these.
    

    View Slide

50. And put all this...
    

    View Slide

51. Into this.
    

    View Slide

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

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. I tried to...
    CSS Three
    
    & it worked
    
    hooray!
    For shame.
    

    View Slide

60. Break rules
    for the sake
    of progress.
    

    View Slide

61. View Slide

62. View Slide

63. Testing the limitations of IE9 Platform Preview
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. Injects around letters, words, or lines
    

    View Slide

68. For example...
    

    View Slide

69. Gets you this.
    
    O
    n
    w
    a
    r
    d
    
    &
    
    U
    p
    
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. Breaking
    takes
    gumption.
    

    View Slide

79. View Slide

80. This isn’t ideal.
    
    O
    n
    w
    a
    r
    d
    
    &
    
    U
    p
    
    

    View Slide

81. But imagine this
    h1::nth-letter(4); or h1::nth-char(4);
    targeting the 4th letter within an tag
    h1::nth-word(3);
    targeting the 3rd word within an tag
    

    View Slide

82. View Slide

83. What would
    the web look
    like if no one
    ventured out
    of bounds?
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. What limitations will you break?
    The web is ripe
    for expansion.
    

    View Slide

94. Typecast App
    

    View Slide

95. Wood Type Revival
    

    View Slide

96. Animatable
    

    View Slide

97. Gimme Bar
    

    View Slide

98. The Manual
    

    View Slide

99. Break things to
    develop an
    understanding.
    2
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. Not always
     fun, but
     necessary
     

     View Slide

106. View Slide

107. View Slide

108. Responsive Web Design
     

     View Slide

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

     View Slide

110. I’ve always seen the web in pixels
     

     View Slide

111. Complete Control at 3200%
     

     View Slide

112. ARCHY
     IER
     H
     

     View Slide

113. What is this dark magic?!
     

     View Slide

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

     View Slide

115. We’d like a responsive video site
     for the new dolectures.co.uk.
     Jon Heslop
     January 2011
     

     View Slide

116. View Slide

117. To think about the
     web responsively is to
     think in proportions,
     not pixels.
     

     View Slide

118. View Slide

119. View Slide

120. Hierarchy can be maintained.
     

     View Slide

121. A New Kind
     of Control
     

     View Slide

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.
     

     View Slide

123. Break things
     to make
     them better.
     ...or Responsivizing My Broke-Ass Blog
     3
     

     View Slide

124. I wanted to make my blog responsive.
     

     View Slide

125. Every.
     

     View Slide

126. Single.
     

     View Slide

127. Post.
     

     View Slide

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

     View Slide

129. • Flexible Grids
     • Fluid Images
     • Media Queries
     

     View Slide

130. View Slide

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

     View Slide

132. Dave Rupert solves all my
     problems with javascript!
     

     View Slide

133. View Slide

134. View Slide

135. View Slide

136. Teamwork makes dreams work!
     

     View Slide

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

     View Slide

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
     

     View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. Thanks!
     trentwalton.com
     @TrentWalton
     

     View Slide