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. 1.
  2. 2.
  3. 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)
  4. 11.
  5. 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. ” “
  6. 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
  7. 14.
  8. 15.
  9. 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 “ ”
  10. 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 ” “
  11. 20.
  12. 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
  13. 27.
  14. 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
  15. 29.
  16. 34.
  17. 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 “ ”
  18. 36.

    [Andy], you’re incredibly naive or incredibly out of your mind.

    — Daniel Glazman CO-CHAIR OF THE CSS WORKING GROUP (YEAH, REALLY) “ ”
  19. 40.
  20. 41.
  21. 43.
  22. 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
  23. 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
  24. 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;  }
  25. 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
  26. 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
  27. 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
  28. 50.
  29. 51.
  30. 52.
  31. 53.
  32. 54.
  33. 56.
  34. 57.
  35. 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
  36. 59.

    .vcard  {  z-­‐index  :  1;  position  :  absolute;  width  :

     300px;    height  :  195px;  } position : absolute
  37. 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
  38. 62.
  39. 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
  40. 64.
  41. 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
  42. 79.
  43. 80.
  44. 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
  45. 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
  46. 84.
  47. 85.
  48. 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
  49. 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
  50. 88.

    .item  {  float  :  left;  margin  :  0  20px  60px

     0;      width  :  220px;  height  :  330px;    } float : left
  51. 89.

     img,   .description  {  position  :  absolute;    width  :

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

     img,   .description  {  position  :  absolute;    width  :

     200px;  height  :  310px;  border  :  10px  solid  rgb(229,228,216);  border-­‐radius  :  10px;  } border : radius
  53. 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
  54. 92.
  55. 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);  }  }
  56. 95.
  57. 97.
  58. 98.
  59. 99.
  60. 100.
  61. 101.
  62. 102.
  63. 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
  64. 107.

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

     -­‐webkit-­‐transform  :  rotate(270deg);      transform  :  rotate(270deg);    } transform
  65. 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
  66. 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 “ ”
  67. 111.
  68. 112.
  69. 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
  70. 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
  71. 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
  72. 118.
  73. 119.
  74. 120.
  75. 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
  76. 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
  77. 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
  78. 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);   }
  79. 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);    }
  80. 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;    }
  81. 128.
  82. 129.
  83. 130.
  84. 131.
  85. 132.
  86. 137.