August 9th, 2005
Five simple steps to designing grid systems — Part 3
The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device. They’ve also dealt with grid construction for print media. Unfortunately, as designers for web media, we don’t have some of the luxuries as our print designer collegues.
Rather than go through tutorials (I’ll be covering these in the last two installments), I’ll be using this installment as a platform to discuss some of the challenges and rewards of designing grid systems for the web.
A whole load of considerations
Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size — the paper size (or packaging, poster, whatever). Let’s say a print designer has designed a magazine. The reader of this magazine can’t suddenly increase the font size if they find it difficult to read — well they just move it closer to their eyes I guess. This is just one consideration, there are more but I’m sure you get the point.
So, that’s media size. On the web you have other considerations such as the browser, the OS platform, the screen size and the actual devices that web sites can be viewed on, from PDA’s and Mobile’s to assistive technologies such as screen readers. How do you design a grid for all of this? It’s a really good question and I’m not claiming I have the answer.
In an ideal world
We all know about the problems with websites rendering differently across different browsers, platforms, devices etc. But, just for a moment, let’s forget about that.
Designing a grid for the web should not be difficult, in fact, it shouldn’t be any different from designing a grid for an media. As discussed in the previous parts of the series, you can construct a grid in the same manner for screen as you do for print. Base it on ratios, experiment with form and white space etc. Use pixels as your base measurement and go from there in the knowledge that your design will look exactly the same in every browser. After all, you, the designer, knows best for your reader right? You know they want light grey, 10px verdana with a measure of 600 pixels.
In the real world
Good designers for the web know that the users who use their sites may want different, and know, with the web, they have the power to change things. The designer has lost, to a degree, the ability to control. For a lot of designers (including me), this has been a tough transition. We’re taught for years to create the delicate balances of white space, the manicured typography and delicate colour palettes, all designed to create harmonious designs which do their job very well.
Then some short sighted user comes along and increases the text size… and… and… totally breaks your design.
I think you get the idea. We can’t be upset when the user wants to change something like the text size. What we can do is design grid systems to adapt to those changes.
Not just columns
Over the past couple of years, coupled with the increase in CSS based sites, we’ve seen a rise in certain grid configurations which are all based on the amount of columns. 2, 3, 4 column layouts — float this, position that etc. Why, even this site falls into the ‘750 px, 3 column’ category. These grids have quickly become a convention, and for good reason too. They are quick to create, fairly stable across many platforms and don’t degrade to the same degree as table based layouts. This is all good. What isn’t so good though is the general lack of understanding of grid systems when perhaps the question on most designers lips when they sit down to begin a design is, ‘how many columns should I have’. This is not grid system design.
Grid systems for the web
The next two installments of this series will go through details of creating considered grid systems for the web and the implementation using CSS. I thought it would be useful to just go through some of the considerations before hand.
The series
This is the third installment of this “Simple Steps…” series.
- Subdividing ratios
- Ratios and complex grid systems
- Grid systems for web design: Part 1
- Grid systems for web design: Part 2 Fixed
- Grid systems for web design: Part 3 Fluid
Mark, I’m looking forward to it.… Great article indeed.
Yup, me too.
That print nonsense means nothing to me—I can barely print an invoice let alone do anything creative on paper but this, this is looking very interesting! :)
Great articles.
I would suggest though that you toss in links to your previous articles. I just found this today and part 1 is going to fall off your list of recent articles soon. Maybe a little summary “In Part 1 we talked about…” This way I don’t have to go hunting for the previous pieces when they fall off the list of recent articles. It may also be a good idea to create a “Series” category to make it easier to follow series of posts… assuming you plan to do more (and I hope you do).
Keep up the good work!!
Adam — Tis done. Thanks for the heads up. I did do this for the previous ‘Simple Steps’ series but it slipped my mind on this one. Like you suggested I’ve also now got a category for all these articles.
Thank you very much for your efforts, this is very good reading.
Like the rest of the readership here, I too hang on your every word. I’m looking forward to the upcoming CSS grid tutorials!
Thanks Nathan. Pressure’s on for these next two articles eh? I’d better get my facts straight!
Far too much praise here for my liking.
Not much content here to say much about; hardly an article. But a few thoughtful points were raised: the web is not only the ultimate democratizer for information, but it’s starting to be that for visual design (with RSS, databases holding info, google caches, etc).
This lack of control seems to be OK with many, but the designer’s task is to shape information; we are the facilitators between content experts and the layperson, people rely on our experience to be able to control the flow of information so that people will better understand it. Releasing this control is harmful to the information and the reader as some things will be lost in translation. After all, we’re now familiar with the content and can make sound decisions about placement, size, color, pace, tone, flow, etc. How can someone uninitiated to the content make reasonable decisions about this? I just don’t buy the ‘designers should let go of control because we’re on the web now’ argument; it’s not based on any sound footing from the content’s perspective.
Also, the learning curve to publish on the web is very low compared to print; this has created a very large population of designers that have no foundation in size & scale, pace and position. Enter template and copy/paste xhtml code design.
Thankfully there’s a core of people interested in pushing the bounds of the *visual* (not simply xhtml/css code).
dmr — My point with this post was to raise the questions, not to answer any really.
I think you misunderstand my points though. You said:
Let me answer the first question. Why should the user care how the content is arranged as long as they can access/read it? Maybe that’s the reason we have so much ‘undesigned’ content on the web. It’s because people generally don’t care as long as they can fulfil a task or read some content. They do not have to be ‘initiated’ to read what they want to read.
The second point. If you read the post again, my point was more about scalability, not control. I’m not sure I understand your point about content in this context.
Also, I disagree with your point about web/print learning curve. After doing both for many years I’m still very much on the curve for producing good design for the web. This, I guess, is due to it’s fluidity as a medium — you don’t really get that with print. Also, the majority of print work isn’t used in the same way web sites and applications are. And that’s the point really. I’m not just talking about text based websites here, I’m talking about applications too.
Content is key. As designers we should ensure that the content is available to as many people as possible. Surely, it the role of the designer to adapt their skills to allow for this level of flexibilty. A default design may still be created, but if this design crashes simply because a user wants the text size a bit bigger, then the design is flawed. The beauty of designing with standards allows for flexibilty: alternate style sheets, high contrast views, zoom layouts etc. Therefore, the designer should not just let go of the control, but actively hand control to the user. Thus a good web designer, you may come.
^^
I stumbled upon your article while looking for info on grid systems (I’m redesigning my webpage). I can’t wait to read the end! You’ve posed lots of wonderful questions in a very coherent, readable fashion.
This is fantastic. I have only recently become aware of grid systems but I always knew there was a methodology behind layout.
I primarily deal with the web so Im looking forward to your next two articles.
[…] of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]
[…] of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]