An Event Apart: Hardboiled Web Design

by Luke Wroblewski November 3, 2010

In his Hardboiled Web Design presentation at An Event Apart in San Diego, CA Andy Clarke stressed the importance of designing from the top down to create awesome Web experiences that take advantage of the latest capabilities of CSS. Here's my notes from his talk:

  • In hard-boiled detective stories, the heroes do not compromise. They are always outside the law because they make their own rules. They do what society can’t because of the rules we have imposed on ourselves. Heroes matter because they give people hope in a resolution or a better future. We root for heroes because we need them to show us the way.
  • Many people think we can’t start using CSS3 yet. And when we do, we can only do small things like adding rounded corners and drop shadows. There’s a lack of enthusiasm to do much better. This is not the way to move the Web forward. We need to get over our pre-conceived notions.
  • W3C is not an innovation body. They do not develop standards that everyone that goes and implements. Instead it is a group of companies that lobby for specific features and competitive advantage. Implementation comes before a standard not the other way around. Web browser manufacturers will implement CSS on their own timetable, with their own decisions. We should not wait for a standard to be delivered. CSS3 is being defined in modules –so we can start using things now.
  • Browser manufacturers are implementing a lot of innovative features right now. We need to ignore the politics and use all the tools we can to create incredible designs for the Web. Design for the best browsers, then think intelligently about what happens with browsers with limited capabilities.
  • Each interface should be appropriate to the capabilities of the software people are using. NO one will know that things that don’t look the same in other browsers. People use one browser.
  • Progressive enhancement was first coined seven years ago. There is a lot of good intention in starting with basic mark-up and layering on presentation, then adding interactions. The mistake we make is treating visual design the same way.
  • Progressive enrichment: is treating design elements as visual rewards for people whose browsers that can support them. This is not good enough anymore. We need to stop designing for the worst browsers first, there is so far we can go up. Instead we should design for the best browsers first, then think about what happens when browsers don’t support some features.
  • The fact that Web designs have to look the same in every browser is dated and needs to change. It just can’t happen. Different browsers have different capabilities based on when they are released and who made them. We just have to accept this.
  • CSS3 selectors allow you to avoid using lots of presentation classes. Keep mark-up lean, small, and portable. Allow CSS selectors to manage presentation details. Nth-type selector gives you some more control then Nth child. Select ivizr allows you to use CSS selectors in IE and it works with a number of Javascript libraries.
  • CSS transforms allow you scale, skew, and translate images without going back to image editing programs. For real specific control, you can set the origin (location) of the transform.
  • What does browser testing mean when things are built for the capabilities of the browser? You can’t just check for pixel-specific layout. Previously, there was not as much variation in browsers. But now there is a lot capability differences.
  • We have a huge potential to design a lot of amazing stuff using CSS3 stuff now. Not just visual treats but fundamentally different designs across the browsers.