For this month’s edition of “Boring Technical Things I Write About In The Middle Of The Night” I’d like to talk about the new CSS3 Grid Layout draft specification.
IE10 Platform Preview
Well, I suppose I’m not going to get all that much into the technical details… mainly because they aren’t really all that important. The point is that Microsoft introduced support for a proposed CSS3 Grid Layout Specification in their recent release of the Internet Explorer 10 Platform Preview. As is often the case with updates of this sort, I read about it at Css3.info. The Grid Layout spec had been proposed by Microsoft and introduced by W3C only days before. CSS3.info has a short article on some of the recent module updates discussing it. No other browser supports it, but this will most likely change very quickly.
Support for developing websites in a grid layout is a big deal. Every design team goes through a brief moment of despair when they switch from their prototype or Photoshop layout and move to the coding stage. The neat little boxes sized and lay out perfectly in a wireframe seem to offer a quick path for creating sites, but it’s harder than it looks to duplicate a design template with current coding techniques. A lot of layout is currently done by CSS but it’s somewhat via workarounds, isn’t terribly intuitive, and is fraught with complications from various positioning interactions. Grid layouts solve this by giving a way to translate the rows and columns of typical wireframes into a position oriented codebase relative to the screen resolution the site will be targeting.
960 Grid System - 12 Column Layout
There are several frameworks out there to help designers create grid layouts with current techniques, most notably the 960 Grid System. Personally, I’ve been known to use the 960 Grid implementation in RocketTheme’s Gantry framework, for both WordPress and Joomla. In Gantry, the grid offers a quick and easy way to add content exactly where you want it and is extremely attractive for news or magazine style sites with a lot of content or article teasers to organize. I’ve used it in a corporate social intranet site and it’s a key part of the layout control in a marketing site I’m developing for a group of small businesses. It would have been very difficult to achieve the target layout without a grid, especially since I had to quickly change it in response to client feedback!
Microsoft is hoping to leverage the ideas and techniques developed by the design community into a single, cogent specification. Providing support for this improved spec will make their browser a more attractive target for web developers and increase the likelihood that Microsoft’s other technologies will be chosen to support more complex sites. It’s an arcane business proposition without immediate or easily tracked results that most folks don’t think about very often. It’s also a vital part of improving everyone’s experience on the web.
This is the new way web standards are introduced, tested, and finally enshrined as specifications. It’s not the way the W3C originally intended to operate, but I’m fairly certain it’s better than allowing them to spend years in academic debate hoping that someone still cares when they’re done. Ultimately, browser manufacturers are key to introducing and guiding new web technology. Without their choice to embody an idea in their rendering engine, specifications are moot. Without their design teams collecting feedback from real world users and adjusting their implementation of a spec, it can easily become detached from reality. Like much of our current web technology, CSS was originally introduced by Microsoft. The teams behind Chrome, Safari, and Firefox have repeatedly introduced new technologies well before any spec was ready, many of which support common design techniques today. Though Microsoft tends not to use it themselves, the CSS vendor prefix is designed specifically to encourage this sort of experimentation.
Incidentally, this also provides a good insight into Microsoft’s new commitment to driving web standards. Microsoft is dealing with a lot of challenges to their supremacy in key markets, chief among them may be browser support. No longer holding the majority of users, IE has serious competition from multiple fronts. After losing significant market share to Firefox, Chrome is expanding at an impressive rate among desktop users and Microsoft doesn’t have a large enough device presence to play into the continued rise of mobile browsing. With their position among users, developers, and the research community Microsoft has a lot to offer the future of the web… even if they aren’t the “new cool” nowadays. It’s good to see them stepping up to match their competitors’ zeal for experimentation and even their fervent development schedules.
