Hardboiled Web Design (DIBI 2010)

433acaea1012b25d97ae66da9b998dad?s=47 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.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

April 28, 2010
Tweet

Transcript

  1. None
  2. None
  3. * The centre of the known universe according to ClearLeft

    BRIGHTON*
  4. HARDBOILED WEB DESIGN ANDY CLARKE BY

  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)
  6. WHAT THE HELL IS HARD BOILED?

  7. HUMPHREY BOGART AS SAM SPADE

  8. STACY KEACH AS MIKE HAMMER

  9. ANDY CLARKE AS MALARKEY P.I.

  10. WHAT THE HELL IS HARD BOILED?

  11. None
  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. ” “
  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
  14. None
  15. None
  16. W00T!* * irony

  17. PROGRESSIVE ENHANCEMENT

  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 “ ”
  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 ” “
  20. 2003 7* Coincidentally the same year George W. Bush declared

    “mission accomplished” in Iraq.
  21. 2003 — you were carrying 10 GB, 15 GB, 30

    GB Touch Wheel iPod
  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
  23. ENHANCEMENT PROGRESSIVE

  24. ENRICHMENT PROGRESSIVE

  25. border-radius border-image box-shadow columns gradients @font-face Safari 4 Snow Leopard

    Firefox 3.6 Opera 10.5 IE8
  26. keyframe animations multiple background images opacity RGBa / HSLa text-shadow

    transforms transitions
  27. None
  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
  29. None
  30. THEY CAN’T, CARRY ON

  31. CHARLTON HESTON ANNOUNCES CSS3 SPECIFICATION

  32. YOU’RE LIVING IN A FANTASY WORLD

  33. W3C IS NOT AN INNOVATION BODY

  34. None
  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 “ ”
  36. [Andy], you’re incredibly naive or incredibly out of your mind.

    — Daniel Glazman CO-CHAIR OF THE CSS WORKING GROUP (YEAH, REALLY) “ ”
  37. KEEP CALM CARRY ON

  38. KEEP CALM CARRY ON GET HARDBOILED

  39. GET EXCITED MAKE THINGS

  40. None
  41. None
  42. 101 HARDBOILED 404

  43. None
  44. <div  class="content"> <h1>404</h1> <p>You  dumb  mug!</p> <p>What  you’re  looking  for

     just  ain’t  here.   Did  you  click  a  link  that  I  bumped  off?   Don’t  be  a  bunny.</p> </div> hardboiled markup
  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
  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;  }
  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
  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
  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
  50. None
  51. None
  52. None
  53. None
  54. None
  55. AUTHORS HARDBOILED

  56. None
  57. None
  58. <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div>

    <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> hardboiled markup
  59. .vcard  {  z-­‐index  :  1;  position  :  absolute;  width  :

     300px;    height  :  195px;  } position : absolute
  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
  61. NTH-CHILD? WHY NOT

  62. None
  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
  64. None
  65. transform : rotate(30deg) Card design: Dennis Kardys — http://flickr.com/photos/14716132@N08/4260681317/

  66. transform : translateX(20px)

  67. transform : translateY(20px)

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

  69. transform : scale(.5)

  70. transform : scaleX(.5)

  71. transform : scaleY(.5)

  72. transform : skewX(30deg)

  73. transform : skewY(30deg)

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

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

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

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

  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
  79. None
  80. None
  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
  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
  83. STORE HARDBOILED

  84. None
  85. None
  86. <div  id="s01"></div> <div  id="s02"></div> <div  id="s03"></div> <div  id="s04"></div> <div  id="s05"></div>

    <div  id="s06"></div> <div  id="s07"></div> <div  id="s08"></div> hardboiled markup
  87. <div  id="s01"  class="item"> <div  class="inner"> <img  src="store-­‐01.jpg"  alt=""  /> <div

     class="description"> <h3>The  Big  Sleep</h3> <p></p> <a  href="#">Add  to  basket</a> </div> </div> </div> classify items
  88. .item  {  float  :  left;  margin  :  0  20px  60px

     0;      width  :  220px;  height  :  330px;    } float : left
  89.  img,   .description  {  position  :  absolute;    width  :

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

     200px;  height  :  310px;  border  :  10px  solid  rgb(229,228,216);  border-­‐radius  :  10px;  } border : radius
  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
  92. None
  93. .item  {  -­‐webkit-­‐perspective  :  400;    } perspective

  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);  }  }
  95. None
  96.  img,   .description  {  position  :  static;  float  :  left;

       } position : absolute
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. WHAT DOES BROWSER TESTING MEAN?

  104. BROWSER TESTING! MEAN

  105. NOW THAT’S HARDBOILED

  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
  107. .vcard  {  -­‐moz-­‐transform  :  rotate(270deg);    -­‐o-­‐transform  :  rotate(270deg);  

     -­‐webkit-­‐transform  :  rotate(270deg);      transform  :  rotate(270deg);    } transform
  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
  109. JUST SAY NO TO MICROSOFT FILTERS

  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 “ ”
  111. None
  112. None
  113. <!-­‐-­‐[if  lt  IE  9]> <script  src="library.js"></script> <script  src="ie-­‐css3.js"></script> <![endif]-­‐-­‐> ie-css.js

  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
  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
  116. <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div>

    <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> <div  class="vcard"></div> hardboiled markup
  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
  118. None
  119. None
  120. None
  121. <script  src="modernizr.js"></script> modernizr.js

  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
  123. <html  class="canvas  canvastext  geolocation   rgba  hsla  multiplebgs  borderimage  

    borderradius  boxshadow  opacity  cssanimations   csscolumns  cssgradients  cssreflections   csstransforms  csstransforms3d  csstransitions   video  audio  fontface"> feature detection
  124. <html  class="no-­‐canvas  no-­‐canvastext   no-­‐geolocation  no-­‐rgba  no-­‐hsla   no-­‐multiplebgs  no-­‐borderimage

     no-­‐borderradius   no-­‐boxshadow  no-­‐opacity  no-­‐cssanimations   no-­‐csscolumns  no-­‐cssgradients   no-­‐cssreflections  no-­‐csstransforms   no-­‐csstransforms3d  no-­‐csstransitions   no-­‐video  no-­‐audio  no-­‐fontface"> feature detection
  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);   }
  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);    }
  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;    }
  128. None
  129. None
  130. None
  131. None
  132. None
  133. IGNORANCE IS BLISS

  134. NOW THAT’S HARDBOILED

  135. Available Autumn 2010

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

  137. None