Hardboiled Web Design (DIBI 2010)

Take an uncompromising look at how to make the most from modern design tools and browsers, up-to-date techniques and processes. In this practical, design-focused talk, Andy will discuss the “how” as well as the “why,” and challenge your preconceptions to help you make better work for the web. Learn the most modern, forward-moving, and sometimes experimental CSS techniques, and why a forward looking approach to CSS will pay real dividends.

Transcript

1. View Slide

2. View Slide

3. * The centre of the known universe according to ClearLeft
   BRIGHTON*
   

   View Slide

4. HARDBOILED
   WEB DESIGN
   ANDY CLARKE
   BY
   

   View Slide

5. I looked at him and laughed. He turned
   his head and stared right into the muzzle
   of his own gun. The killer’s face was a
   vile mask of hated. He had his mouth
   open, screaming with all the furies of the
   gods dethroned, but my laugh was even
   louder. He was still screaming when I
   pulled the trigger. ”
   “
   — “My Gun is Quick” by Mickey Spillane (1950)
   

   View Slide

6. WHAT THE HELL IS
   HARD
   BOILED?
   

   View Slide

7. HUMPHREY BOGART AS SAM SPADE
   

   View Slide

8. STACY KEACH AS MIKE HAMMER
   

   View Slide

9. ANDY CLARKE AS MALARKEY P.I.
   

   View Slide

10. WHAT THE HELL IS
    HARD
    BOILED?
    

    View Slide

11. View Slide

12. — Smashing Magazine comment
    SOFTER & MORE ABSORBENT THAN MOST WEB MAGAZINES
    I can’t wait to start using the new CSS3
    standard, but I don’t think we can start
    just yet. Especially when IE isn’t
    supported in some of these. ”
    “
    

    View Slide

13. I hope CSS3 will be a standard in the near
    future, right now you can’t really use
    anything of it ’cause not every browser
    supports it.
    “
    ”
    — Smashing Magazine comment
    SOFTER & MORE ABSORBENT THAN MOST WEB MAGAZINES
    

    View Slide

14. View Slide

15. View Slide

16. W00T!*
    * irony
    

    View Slide

17. PROGRESSIVE
    ENHANCEMENT
    

    View Slide

18. The key to the [MOSe] method is
    somewhat similar to how Netscape 4
    page design developed as CSS became
    more prevalent — after creating a basic,
    functioning page in IE, you add extra
    functionality with these [at the time]
    advanced selectors.
    — Dave Shea
    THE GUY MADE THE CSS ZEN GARDEN
    “
    ”
    

    View Slide

19. Progressive enhancement builds for the
    least capable devices first, then moves
    on to enhance those documents [to]
    allow a richer experience for those users
    with modern graphical browser software.
    — Steve Champeon
    THE OTHER GUY WHO STARTED WASP
    ”
    “
    

    View Slide

20. 2003
    7*
    Coincidentally the same year George W. Bush declared “mission accomplished” in Iraq.
    

    View Slide

21. 2003 — you were carrying
    10 GB,
    15 GB,
    30 GB
    Touch Wheel iPod
    

    View Slide

22. Adobe Photoshop CS
    Apple Safari 1.0
    Mac OS X 10.2 (Jaguar)
    Macromedia Dreamweaver 7
    Microsoft FrontPage 2003
    Microsoft Office 2003
    Microsoft Windows XP (SP2)
    Mozilla Phoenix/Firebird
    Opera 7.x
    2003 — you were using
    

    View Slide

23. ENHANCEMENT
    PROGRESSIVE
    

    View Slide

24. ENRICHMENT
    PROGRESSIVE
    

    View Slide

25. border-radius
    border-image
    box-shadow
    columns
    gradients
    @font-face
    Safari 4
    Snow Leopard
    Firefox 3.6 Opera 10.5 IE8
    

    View Slide

26. keyframe animations
    multiple background images
    opacity
    RGBa / HSLa
    text-shadow
    transforms
    transitions
    

    View Slide

27. View Slide

28. border-radius
    box-shadow
    @font-face
    multiple background images
    opacity
    RGBa / HSLa
    Safari 4
    Snow Leopard
    Firefox 3.6 Opera 10.5 IE9
    Updated March 2010
    

    View Slide

29. View Slide

30. THEY CAN’T,
    CARRY ON
    

    View Slide

31. CHARLTON HESTON ANNOUNCES CSS3 SPECIFICATION
    

    View Slide

32. YOU’RE LIVING IN A
    FANTASY
    WORLD
    

    View Slide

33. W3C IS NOT AN
    INNOVATION
    BODY
    

    View Slide

34. View Slide

35. A collaborative non-partisan discussion?
    BWAHAHAHA! What do you think is a
    standardisation body? It’s a
    BATTLEFIELD where vendors fight for
    competitive advantage.
    — Daniel Glazman
    CO-CHAIR OF THE CSS WORKING GROUP
    “
    ”
    

    View Slide

36. [Andy], you’re incredibly naive or
    incredibly out of your mind.
    — Daniel Glazman
    CO-CHAIR OF THE CSS WORKING GROUP (YEAH, REALLY)
    “
    ”
    

    View Slide

37. KEEP CALM
    CARRY ON
    

    View Slide

38. KEEP CALM
    CARRY ON
    GET HARDBOILED
    

    View Slide

39. GET EXCITED
    MAKE THINGS
    

    View Slide

40. View Slide

41. View Slide

42. 101
    HARDBOILED
    404
    

    View Slide

43. View Slide

44. 
    404
    You  dumb  mug!
    What  you’re  looking  for  just  ain’t  here.  
    Did  you  click  a  link  that  I  bumped  off?  
    Don’t  be  a  bunny.
    
    hardboiled markup
    

    View Slide

45. @font-­‐face  {
    font-­‐family  :  Boycott;
    src:  url(boycott.eot);
    src:  local(Boycott),  local(Boycott),  
    url(boycott.ttf)  format(truetype);  }
    @font-­‐face  {
    font-­‐family  :  ChunkFive;
    src  :  url(chunkfive.eot);
    src  :  local(ChunkFive),  local(ChunkFive),  
    url(chunkfive.ttf)  format(truetype);  }
    @font-face
    

    View Slide

46.  h1  {
     font-­‐family  :  ChunkFive,  Helvetica,  Arial;
     font-­‐size  :  10em;  }
    @font-face
    p:first-­‐of-­‐type  {
    font-­‐family  :  ChunkFive,  Helvetica,  Arial;  
    font-­‐size  :  1.6em;
    p  {
    font-­‐family  :  Boycott,  Helvetica,  Arial;  
    font-­‐size  :  1em;  }
    

    View Slide

47.  h1  {
     font-­‐family  :  ChunkFive,  Helvetica,  Arial;
     font-­‐size  :  10em;  
     text-­‐shadow  :  -­‐1px  -­‐1px  4px  rgb(0,0,0),  
                                   0        3px  3px  rgb(255,0,0);
     }
    text-shadow
    

    View Slide

48.  h1  {
     font-­‐family  :  ChunkFive,  Helvetica,  Arial;
     font-­‐size  :  10em;  
     text-­‐shadow  :  -­‐1px  -­‐1px  4px  rgb(0,0,0),  
                                   0        3px  3px  rgb(255,0,0);
    -­‐webkit-­‐text-­‐fill-­‐color  :  transparent;
     }
    text-fill-color
    

    View Slide

49.  h1  {
     font-­‐family  :  ChunkFive,  Helvetica,  Arial;
     font-­‐size  :  10em;  
     text-­‐shadow  :  -­‐1px  -­‐1px  4px  rgb(0,0,0),  
                                   0        3px  3px  rgb(255,0,0);
    -­‐webkit-­‐text-­‐fill-­‐color  :  transparent;
    -­‐webkit-­‐text-­‐stroke  :  3px  rgba(0,0,0,.1);
     }
    text-stroke
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. AUTHORS
    HARDBOILED
    

    View Slide

56. View Slide

57. View Slide

58. 
    
    
    
    
    
    
    
    
    hardboiled markup
    

    View Slide

59. .vcard  {
     z-­‐index  :  1;
     position  :  absolute;
     width  :  300px;  
     height  :  195px;
     }
    position : absolute
    

    View Slide

60. .vcard:nth-­‐of-­‐type(1)  {  /*  position  */  }
    .vcard:nth-­‐of-­‐type(2)  {  }
    .vcard:nth-­‐of-­‐type(3)  {  }
    .vcard:nth-­‐of-­‐type(4)  {  }
    .vcard:nth-­‐of-­‐type(5)  {  }
    .vcard:nth-­‐of-­‐type(6)  {  }
    .vcard:nth-­‐of-­‐type(7)  {  }
    .vcard:nth-­‐of-­‐type(8)  {  }
    .vcard:nth-­‐of-­‐type(9)  {  }
    n-th of type
    

    View Slide

61. NTH-CHILD?
    WHY NOT
    

    View Slide

62. View Slide

63. .vcard:nth-­‐of-­‐type(1)  {  background-­‐image  }
    .vcard:nth-­‐of-­‐type(2)  {  }
    .vcard:nth-­‐of-­‐type(3)  {  }
    .vcard:nth-­‐of-­‐type(4)  {  }
    .vcard:nth-­‐of-­‐type(5)  {  }
    .vcard:nth-­‐of-­‐type(6)  {  }
    .vcard:nth-­‐of-­‐type(7)  {  }
    .vcard:nth-­‐of-­‐type(8)  {  }
    .vcard:nth-­‐of-­‐type(9)  {  }
    n-th of type
    

    View Slide

64. View Slide

65. transform : rotate(30deg)
    Card design: Dennis Kardys — http://flickr.com/photos/14716132@N08/4260681317/
    

    View Slide

66. transform : translateX(20px)
    

    View Slide

67. transform : translateY(20px)
    

    View Slide

68. transform : translate(20px, 20px)
    

    View Slide

69. transform : scale(.5)
    

    View Slide

70. transform : scaleX(.5)
    

    View Slide

71. transform : scaleY(.5)
    

    View Slide

72. transform : skewX(30deg)
    

    View Slide

73. transform : skewY(30deg)
    

    View Slide

74. transform : skew(-15deg, -15deg)
    

    View Slide

75. transform-origin : 0 0
    Card design: pixelflips — http://www.flickr.com/photos/pixelflips/4251019190/
    transform-origin : left top
    

    View Slide

76. Card design: Peter Fransen — http://www.flickr.com/photos/30162209@N02/4258312990
    transform-origin : 50% 0
    

    View Slide

77. 100% 0 50% 50%
    100% 50% 100% 100%
    

    View Slide

78. .vcard:nth-­‐child(odd)  {
     transform  :  rotate(-­‐2deg);  }
    .vcard:nth-­‐of-­‐type(3n)  {
     transform  :  rotate(2deg)  translateY(-­‐30px);  }
    .vcard:nth-­‐of-­‐type(4n)  {
     transform  :  rotate(2deg);  }
    .vcard:nth-­‐of-­‐type(5n)  {
     transform  :  rotate(90deg);  }
    transform
    

    View Slide

79. View Slide

80. View Slide

81. .vcard  {
     transition-­‐property  :  all;
     transition-­‐duration  :  .4s;
     transition-­‐timing-­‐function  :  ease-­‐in-­‐out;  }
    .vcard:hover  {
     transform  :  rotate(0deg)  scale(1.05);
     transform-­‐origin  :  50%  50%;  }
    transition
    

    View Slide

82. background-color background-image background-position
    border-color border-spacing border-width
    bottom, top, right, left z-index
    color
    font-size font-weight
    height min-height max-height
    letter-spacing line-height
    margin padding
    opacity visibility
    text-indent text-shadow
    vertical-align
    width min-width max-width
    word-spacing
    transition properties
    

    View Slide

83. STORE
    HARDBOILED
    

    View Slide

84. View Slide

85. View Slide

86. 
    
    
    
    
    
    
    
    hardboiled markup
    

    View Slide

87. 
    
    
    
    The  Big  Sleep
    
    Add  to  basket
    
    
    
    classify items
    

    View Slide

88. .item  {
     float  :  left;
     margin  :  0  20px  60px  0;    
     width  :  220px;
     height  :  330px;  
     }
    float : left
    

    View Slide

89.  img,  
    .description  {
     position  :  absolute;  
     width  :  200px;
     height  :  310px;
     border  :  10px  solid  rgb(229,228,216);
     }
    position : absolute
    

    View Slide

90.  img,  
    .description  {
     position  :  absolute;  
     width  :  200px;
     height  :  310px;
     border  :  10px  solid  rgb(229,228,216);
     border-­‐radius  :  10px;
     }
    border : radius
    

    View Slide

91.  img,  
    .description  {
     position  :  absolute;  
     width  :  200px;
     height  :  310px;
     border  :  10px  solid  rgb(229,228,216);
     border-­‐radius  :  10px;
     box-­‐shadow  :  0  1px  2px  rgba(0,0,0,.25);
     }
    box-shadow
    

    View Slide

92. View Slide

93. .item  {
     -­‐webkit-­‐perspective  :  400;  
     }
    perspective
    

    View Slide

94. .item  .inner  {
     animation-­‐name  :  bookflip;
     animation-­‐duration  :  2s;
     animation-­‐iteration-­‐count  :  1;
     animation-­‐timing-­‐function  :  ease-­‐in-­‐out;  }
    keyframe animation
    @keyframes  bookflip  {
    from  {  transform  :  rotateY(0deg);  }
    50%  {  transform  :  rotateY(180deg);  }
    to  {  transform  :  rotateY(0deg);  }  }
    

    View Slide

95. View Slide

96.  img,  
    .description  {
     position  :  static;
     float  :  left;  
     }
    position : absolute
    

    View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. WHAT DOES
     BROWSER TESTING
     MEAN?
     

     View Slide

104. BROWSER TESTING!
     MEAN
     

     View Slide

105. NOW THAT’S
     HARDBOILED
     

     View Slide

106. -atsc- Advanced TV Standards Committee
     -khtml- Konqueror browser (and Safari 1)
     -ms- Microsoft
     -moz- Mozilla Foundation (Gecko browsers)
     -o- Opera Software
     -webkit- Safari (and WebKit browsers)
     -wap- The WAP Forum
     vendor prefixes
     

     View Slide

107. .vcard  {
      -­‐moz-­‐transform  :  rotate(270deg);  
      -­‐o-­‐transform  :  rotate(270deg);  
      -­‐webkit-­‐transform  :  rotate(270deg);    
      transform  :  rotate(270deg);  
      }
     transform
     

     View Slide

108. .vcard  {
      -­‐moz-­‐transform  :  rotate(-­‐90deg);  
      -­‐o-­‐transform  :  rotate(-­‐90deg);  
      -­‐webkit-­‐transform  :  rotate(-­‐90deg);    
      transform  :  rotate(-­‐90deg);
      -­‐ms-­‐filter:
      progid:DXImageTransform.Microsoft.↵
      BasicImage(rotation=3);
      }
     transform
     

     View Slide

109. JUST SAY
     NO TO
     MICROSOFT
     FILTERS
     

     View Slide

110. We can stop waiting around for browser
     makers to give us what we want and
     start using the advanced CSS we’ve been
     hearing about for years. The second is
     that the process of finding out which
     parts of the spec work in the real world,
     and which fall down, will be greatly
     accelerated.
     — Eric Meyer
     HE HAD MORE HAIR LAST TIME I SAW HIM
     “
     ”
     

     View Slide

111. View Slide

112. View Slide

113. 
     
     
     
     ie-css.js
     

     View Slide

114. jQuery MooTools
     DOM Assistant 2.7.4 DOM Assistant 2.8 beta
     Prototype 1.6.1 YUI 2.8.0
     NMMatcher 1.20
     selector engines
     

     View Slide

115. :nth-child :last-of-type
     :nth-last-child :empty
     :nth-of-type :enabled
     :first-child :disabled
     :last-child :checked
     :first-of-type
     ie-css.js enables
     

     View Slide

116. 
     
     
     
     
     
     
     
     
     hardboiled markup
     

     View Slide

117. .vcard:nth-­‐of-­‐type(1)  {  /*  position  */  }
     .vcard:nth-­‐of-­‐type(2)  {  }
     .vcard:nth-­‐of-­‐type(3)  {  }
     .vcard:nth-­‐of-­‐type(4)  {  }
     .vcard:nth-­‐of-­‐type(5)  {  }
     .vcard:nth-­‐of-­‐type(6)  {  }
     .vcard:nth-­‐of-­‐type(7)  {  }
     .vcard:nth-­‐of-­‐type(8)  {  }
     .vcard:nth-­‐of-­‐type(9)  {  }
     n-th of type
     

     View Slide

118. View Slide

119. View Slide

120. View Slide

121. 
     modernizr.js
     

     View Slide

122. @font-face HSLa
     CSS Animations RGBa
     CSS Columns Border radius
     CSS Gradients Border image
     CSS Reflections Box shadow
     CSS 2D Transforms Multiple backgrounds
     CSS 3D Transforms Opacity
     CSS Transitions (HTML5)
     modernizr properties
     

     View Slide

123. View Slide

124. View Slide

125. specificity
     .rgba  body  {
      color  :  rgba(0,0,0,.8);
      text-­‐shadow  :  0  -­‐1px  1px  rgba(255,255,255,.8);  
      }
     body  {
     color  :  rgb(0,0,0);
     text-­‐shadow  :  0  -­‐1px  1px  rgb(255,255,255);  
     }
     

     View Slide

126. descendant selectors
     .rgba  body  {
      color  :  rgba(0,0,0,.8);
      text-­‐shadow  :  0  -­‐1px  1px  rgba(255,255,255,.8);  
      }
     .no-­‐rgba  body  {
      color  :  rgb(0,0,0);
      text-­‐shadow  :  0  -­‐1px  1px  rgb(255,255,255);  
      }
     

     View Slide

127. descendant selectors
     .csstransforms  article  {
      top  :  260px;  
      left  :  50%;  
      margin-­‐left  :  -­‐60px;  
      transform  :  skew(10deg,  -­‐15deg);  
      }
     .no-­‐csstransforms  article  {
      top  :  300px;  
      left  :  50%;  
      margin-­‐left  :  -­‐300px;  
      }
     

     View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. View Slide

133. IGNORANCE
     IS BLISS
     

     View Slide

134. NOW THAT’S
     HARDBOILED
     

     View Slide

135. Available Autumn 2010
     

     View Slide

136. HARDBOILED
     WEB DESIGN
     ANDY CLARKE
     BY
     @malarkey
     @itshardboiled
     

     View Slide

137. View Slide