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

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?
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
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
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
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
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
42. 101 HARDBOILED 404
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
55. AUTHORS HARDBOILED
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
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
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
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
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
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);  }  }
96.  img,   .description  {  position  :  static;  float  :  left;    } position : absolute
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 “ ”
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
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;    }
133. IGNORANCE IS BLISS
134. NOW THAT’S HARDBOILED
135. Available Autumn 2010
136. HARDBOILED WEB DESIGN ANDY CLARKE BY @malarkey @itshardboiled