Mark Boulton on layouts and grid systems

This article first appeared in issue 214 of .net magazine - the world's best-selling magazine for web designers and developers.

It’s time for a big, fundamental shift. For hundreds of years books and magazines have been designed the same way. The web, though, requires a different approach. We now view content in many ways on many devices. It’s a new era of online publishing that calls out for new rules, a “new canon”. This is the premise of Mark Boulton’s theory, which he outlined at the New Adventures in Web Design conference in January.

“Books and magazines have all started with a view to creating the best proportion of the content to the page,” says Boulton, creative director of small South Wales-based agency Mark Boulton Design, which also incorporates publishing company Five Simple Steps.

“The idea is a very mature way of thinking. It’s almost ingrained as a designer: this is how we approach layout. But we’ve tried to make it work on the web by basically inventing a page, like a best fit. We’ve created a page in a medium where there are no edges, there is no page. The web is different. So I’ve thought up three rules, which I think we need to apply to modern web design. It’s a complete reversing of the way of thinking about it.”

Boulton says we need to create layouts on the web that think for us, so we can be truly creative within them. But he’s not just talking about responsive web design. “In responsive web design the design responds to the layout that it’s in. I want to take that a step further. Not only should it respond but it should bind to it, which means that there should be a relationship between the content and the device you’re viewing on.” The three rules therefore are respond, connect and bind.

Sensing the environment

Responsive design is pretty much everywhere, Boulton claims. “It’s made up of a sensor, so something that senses the environment, a control system, which is something that takes that sensed information and does stuff with it, and an actuator, which is the thing that actually does it.”

Boulton cites his car as an example. “Most modern cars are completely full of responsive design. In my car, for instance, there’s a little light sensor that senses the rain and sees the density or raindrops and then tells the computer – the control system, which then tells the motors – the actuators – to move the blades. The same kind of thinking can be applied to web design. Your mouse movement on the browser or the device senses width and size, the control system is the layout system you design and then the actuator is the HTML and CSS.”

The ‘connect’ part is about creating more of a connection between site content and the way that it’s displayed. The display shouldn’t be arbitrary. “Web standards did a lot of good, don’t get me wrong,” Boulton explains. “But they put somewhat of a gulf between content and presentation. That gulf was always there to a degree but it means that content must be separate to the way it’s displayed technically. You have your HTML, CSS and JavaScript ... What’s fallen out of that is a separation between the designer and the content. Quite often the designer doesn’t know what the content is going to be in any depth, so we’re not designing content. We’re designing buckets, which the content goes into. But now there’s a big movement, a resurgence going on with content strategy, which is brilliant because it means that content is higher on the agenda of web design practice.”

Finally, you need to bind the content to the device and work from the content out rather than from the canvas in. This means you also need to define your grid based on the content. You do this by getting to know your content very well. “If you’re redesigning a site that’s been around for a long time, for example, you audit the content. You look for a fixed measurement on which to base your grid columns and this generally comes from image sizes because those are the most difficult elements to deal with, especially if a site is old. Normally we’d subdivide the 960 pixels that we’ve got to play with by 12. That’s canvas in. The other approach is to use the image size, for example 125 pixels wide, as our base size for columns and extrapolate the grid out from that point. Then we’ve got binding already! If you lay out text over three columns of 125 pixels, the content in those columns is visually related to the column of your image.”

Boulton will go deeper into the practical application of the theory in his book, A Practical Guide to Designing Grid Systems for the Web. While details are scarce, he reveals that he’s already used the rules to design the grid for a project his team is working on the moment. It’s going well but he’s encountered one big problem for the new approach: advertising.

Advertising in grids

“Advertising is controlled by somebody else and they’re universally fixed sizes. How do you deal with fixed size advertising in a grid? Maybe that’s the starting point for the grid but how do ads grow, expand and adapt to the different devices that you’re viewing them on? What about when the grid changes to a different size? Could we have text links, for example? The advertising strategy becomes more aligned with how the site is supposed to connect and bind to other devices, so the advertising should as well. I’ve started thinking more about what input can I have on what actually goes on the site and how the different advertising is pulled in depending on how the grid changes.”

Boulton explains that for desktop design, columnar grids are common (especially for blogs), for the iPhone it’s almost always single-column hierarchical; and for the iPad and similar devices modular grids are suitable. “On the iPad there are edges. So we can take a bit more of a traditional approach to designing the grid and use different transition states. For example, the New York Times app has a horizontal scroll instead of a vertical one. The layout is contained within the edges.”

Different devices and reading contexts determine the kind of grid system that you design. Boulton says you need to consider all of them for all the different contexts and not just stick to six columns at 960 pixels wide. That’s why his team is not really using CSS frameworks such as the 960 Grid System and Blueprint any more. “They’re great for prototyping but they produce very formulaic looking sites and lean you in the direction of even grids,” he explains. “I have a problem with them using even number columns. The majority of quite mature
grid system designs in print will see odd numbers prevail over even numbers. And that’s not just for print. Odd numbers prevail everywhere else, in architecture, for example. So you get a static looking layout that looks like ten thousand other 960 sites.”

Boulton also recommends designing a grid from scratch because it makes you more likely to go back and change it as you start working with it. If you’re provided a grid, on the other hand, you tend to look at it as fixed and leave the sizes as they are.

While Boulton is fleshing out the details for his book, his agency is booming. The small team is working on a (not surprisingly, grid-based) project for a big global news agency that’s been two years in the planning. Five Simple Steps, meanwhile, has got a whole range of titles in the pipeline, including Relly Annett-Baker’s Creating Web Content and Leisa Reichelt’s Practical Guide to Strategic User Experience. Another high profile project, The Icon Handbook by Jon Hicks, is also scheduled for the end of the year.

“We never intended to be a publisher,” Boulton laughs. “I just turned down a bunch of book deals to write my book Designing for the Web because I wanted to design it. That’s what I trained to do. And quite universally, web design and development books look like crap. I didn’t want that to be the case.”

Mark Boulton’s book A Practical Guide to Designing Grid Systems for the Web is out soon.