Gadgetopia

MBoffin.com did something really cool while redesigning his blog. They made a ‘design timeline’ while working on his latest site design. Every time the designer saved the site, he took a screencap, and turned it into an animated GIF. He’s imbibed the ‘presentation separate from content’ Kool-aid, so you can see how he starts by coming up with some markup and then plays with the stylesheets until he gets something he likes.

I really like the results. It gives me a good idea how the design progressed. While watching, it also made me stop and think about the changes I was making in relation to the design as a whole.

This does a really good job of focusing a notion I’ve had floating around in my head, which is that CSS sites are not so much constructed as they are grown. Under the old ‘tables-and-spacers’ approach to layout, I’d tend to get the header exactly right, then get the menu exactly right, then move on to the content, and etc.

With CSS sites, by the time I start applying the style to make the site look like what I’m after, the markup is nearly all there, if not completely finished. The site is already there, and it ‘grows’ into the final design as the CSS develops.

This separation of tasks is pretty liberating, since I’m not dividing my attention between graphics and HTML. I think the result is ultimately that I do a better job with both content and presentation than I did with either before.

Paired with snapshots of the markup and CSS, and some sort of interface to browse them all together, this would be a great way to teach people how to design a site using standards.

Via Chris Pederick, who the world owes a beer for his Web Developer Firefox Extension.