2013-04-09

HTML5 Grid Layouts


I have to take issue with the swarm of "responsive grid layout" systems that have been cropping up lately. Yes, they're great for wireframes and prototypes. No argument there. And yes, they take care of a lot of the legwork involved in producing a responsive layout. Great. But in the process, they throw semantic markup and separation of concerns out the window.

The idea of semantic markup is that your document structure, IDs, and classes should describe the content of the document. Separation of concerns, in HTML and CSS, means using classes and IDs to identify what something is (not how it should appear), and using CSS to identify content and determine how it should appear; this allows you to change content without having to change appearance, and vice versa: the concerns of document structure and appearance are kept separate.

That means, as far as I'm concerned, as soon as you put a 'class="two column"' into your HTML, you've lost the game. You've chained you structure to your presentation. Can you change your presentation without modifying the markup? Not any more. All we've achieved in this is bringing back the days of nested tables for layout, with a pretty CSS face on it. With one dose of "clever" we've traveled back in time 15 years. Only this time, there *are* other ways to do it. There's no excuse. It's just plain laziness.

Is building a truly semantic, responsive, attractive layout possible? Absolutely. Difficult? Yes. Is it worth the effort? In the long run, I think it is - except for those cases mentioned above, prototypes and wireframes, code that's meant to be disposable. But any code that has to be maintained in the future will be hamstrung by these systems.

Web development has made tremendous strides over the last 10 years. It's amazing how far we've come in terms of what can be done and how. Don't take all those advances and use them to regress all the way back to clunky old table-based layouts. Try using them to do something new, and interesting instead. There's no reason the idea of software craftsmanship should be missing from the web design world.

No comments: