WebDD07: Doing it in style (Patrick Lauke)

Review: Doing it in style: creating beautiful sites, the web standards way at WebDD Conference 07 10:40 to 11:40

Patrick started with an explanation of web standards, what they are and why they're good for you. The list of benefits he gave were fairly standard, but it's always worth reminding yourself:

  • Lighter code - your HTML content is more lightweight as it doesn't contain repeated copies of your presentation code
  • Ease of maintenance - when HTML is structured semantically it's much easier to make updates without breaking things than in pages built with five levels of table nesting
  • Easier to change look and feel - because your look and feel is defined seperately from your content
  • Multiple output media - handheld, print etc. from the same content
  • Accessibility - reduce the number of potential customers who can't use your site
  • SEO - increase the traffic to your site

The second section of the talk covered common pitfalls that CSS noobs fall into (been there, done that was my reaction to most of them, though I'm probably still guilty of some of them on occasion):

  • New technology, old habits - the font tags have all gone, but they've been replaced by spans with inline styles
  • Meaningless content - the font tags have all gone, but everything (including the headings) is a paragraph with an inline style
  • Non-semantic class and id names - people often assume that class and id attributes are just there to hang CSS rules off of, but in fact they are an independent part of the HTML spec, they are a way of adding semantic value to your markup so don't use class names like 'red' when you mean 'important'
  • Classitis and Divitis - adding unnecessary classes and ids to every element in your document when you could just use CSS selectors

The third section of the talk was the 'advanced' part where Patrick moved on to some specific CSS techniques. First up he covered tables, pointing out that the goal of standards based developers isn't to eradicate all tables from their markup but to use tables properly. A rule of thumb: if your data is the sort of thing you would lay out in an Excel spreadsheet, then you should probably mark it up as a table. Tables are an excellent way of showing data relationships and screen readers have built in functions for navigating across rows and columns, when designers build 'fake tables' out of divs and spans then you lose these good properties. These are good points, but I think the whole thing hinges on what your definition of 'tabular data' (or 'Excel-like data') is - my excuse for building 'fake tables' is when I want to lay things out differently on different devices (ie. on a web screen 7 columns and 4 rows, on a handheld device 4 columns and 7 rows, or even just a single column). This section also had some useful examples of the scope attribute as well as th in relation to thead and tbody and how it can styled, stuff which I'd not really appreciated before.

Next up were a number of techniques for 'fluff images' - using CSS background images instead of cluttering up the content with images which are purely presentational followed by a quick demonstration of the sliding doors technique. The talk was already running pretty late by this point so the section on image replacement was rushed through and I had to leave for the next talk I wanted to attend as Patrick moved onto forms, so I missed that, the layout portion and the conclusion.

The presentation was given in an engaging manner, and Patrick clearly has a very deep understanding of his subject, but the main problem was that he was trying to fit enough material for two talks into one hour of presentation. This spoiled a lot of the more advanced stuff, which was my primary interest, because it had to be rushed through. I still learned several useful things, and was given a few timely reminders of stuff I ought to know already, but overall this was the most disappointing talk of the day - 3 out of 5.

Technorati tags for this review: