In this day and age you’d think standards was the assumed approach for all web agencies. From my experience, hardly so. Only last week I encountered two appalling coded sites via potential clients. One using tables for layout with no meaningful ALT text for images, the other a single image in a page with no text behind it (a 100% wide image too, which technically would work on an iPhone or iPad but be pretty much unreadable to everyone!). Both of which were from companies who claim to build websites as part of their professional services.

After following tweets from what sounded like an excellent An Event Apart, I heard about Eric Meyer’s talk on using media queries to deliver specific CSS depending on the device width or orientation. This means it’s possible to create flexible layouts for desktop and mobile simply with CSS (i.e. switching between a three column layout for desktop and a one column for mobile). Another great reason for using standards when developing for mobile or the iPad.

You can find out more about device orientation on Peter-Paul Koch’s site. There’s a summary of Eric’s talk over at Luke Wroblewski’s blog.

The workshop itself was a fascinating delve into the current state of HTML5 and the various CSS 3 modules, including what you can do today with these emerging technologies. The morning, led by Jeremy, was a vibrant exploration of the state of HTML5 (no space), its complex politics and the encouraging news that everyone appears to now be working together to get the latest version of HTML agreed.

It’s my first direct experience of HTML5 and I’m glad to say I like what I see. HTML5 has a bunch of interesting semantic tags like <header>, <nav> and <time> and clever form input types such as calendar, email and website. However, a few of the semantic tags confusingly seem to do essentially the same thing like article/section and aside/figure. The solution, presumably, is to trim the unnecessary ones. Deciding on which should go is the tricky part.

Although Jeremy explained a few ways you can use HTML5 today (use its simple doctype, the tags with a JS fallback for IE, or simply use the tag names as class names) there’s not a lot you can use on production sites today. To be honest, it’s much the same for CSS 3 though that has a little more support in modern browsers. However, the development process at WHAT WG seems really open, anyone can join the mailing list and talk in the IRC channels. So if there’s something you don’t like, just speak up. This is the biggest thing I took away from the HTML5 workshop: if you’re interested in the development of HTML, then get involved.

CSS 3 was really interesting, with a range of mad new possibilities eagerly explored by Natalie and Richard. Many of which you can use here and now (if you’re not worried about IE). Some of the new selectors (nth-child and other selectors verging on regular expression matching) and features like curved borders, multiple background images and layout modules are very interesting and offer exciting possibilities for the future of web design. The Template Layout module, especially, was really interesting. Totally theoretical at present, but a way to define blocks of horizontal and vertical columns that you assign content to and allegedly will just work in the browsers of tomorrow.

Most of the examples, although often theoretical or little-supported at present, seem to make our job building websites easier and more efficient. Things that take many lines of code today are either one tag or smarter, more elegant CSS rules. I welcome the day most modern browsers support this be it 2, 3 or many more years away.

I’ve been wanting to reboot my personal blog for some time, though always seem too busy with client and project work. Before dconstruct I registered the new domain (simonrjones.net) and yesterday afternoon in the accommodating Cafe Delice I managed to cobble a design together to update WordPress from its default settings. And all without a single image.

I have to admit I only experimented a little with CSS3 and didn’t delve into HTML5. The main reason is I wanted to use our new CSS Starter Kit which the team have developed in-house to help us with new projects. And that, of course, is good old practical XHTML 1.0.

As Natalie wisely said in the workshop, when using CSS3 “only add what you can afford to lose”, so I basically constrained myself to the following CSS 3 magic dust:

border-radius

a wonderful new tool, used for the curved search box, nav rollovers, and the secondary content box

nth-child selector

used to grab the second para in the footer and indent it

box-shadow

the box counterpart to text-shadow, used to give an inset shadow to the search box and a drop-shadow to the search button (changing to an inset on active, i.e. mouse click)

Needless to say a lot of this doesn’t work on all browsers. Support is a bit sketchy with Safari and Firefox leading the way. For my experiments above a quick summary of which browsers support this progressive enrichment appears below.

border-radius

Supported: Safari 4, Firefox 3.5

Not supported: Opera 10, IE8

nth-child selector

Supported: Safari 4, Firefox 3.5, Opera 10

Not supported: IE8

box-shadow

Supported: Firefox 3.5

Partially supported: Safari 4 (can’t handle inset shadows)

Not supported: Opera 10, IE8

If you want to get involved head over to the WHAT WG site, read the spec or join the mailing list, check out HTML5 Doctor and HTML5 Gallery. For CSS try CSS3.info, W3C and CSS compatibility guide.