$30 off During Our Annual Pro Sale. View Details »

Hardboiled Web Design (DIBI 2010)

Andy Clarke
April 28, 2010

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.

Andy Clarke

April 28, 2010
Tweet

More Decks by Andy Clarke

Other Decks in Design

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