Flying into my home city of Tucson, Arizona late one night in November, I was impressed by how rigid a grid the city’s layout is. Tucson is one of America’s planned cities, and from the sky, it’s easy to see that Tucson’s designers succeeded in creating a city in which everything is laid out according to a precise plan (figure 1).
Figure 1
I was returning home from London, which in contrast is far from a rigid grid. London is spirals, circles, tangets, and is often seemingly spontaneous in its design (figure 2).
Figure 2
Because I’d been thinking about this article for some time, the aerial view of these cities struck me as an apt metaphor for grid design on the web. With today’s technologies and techniques, we are free to create grid designs—or we can choose to break out of grids completely. That such choice can empower a web designer is unquestionable: the true challenge lies in the way we bring ourselves to “lose small mind” and think outside the grid.
Sense and the city#section2
If we extend the urban-planning metaphor to web design, there are very interesting parallels. Grid-based design can be extraordinarily useful in creating sites that are predictable, easily navigated, and visually appealing. Grids are really good at helping designers to plan where things go, and easy for site visitors to use (figure 3).
Figure 3: Ryan Brill
On the plus side, Tucson certainly is easy to get around in; you needn’t have much more than a basic sense of direction or a street map. Residents provide directions to their homes by giving cues based on the grid: “I’m at the southwest corner of Campbell Avenue and Prince Road.” Public roadways and transportation typically run north to south or east to west, making it easy to navigate the town.
On the other hand, Tucson’s designers planned for only a certain amount of growth, and this has caused innumerable problems in maintaining the city’s ease of navigation and usability as the city grew beyond its planned limits. Furthermore, the constraints of Tucson’s grid do not encourage the emergence of alternative neighborhoods and communities. Many residents of Tucson will agree that the city lacks a vibrant center—or many unique communities—as a result, and that when those isolated spots do exist, they’re easy to get to, but people aren’t motivated to get out and find them.
London, unlike Tucson, is a maze. I know Londoners who carry around a London A-Z guidebook to help them navigate! The city’s transportation system is so challenging that would-be cab drivers must pass a test demonstrating that they possess “The Knowledge” in order to drive traditional black cabs. The city’s organic growth hasn’t exactly made it the easiest place to navigate.
But in London, wonderful enclaves and interesting areas have emerged and neighborhoods with distinct flavor exist everywhere—and it can certainly be said that there aren’t just one or two central areas of cultural, community interests, but many. While navigation is perhaps more difficult, there are more alternatives, and people are therefore more motivated and able to become involved in the city’s offerings.
When examining deconstructed and spontaneous designs, the metaphor persists. How are people to navigate spirals and winding alleyways with ease? On the other hand, compelling visual work can result from breaking out of the rigid system that the Web’s design and development environment has, to date, retained. In figure 4, you can easily see how breaking down the rigid confines of grid layouts challenges designers to maintain ease of use while creating designs that look different from what we’re so accustomed to seeing.
Figure 4: AIGA Los Angeles
Coding the grid fantastic#section3
It’s fascinating to me, as a person who tends to be a bit more code-centric than design-capable, to see how cemented to code our designs have been. I believe it’s been the constraints of the table-based layout that have kept us in visual gridlock for so long (figure 5). Add that to an only-now emerging understanding of CSS layout and it’s easy to figure out the reasons why.
Figure 5: k10k
Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design (figure 6). If we do create a deconstructed or spontaneous design with any visual complexity, we have to use a lot of images within the document to achieve the results, making documents weighty and overly complicating the markup.
Figure 6: Weightshift
There are some advantages to table-based grids, but, as with the urban-planning metaphor, a strength can also become a weakness. Table-based grids allow us to ensure that all the cells within it work in tandem. Want all columns to stretch to the same size? We don’t even think about how—it’s the natural behavior of tables. Want to apply even spacing between cells? Again, it’s a no-brainer. Of course, what if you don’t want this one-size-fits all result? The answer is a painful one: you can’t have it.
CSS changes all that, and this is why I theorize, along with many others, that we’ve not yet learned to design for the web. What we’re just beginning to understand—particularly those of us who come to CSS layouts after years of working with tables—is that the visual model for CSS is far more conducive to breaking out of the grid and designing for discrete, semantic elements. Perfect, no, for despite the gains made possible by CSS, we lose things too. Stretching columns is a decidedly problematic issue in CSS design, and cell spacing is too.
The CSS visual model is all lines and boxes. That’s the stuff of grids, right? Well sure, if we want it to be. This is where the fundamental difference is. CSS allows us to take a box—any box—and do with it what we want, independent of its surrounding boxes (Figure 7).
Figure 7
We can use a position property or float the box, and we can add lightweight images to element backgrounds. So while we’re still working with boxes, we can present those boxes in numerous visual as well as technically efficient ways. This includes grids, but also allows far more efficient creation of non-grid designs, as you can see in Dave Shea’s Blood Lust, one of the designs he created for the CSS Zen Garden (figure 8).
Figure 8: CSS Zen Garden: Blood Lust
Figure 9 shows the boxes that created the deconstructed grid design for Blood Lust, again demonstrating the way CSS allows us to create deconstructed grids using boxes that are related to, but independent of, one another.
Figure 9
As long as we understand what we can do to or with a box, our ability to break out of the underlying grid that’s held us captive for so long becomes far clearer. Consider this design (figure 10), which can be considered highly deconstructed, even spontaneous:
And the underlying boxes positioned using CSS:
Figure 11
Not only has the underlying markup become leaner, but the CSS is downright easy for any designer familiar with CSS layout. Yet, the presentation on-screen is unusual and rich, and shows that a non-grid design can be compelling and usable, too.
Into the great wide open#section4
The beauty and challenge of working with modern layouts is that now we have options. With CSS, we have a means of creating manageable, lightweight, visually rich designs that can be grid designs if we want them to be. But we can also easily deconstruct the grid or dispense with it entirely.
This opens up a world of opportunity for the contemporary web designer. But the remaining challenge is to think in terms of these options rather than falling back on grid designs just because they’re familiar.
For those of us coming out of years of table-based layouts, the challenge is an especially difficult one. For many veteran web designers, changing the way we think about presenting our content without tables means shifting out of the underlying system we used for so long. For some, this comes easily, but for the vast majority of us, it’s difficult to make the leap. Part of the answer lies in educating ourselves about the way CSS and browser models work, but part of the answer lies in being willing to leave conventions behind.
There is a new kid on the block, and her name is “I’ve never designed with a table in my career.” To her, our old ways often seem strange and confining, and it is within this generation that we will most likely see more departures from what design conventions have emerged in the past decade.
The web is maturing, our approaches to it changing, our opportunities for innovation and creativity more apparent than ever before. We’re not limited to a planned city; we can create unique designs and have them work well. As a combined force, the empowered veteran and today’s spontaneous youth inspire a provocative notion that the way the web looks today is nothing like the way it’s going to look tomorrow. And for the most part, I’m sure you’ll agree that’s a very good thing.
Related reading#section5
The author would like to credit Mark Boulton’s grid-system articles and the book Making
and Breaking the Grid by Timothy Samara, Rockport Publishers, 2002.
Well, I don’t have as much experience as you guys, but in the past I’ve made few websites using table layouts. In fact I’m really happy that I’ve made them. Now I know how much code I had to write using tables for my layout and I appreciate the new technologies and their advantages more than ever. So I don’t think those designers/coders that haven’t made table layouts are in better position.
I get the message and agree but come on, leave k10k out of it. They’ve done more for the promotion of unconventional and inventive design than just about anybody.
Come on.
Come oooon.
Although I tend to agree with most of Molly’s ideas, I will have to argue the point. Grid systems came about from print-based layouts and for decades designer have used the most optimal way display information and easiest to read. The positives of using grids are also similarly relevant to the web, a very dynamic one at that.
Stepping out of the grid design/approach is not a new one (e.g. David Carson). But I personally find that the more I try to step out of grids the more I feel the need for them. I suppose the only real difference on choosing grid or grid-free designs is really content based.
You carve the design out of the content, as Michelangelo carve his art from each stone differently.
Definitely good advice, but I rarely see any of my off-the-beaten-path designs get past the comp stage. It’s usually best to innovate within a box – that is, make designs intuitive by adopting common trends. Readability and usuability are king because content is king.
As a side note, I’ve recently been helping out a friend starting out with XHTML/CSS. Thanks to things like absolute and float positioning its a lot easier to “think off the grid” these days. He will never know the horror that is 6-layer nested tables.
Yay for SOAD lyrics 😉 I immediately put Aerials on and started reading, and what a blast.
The time for innovation truly is now, more than ever. Fortunately, sites like the Zen Garden really boost creativity.
Rob: it’s true that a lot of those “un-grid-like” designs don’t get past the comp stage, but it’s becoming a more common occurance at least, and that’s good.
Would it be good if every site out there suddenly redesigned into something that doesn’t have a grid layout anymore? Quite probably not, because as confining as they can seem, the grids serve their purpose still to aid legibility and navigation. Those are important things as well.
Breaking out of the grid without losing usability in the process is just so much trickier, but with a new generation of designers approaching who never touched table-based layouts, I’m sure we’re bound to see some very good sites do just that.
Thanks, Molly, it’s good to see this subject discussed.
I suppose rectangles in seeming disarray give us the creeps or the delicious chills because of our unconscious attempts to fit them into the grid that’s not there or nearly not there, a visual dissonance.
Even so, the examples you offer of pages that break the grid are still composed of rectangles in various arrangements. The page layouts that really grab my imagination these days are the ones that lean on diagonals and curves. They’re not appropriate to all content, of course, but I love coming to a page that draws my eye not simply down or across or jiggedy-jag in stairsteps but in a graceful spiral section or oblique angle or with some of the fractal complexity of natural shapes. Especially when this is done simply & elegantly with web standards intact, it’s exciting.
I heard you hint about this notion that we older web people are relying too much on a table-based structure in June in London, and it inspired me. Since then I’m explaining it a lot, and be assured that this URL will be circulated.
Thinking outside the grid is exactly what CSS are very good at and tables aren’t.
An interesting read, but it seems like a bit of a solution in search of a problem.
Grids have been with us for a long time, not just in web pages but in newspapers, in magazines, in books. Heck, look at medieval manuscripts and you’ll see grids galore. It’s gonna take more than CSS to overturn all that. Nor should it – grids _work_, and for the majority of us less-than-stellar designers the alternatives don’t. Does nobody else find Molly’s non-grid examples scrappy and confused?
That’s not to say that it isn’t great that CSS empowers us to, ahem, think outside the box. I know there are some talented people out there who will use this freedom to produce some great designs. But we mortals should be careful, just because you _can_ do something, doesn’t mean that you _should_…
Where you give examples of “thinking outside the box”, I can’t help but notice that the only one with actual content is completely and utterly unuseable. I believe I read somewhere that the human eye is very good at looking for straight lines and grids – why should we deny it this by trying to be innovatice?
It’s about what most clearly communicates a message in the most readable fashion possible. I find many of the “outside the grid” designs I see to be difficult to read and distracting. Like others have stated, there is good reason why grids are so common.
Nice article.
The kind of layouts the author advocates are good and have their place. But grids are used much more often, and if anything, I’d like more support for grids in CSS.
Personally, I’ve never seen anything wrong with tables – perhaps if Netscape had called them ‘grids’ they would have been more accepted? The amount of hassle I have to go through to implement multi-column layouts, footers and all the rest of it with the box-based CSS is just ridiculous.
The timing of this article is impeccable. As a designer/coder since the days of simpletext, I completely connect with what you are saying about veterans being able to break the grid and create successful designs.
I do agree with some of the other readers’ comments that the grid is in use broadly for a reason. I think that as long as we maintain that the goal of any project is to solve a problem, how we solve it is open-ended, grid or no grid.
If the design is good, the markup well-written, and the goals reached, the project should be deemed successful.
I’ve found that the more mature the web and its technologies become (specifically CSS), the more I return to a grid-based design. 99% of my work involves getting huge amounts of information to the reader in an easy to follow manner, and the grid system works perfectly for such a thing. What you didn’t mention was The ONION. There is so much information on that homepage, and it’s all rather easy to find, thanks to a rather complex grid.
The biggest hindrance to pure CSS layouts still, I think, is MSIE. Tables provide a layout mechanism that is more or less consistent across the various browsers, which is a lot more than can be said for the CSS box model. This is too bad since it would be nice to have both options available.
I am opposed to using CSS hacks in order to trick MSIE into rendering the page correctly because I do not like how it makes my code look. As a result, sometimes tables are the only way to achieve the desired layout and compatibility without resorting to hacks or conditionally included CSS, though I tend to prefer using the latter over the former in a PHP environment where I can check the browser easily and just include a second CSS file if needed.
The widespread adoption of pure CSS layouts is highly dependent on MSIE getting some semblance of correct support. The incorrect box model and the complete lack of certain tags make it incredibly and sometimes prohibitively difficult to avoid using tables for structure. Until then, the majority will continue to do it the tried and true way and many of the people entering for the first time will adopt this approach as well.
Fritz: The two or three times that I’ve tried to create (or modify) a table-based site, I’ve become increasingly frustrated trying to get it to behave. CSS may not be the most natural thing either, but once you learn to love negative margins and other more sophisticated techniques, things like getting full-height columns become a piece of cake.
As to the article, I find my _base_ designs sticking to pretty standard column-based stuff. But I just love the adornments made possible by positioning and other tricks. For example, “christmas”:http://tron09.com/?special=christmas and “halloween”:http://tron09.com/?special=halloween at a community site I oversee.
Nice article and great point of view. However, before diving into non-grid design for web you should ask yourself this: How about usability?
In my many years of experience making graphic and web design I’ve defined what the I call the graphic design constant which is the queen of any layout is its contents. In other words, there’s no use for a design where the viewer can’t get the information he/she is looking for.
So, by using the same author’s example, London and Tucson urban layout. It’s harder to the user navigate on a London type website, although it looks nicer. I am not saying that we shouldn’t go crazy sometimes and create unique layouts, but we always have to consider the client’s needs and the user’s experience while navigating a website.
For example, if an user surfing a non-grid layout website asks, where the heck is this company’s phone number, something is not right in your design. Therefore the website is not promoting the company’s brand/services/products very well, and finally they’ll have to redesign the website. Probably the client will hire another designer to do it, and there’s no need to say that’s not good.
So, why not to choose the path between these two paradigms? That’s usually what I do, and it works like this. On any website the most important part is the navigational system, Because that’s the area where all the information is indexed and displayed in topics. Then we should consider two things, where and how to display the options within the navigational system?
My formula is to use a good css driven menu and Gestalt. The css menus are great because the users are used to this way of navigating through their desktops and applications. Furthermore, it’s reasonably easy to develop css menus and there are a lot of examples here on ALA and all over the web. However positioning the menu is the key of a successful design. Gestalt theory says that the best places to lay the most important things of a design is a little bellow the top/right and top/left corner of a page tending to its center.
Now we have all the topics visible and not more than one click away from the user we can design the way we’ll display the contents. Here we can do pretty much whatever comes up to our minds eye. The only rules we have to follow is the ones laid down by typography. For example, not to use small serif type on screen, to control kerning and tracking, and so on. There are a lot of great books on this subject you can look for help.
This formula has proven itself as very effective along the years I’ve been applying it. Designing and developing a website by these rules is quite easy, and when clients see the results coming from the website (i.e. more consumers and closed deals) he/she will certainly come back to you looking for more graphic design solutions.
you said:
‘There is a new kid on the block, and her name is “I’ve never designed with a table in my career.”? ‘
…that sounds all too familar. 🙂 I seriously haven’t built a table based layout since I left school.
I will admit I do find myself creating grid like websites more often then not. When you have to comply with Section 508 standards something gridlike and predictable is just easier to use for someone that has to rely on assistive technology.
Although for personal sites, that do not have a ton of content…I love drawing outside of the lines.
I enjoyed the article.
I think that like everything else in this world, there is a time and a place for it. This should not be attempted in every project, but can be implemented where appropriate.
While I like designs that break away from grid-based layouts, I had a horrid time trying to figure out where anything was on the non-grid examples given. Breaking away from a grid doesn’t mean we have to make everything into a horridly confused mess, although the examples would imply that.
To be fair, I found the AIGA example to be painful as well, since there’s absolutely no way to tell where the actual content is.
When thinking about the history of the grid in print design, you must remember that until the widespread use of photo-offset lithography, it was seriously difficult to impossible to mass produce anything other than a rectangular design.
Look at the changes in mass-media design since the first half of the 20th century. Everything from use of more color and illustrations (including color photos) to the wide variation of type styles has happened because of this technological change.
I believe the same kind of profound design change will happen on the Web, in this case due to CSS. Compare some of the designs on showcase sites like screenspire.com with older sites. The grid has often either disappeared or has been so buried as to be unrecognizable.
This is going to sound random, but this line in your closing paragraph reminds me of a quote from the cheezy movie Ninja Turtles II:
“As a combined force, the empowered veteran and today’s spontaneous youth inspire a provocative notion that the way the web looks today is nothing like the way it’s going to look tomorrow.”
The movie quote was from Splinter to a young man named Keno, when he wanted to rush off and help the Turtles fight the bad guys. The line went something like this:
“You have youth, I have experience, but only those who now fight have both.”
Hopefully that’s not too unrelated. My point is this: I think it will be important for those of us who have come out of the table background to continue to teach the upcoming generations how to design with CSS.
I guess I feel a bit nervous that because CSS is a more difficult learning curve, and Wizzy-Wigs make things point-and-click easy, people will continue to be taught methods of the old paradigm. This is especially true in higher education, where the teachers may not be on the innovative cutting-edge, and can’t be bothered to change.
While I hope curriculum will evolve to reflect modern methods, I am sure that there are plenty of tenured professors who could care less, and just want to do the same-old, drawing a paycheck. When I was in college, I asked a professor about CSS-based layouts, and the reply was: “Oh, I’m not requiring that for this class!”
So, I just bought an Eric Meyer book and taught myself. I guess I just want to make sure that the next generation is afforded the opportunity to learn things the right way, so that we won’t continue to see developers who justify table layouts with: “This is how I learned it in school!” Let’s continue to push for CSS and combat mediocrity at the university level, so that one day it will simply be the de-facto standard.
Molly, there are two big problems with this article. One, there have been many tables-using designers who created designs breaking the “grid” (or rather table, as grid is not really what you’re talking about in your article) – that is the first and biggest misconception. You can’t just write an article based on something that is not true, even if you want to believe it. Two, the layouts you presented as the ones breaking the grid are not even breaking it. Maybe you wanted to say “layouts breaking the table”. I think you should read Mark Boulton’s articles once again and learn from them. Because you clearly have lacking information on grid-based designing. In addition your diagrams don’t illustrate grids, they illustrate tables – or rather “frames” (not in the html meaning).
With that said, I understand what you’re trying to say, but I don’t understand why untrue statements have to be used in order to support it.
I’d like to have citation URLs for more of your examples. Specifically Figure 6.
I think the city planning analogy was interesting, but would like to point out a notable difference between places.
Grids in city planning are a rational choice to alleviate traffic congestion – when one major artery becomes blocked by construction or an accident, one street on either side of the major route provides a bypass.
A city like London has a high population density where most of its citizens can get around by large scale public transport: tube, train, or walking – largely independent of automobiles and less confined by a road map.
In most North American cities a majority of people rely on automobiles for day to day transportation, confined by the road map – and the grid is the most sensible design for this. Having a London city layout in a city like Tucson would cause widespread congestion.
Relating to design: the grid provides the most sensible and rational way to direct traffic. Whether that’s a city or a website, you can’t advocate using one or the other without considering who’s using it, and how they are going to use it.
In the web the grid makes it more navigable and legible. If you know you’re audience are web savvy you might depart from the grid for original appeal; however, you decisions on how to design should be user centric.
As always, the impeccable Molly has impeccable timing. For those wanting more CSS controls to enable grids, see the very early working draft of “CSS3 module: Multi-column layout.”
http://www.w3.org/TR/2005/WD-css3-multicol-20051215/
This is one of HÃ¥kon Wium Lie’s modules and he’s open for comments. This is an ideal time to let your voices be heard so you can get the column control you want.
Then, we can use it to make interesting places, even if they are layed out like Tucson. 🙂
“the constraints of Tucson’s grid do not encourage the emergence of alternative neighborhoods and communities”
What the heck does that mean?
I am glad that someone has written about the very concept that I have spent the past two years on trying to do. It has been hard to break out of the old mindset and create new ideas. I have only recently developed a layout to break out of the grid layout. It uses newly support CSS a lot to achive the results.
I’m not so sure that the problem is one of too many designers using grids. I think it’s actually the opposite problem. So many designs seem as though more thought has been put into the “oh-my-god-can-i-get-these-divs-to-line-up” phase, and not enough into the actual design process. How many designers measure their target page width, then divide that number into columns and margins? How many stick to those measurements reliably throughout a site?
Thoughtful grid-based design is a thing of beauty. The AIGA Los Angeles site is most definitely a successful design because of the very fact that it honors its grid.
There are a handful of sites out there that are completely free-form and do so effectively. Unfortunately, they usually consist of a simple HTML page with an enormous Flash file in the middle. In the interest of learning the rules before one breaks them, I can only hope that more designers emulate (emulate, not duplicate) sites like “Subtraction”:http://www.subtraction.com/ or “Ryan Brill”:http://ryanbrill.com/.
Molly got it right. Table layouts are confining. CSS layouts allow grids, but don’t confine you to slicing and dicing, or fitting elements into the grid inside a table layout.
Your grid can be in the background, where it belongs. Images can be attached to the background of any element, breaking the grid, yet related to it. Both absolute and relative ositioning allows much greater flexibility.
All we need is browsers that fully support CSS (sending off a little prayer to you know who). With any luck, the work that Molly et al have been doing will bring that about sooner rather than later. You go, girl!
As many others pointed out, the article touches some interesting issues, but spreads too much confusion.
Spatial relationship between discrete visual elements is one of the key elements of design.
Wheter or not you use a grid system for assistance in designing your layout, you just create spatial relationships, seeking for whatever effect (harmony, balance, scanability, or why not disorder, noise, disturb) you think or feel is right for the purpose of your design work.
Grid systems exist for helping designers tackling spatial composition of content in a rational and organized way: as usual, rules support instinct, and help dealing with complexity.
The freedom of CSS positiong and the power of the CSS box model really _help_ implementing grid systems in web design (at least, on the horizontal axis).
We all know that HTML tables were a badly primitive tool for placing content in a web page, adopted only for the lack of anything better.
Stretching the comparision a bit, it is just like switching from Excel to a dtp app for publishing a corporate gazette 🙂
Table-based web authoring indeed leaded to a tendency of boxes-based web design, but the limitation was in the _cell_ system adopted for authoring, not in the grid system which was infact often neglected for designing.
My view is that before CSS tools, web design often ended up somewhat resembling software interface design: something like “this row is for menu bar, this narrow box hosts a sidebar, and this big cell here is ready for content. Skin the borders of the cells with some chrome, et voila, here is the web site”.
CSS and a more mature approach to web design have indeed let us think outside the cells, but this whole process has nothing to do with thinking outside the grid.
Cheers
grids don’t make dull webpages—designers do.
>> “the constraints of Tucson’s grid do not encourage the emergence of
>> alternative neighborhoods and communities”?
> What the heck does that mean?
Perhaps it means _”The city of Tucson is boring, boring, boring. Its traffic grid is boring, and nobody’s fun either. You can’t break out of the boredom because if you live there, you’re boring”._
Hey, no offense. I’ve never even heard of Tucson before today, so please Tucsonites take it lightly.
Seriously though, London’s more “esoteric” traffic map allows -or maybe forces- the formation of islands, places it’s hard to get to. And when you get islands you might also get speciation. And speciation means new things, different things. Most of the times.
I find this a great article, not only because reading it pushes you in a ‘new’ direction. Reading it allows you to think: “How could *I* _(the person reading)_, myself, learn designing “Out of the grid”.
People who are just ‘fighting’ Molly’s message have had this thought too, I think. But for some kind of reason those people aren’t thinking about what we could only learn from this. Molly isn’t telling us that we should design with this thought, she is just philosophically sending out a message. A message that tells us, that maybe we aren’t designing layouts, but instead we are designing grids – _in most cases_ -.
What we should do with this message, is to remember that learning new systems or creating them let’s us decide in which direction the future is heading. We have the power to feed the generations who will follow us. This is what generations before us have done to us in many ways.
Therefore trying to hold on to ‘familiar’ systems, is in a way, not letting us to think in (maybe) better directions. This will eventually hold us from getting to next level solutions and next level ideas. The true part of those who are “˜fighting’ this new direction, are telling us to slow down a bit. This thought could also be interpreted as;
“Why not use these ideas in such a controlled way that people, techniques en methods get familiar with these next level thoughts?”?
If we would only let our minds think together for best possible ideas, we would be able to create next level systems that will work. A good example is the market for mobile phones, look where that market is heading so fast. Internet should have followed this new market. The idea is like Molly describes; _”and this is why I theorize, along with many others, that we’ve not yet learned to design for the web.”?_. Why can’t we get the Internet to a next level?
An answer could be: “Because we are still learning.”?
Learning means like in school; learning a lot of methods and techniques to get the feeling with what you are able to do when a problem is spotted. A problem needs a solution, not a method.
Thank Molly for sharing her thoughts and wisdom. We are all learning from it. Einstein was in front of his time. I’m not comparing Molly to him, I’m only trying to say: “Wasn’t he trying to get us in a “˜new and different’ direction, and what did we learn from him?”? Answering this question would get us close to what Molly is trying to achieve.
Learn.
Thanks for the aticle Molly. However I feel that the cities analogy was a bit over-stretched. Why is it more difficult to expand a grid-based city like Tucson than an irrational city like London? Surely it’d be easier?
The same would apply to grid based layouts. If the grid is designed well, then adding content should be relatively simple.
It seems to me that the main value of the article is to encourage the reader to highlight the difference betweein thinking of design as positioning boxes of content on a web-page (css), rather than dividing the page into slices and slotting content into them (tables). But the point is then one of methodology rather than actual design. That’s to say that we’re talking about how a developer would approach the task of coding the site depending upon the usage of CSS or tables rather than how the designer would lay it out in the first place.
When you try to represent this difference as one of actual layout rather than methodology, the article in my opinion loses a little credibility. The fact that the “non-grid” based designs are generally unusable experiments is symptomatic of this.
If you are indeed suggesting people abandon grid-based designs then that would be misguided. Yes, grids have a historical grounding due to the way printing orginated, but they do also make very good usability sense.
I would like to see an example of a successful corporate, content-heavy site that “breaks the grid”.
bq. …As confining as they can seem, the grids serve their purpose still to aid legibility and navigation. Those are important things as well.
Well said. I don’t “do” arty or creative websites. I don’t write them, and I rarely have any interest in reading them. For me, the web is primarily about communication and information. When I go to a website, it’s because I want to find something out. The easier it is to navigate the site, the better for me. Maybe that makes me boring, but I think it also explains why most visitors rate my website as “very easy to use”.
It _is_ possible to write an “outside the box” website that is easy to navigate and logical to use, but these are very rare. What you normally find, when a website has gone creative, is that you can only navigate the site down fixed pathways that don’t necessarily fit with what _you_ find logical.
Read some of “Nielsen’s articles”:http://www.useit.com/alertbox – in particular the one about “Web TV”:http://www.useit.com/alertbox/9702a.html – to see how non-standard designs can cause problems for people using the site. The web now _has_ standards, and deviating from them, so that people have to learn how to use your site, is widely recognised to be a bad idea.
bq. Personally, I’ve never seen anything wrong with tables — perhaps if Netscape had called them “˜grids’ they would have been more accepted? The amount of hassle I have to go through to implement multi-column layouts, footers and all the rest of it with the box-based CSS is just ridiculous.
Whether you call them tables or grids, using that model still means that you are putting form before content, which doesn’t work on a medium that has so many different representations of form. How can a web page that is designed to look a certain way be adequately rendered on a PDA, or text terminal, or by a voice synthesiser? It can’t. Design for the web, and then wrap the layout and style around it, as appropriate to each medium in turn.
The key problems with using tables to lay out the page are:
* it can confuse non-graphical browsers and those using assistive technology, and can render badly in different situations
* it uses a lot more markup to achieve the same effect
* it is inflexible, and makes it a lot more difficult to edit a page if you need to
* search engines cannot as reliable analyse the page.
The problem is that CSS doesn’t give the support it should do for multi-columnar layouts, and that different browsers implement it in different ways. For most designs, these are easy enough to work round – and the result will be a lot more usable than a site written as nested tables.
bq. Compare some of the designs on showcase sites like screenspire.com with older sites. The grid has often either disappeared or has been so buried as to be unrecognizable.
Looking at most of the sites on “screenspire”:http://www.screenspire.com/ , I would say the grid is still alive and very well. OK, so they have more graphics and that, but there are very few that couldn’t be cobbled together with tables and row/col-spans if you were desperate. Yes, they may be more free-flowing and liquid than older layouts, but they are still mostly grid-based.
Which is not altogether surprising, as drawing text in anything than rectangles is kinda tricky!
What a great article. I am very much a beginner with CSS, but this has opened my mind and my eyes to the possibilities.
A lot of these comments make me depressed! The grid is ancient and wonderful, but it’s certainly not the only core idea to design. Layouts without ties to the grid are still rooted in good design; scale, relative position, color, pace, etc are all crucial and interesting elements to work with even if they aren’t tied to a grid. Some folks need to loosen up and acknowledge the power of visual interest and beauty. Not everything has to be this ultra-utilitarian and oh-so-straightforward information communication.
The problem with all this boring design isn’t related to grids, it’s a lack of design personality. Everyone is trying to be this anonymous designer, leaving writing and photography with heart and personality feeling dull and lifeless because they strive to remove any aspect of personal expression. You’re a unique human with personality, design like one!
There’s tremendous merit to imbuing your personality in design, it humanizes information and makes it interesting, personal and unique. Please stop with the faceless and sterile design.
And this post isn’t about personal expression as art and art vs design, that’s a tired conversation. Design could gain some personality and power from art; art could gain some organization and utility from design.
blah blah blah blah. Another trite article, Thanks A List Apart!
I understand the frustration of some who feel constrained by tables, grids, and boxes. Life goes around in circles; the web cannot. And that is what I believe is frustrating to the author.
Yes, CSS allows to break out of the table enclosure but it is still a grid based system. CSS with DIV tagging can only give us a little more freedom of placing elements on the page. Even if it is asymetrical, it is still a grid.
Unfortunately the city analogies are not as effective to this article as they should be. London is almost two thousand years old while Tucson (based upon the fort) is only two hundred and twenty five years old. If you want to be even more esoteric, Tucson only has three “hyperlinks” (one highway, one rail, and one airport) to outside traffic, London has 15.
London was built as an accretion of decades human traffic and methods of transportation. London is a “website” that has no central methodology for expansion and has grown beyond just one plan. It is unmitigated growth. While serendipity may bring you to something unseen, unexpected and pleasing – you should know it exists or have access to it in the first place.
But going back to the main point, this topic should have more depth. CSS is just one component to breaking up the assumed grdi within a website. The most important item, for me, is the idea of struts. The space between elements is the most difficult programmaticaly but the most rewarding in terms of breaking up the grid. Which goes back to the discussion of the DIV tag. The margins called within the tag does not have the same constraints as the table tag. All four sides can be defined whereas a table has just one [border].
Within our current constraints of page layout, the only way to go beyond would be to employ simple fractal design through four-sided plane, right angled planes [rectangles]. With enough rectangles, you can give the appearance of extra angular and non-angular shapes (octogo and circles, for example). However, what is the practicality of such a layout?
But all this discussion is moot when applying it towards Section 508 standards. The web is moving from just the visible. When we design a site it must be usable to all, including the site impared. Does this mean that we go back to two sites like we did for IE and Netscape? Except now we have two sites, one without disabilities and another just for the reader-based browsers? I cannot answer that but it does seem to go that way.
This was a good conversation starter. Thank you, Ms. Holzschlag.
Regarding planned vs. organic cities; Chicago exists on a well-planned grid, with north-south streets, east-west streets, and a handful of predictable diagonals. However, there are a wide range of cultural “centers” scattered throughout the city, and Chicagoans frequently roam between these centers. As a result, Chicago is both easy to navigate and culturally rich… like a good website.
As for layouts… some others have pointed out that grids are as old as design itself, and have persisted because they work. Grids help create visual hierarchies and compositions to aid the eye in moving through content, and ultimately to deliver the message more effectively. The benefit of CSS in this context is that it more readily allows one to warp the grid – to create diagonal space without bandwidth-sucking images – but eliminating the grid entirely is ill-advised.
bq. The benefit of CSS in this context is that it more readily allows one to warp the grid — to create diagonal space without bandwidth-sucking images — but eliminating the grid entirely is ill-advised.
Agreed. “You’ve got to make the grid before you can break the grid,” I remember as the mantra of one Design instructor.
London is more fun, Tucson is easier to navigate. If I’m looking for data I want Tucson. If I’m looking for recreation I want London.
Tables-based vs CSS box layout – it’s all the same. Design should precede implementation and the technology shouldn’t limit the design. CSS is quicker, cleaner and easier to maintain, that’s the difference I know.
Give me a hexagonal element inside a triangular browser on a circular monitor and we can discuss revolution.
It is a rare site that when I, as a user, visit am interested in spending extra time attempting to figure out navigation or make sense of the content. I expect and value this only on the extremely unlikely event that I am visiting the website of a band that I like where the site is designed to be interesting enough for the user to invest mental effort into de-encrypting and is built in Flash. If you take the city analogy and change it to books you get a different take entirely. The “London” style books belong on coffe tables and in Lobbies while the “Tucson” example is what is lining the walls of any library and is on the nightstand by most beds. When someone wants information or entertainment from books they don’t want to have to work very hard for it. They expect the text to start at the upper-left and run to the right. They expect that there will be paragraphs and indentation at appropriate intervals. They count on their diagrams and grids to look relatively the same. They expect page numbers and chapters and when they don’t get it they get frustrated.
Simply put, when people are after information and usually even entertainment they will read “Tucson”. When people are after an innovative and different sort of experience they read “London” (no offence to any Brittish in the audience) and this is because they are board in a waiting room or conversation at the Smith’s has turned the topic of web programming. 🙂
Many people have posted comments that scorn the whole “abandon the grid” idea, while others have preached that Molly’s “gridless” examples should be the benchmark for many more websites out there. It troubles me that so few people have acknowledged that neither of these extremes is optimal (in most cases – there are always exceptions). A balance between a basic grid layout – with elements such as header, footer, and 2-3 colums – and between truly creative elements that break this layout, is much more desirable.
It’s also interesting to note that even Molly’s supposedly “gridless” examples exhibit this hybridness. The Zen Garden _Blood Lust_ design, for example, still uses a traditional side navigation block, and a top header block, even though its content area breaks conventional rules. The same can be said for the Kutztown University example, which has four basic linear blocks down the page, with the navigation menu arranged in a more unique way.
Innovative layout techniques have their place, but for the vast majority of sites, it is not practical to have a master template that completely abandons the basic grid in favour of haphazard absolute positioning and a glut of CSS _background-image:_ overuse. A master template must be able to accomodate (as a common example) thousands of different articles, all with different lengths, different paragraph sizes, and different embedded elements, such as images and blockquotes.
Take _Blood Lust_: this kind of layout, that absolutely positions all the content within the page, is completely impractical as a generic site template. CSS-based grid layouts have been perfected to a level where they accomodate varying content extremely well. Other layouts are simply not cut out for it at this point in time (if ever they will be).
Oh dear. Another half -baked article by a techie wandering even further into the world of design and destroying yet more of its basic foundations. When oh when are the designers around here going to cop on that techies want nothing more that to eliminate design from the whole process altogether. Seperate content from design? great idea. CSS ? what a totally rubbish coding solution. CSS has thrown out one of the basic fundamentals of design, the grid, so now the techies are saying “well the grid wasn’t up to much anyway”. Get a grip folks!
How much more of this are designers going to put up with before design is totally eroded from the picture altogether? and every website looks like a blog. Websites that use well written table layouts work perfectly for accessibility. Do not be fooled by yet more of this desperate hankering for the poorly written code that is CSS. Design IS important. Do not sell it down the swanny.
A wonderfully written and design provoking article…
But as I look at my monitor I can’t help but agree with all the comments on how hard it would be to truly escape the grid. My taskbar (even with it daringly draped down the right hand site of the screen), the status bar, my Firefox tabs, my quick launch icons, the address bar, even the very edges of the monitor itself, everything in front of me screams “˜GRID!’.
It strikes me that grids form the basis of the computational interfaces we (or am I alone here?) are comfortable with. Until user interfaces manage to break through that barrier then web sites will always be “˜inside the box’ no matter how much they try and break out of it, and from my experience of trying to use non-grid-based Winamp skins within my nice grid based desktop they just look, and feel… wrong.
Interesting article…Perhaps a mention for Flash websites that have been potentially free from boxy constraints for years?
I think grids benefit usability(not to mention the obvious angular impositions forced by the shape of screens/monitors) and so will always have a place. The examples given in the article were great – it’s always good to see different things being tried and implemented
I love the site, and I know how anal you guy are, so I wanted to point out a a small typo…
“…city’s ease of navigation and usability as the →sity grew beyond its planned limits.”
Don’t confuse the presence of 90° angles with a purposeful grid. Nor should you confuse the issue by thinking the presence of an underlying grid necessitates the predominance of perpendicular lines.
I don’t see what new we can get out of this article. Perhaps I’d feel differently if she had chosen examples of outside the grid design that better supported her argument. Instead her
“first example”:http://www.csszengarden.com/?cssfile=005/005.css
is completely illegible and her
“second example”:http://www.kutztown.edu/acad/commdes/
check out the list on the home page) would have been easier with tables.
It seems Mrs. Holzschlag indicates that gird design can completely be left behind, and revolutionized even by CSS layouts. This is complete folly.
First off there is nothing wrong with grid layout and second current CSS isn’t a breakthrough in the ways she’s talking about.
When appropriate it’s up to a designer to break the grid layout just as it was with tables, just as it is with print, just as it is with cities, and just as it is with CSS.
The further away you get from a grid design, the more attention you start drawing to the design. Noticeable design is bad design.
I’ve never used a table for layout in my career, but that’s how I was first taught to do it as a student, and it’s how most students are still taught to do it. I’m hoping that will change in the not too distant future. But I’m not gonna hold my breath.
I disagree Kris alot can be learned from this article and I thought it was a well written and very informative.
Some interesting ideas here, but to argue that London, UK is a more vibrant city than Tucson, because it wasn’t built on a grid is poor reasoning. NYC is built on a grid and, heck, it doesn’t get anymore vibrant than NYC!
Thinking outside the grid is fine for web artists designing purely for art’s sake, but users will always choose substance (content) over style (design). I think more sites ought to concentrate on producing quality content and worry less about (non-functional) design.
If the design problem is primarely to achieve more of an artistic expression rather than giving users information and an intuative UI to work with then by all means break the grid. I have come to the conclusions that website should be approached much like application design and the grid is the element that keeps everything in balance and in harmony. It all goes back to design problem and what is it the site is to achieve.
oh hell.. if CSS can’t achieve the solutions your working for then just design that thing flash!!!
It would be interesting to see the results of a web design tool that took non-grid designs and translated them to the coordiates that browsers understand. One could design on whatever coordinate system they desired (or none) and let the browser and translation tool handle the dirty work.
Thinking Outside the Grid…sounds like those magic words we could always found in proposals.
Seems like before you got something to do / to achieve, you don’t even start thinking. So what you want to do and why you want to drop the grid layout?
I just didn’t see the point why to thinking outside the grid and when or in what situation a “non-grid” layout is better than a grid layout.
If the reason is “grid is too common”, than why we use english? It’s too common. When everyone is writing in her / his native language, the communication breaks.
So think outside the grid, for? and when?
Maybe I’m just dumb because I’m a web application engineer and not a designer, but it doesn’t seem to me like any of these innovative layouts have left the grid behind. It’s still all broken up with vertical and horizontal lines.
While I agree CSS can often allow for more robust layouts with code that is simpler and easier to change, I still can’t shake what I see as the biggest hurdle to CSS only layouts: compatibility. Different browsers interpreting the styles in different ways, and some CSS only supported by half or fewer browsers. I think CSS has enormous potential, but in practical terms of working with both existing and previous versions of browsers, with a complex layout you can find yourself near insanity trying to get it to render properly in each scenario. And not only the actual CSS, but other characteristics of the layout such as what order the DIV or SPANs appear in in the page code.
CSS can offer simpler and easier to update code, but don’t yet offer the level of compatibility that tables do. Not to mention applying a liquid layout to fill any sized browser.
Which is not to say I’m pro-tables or anti-CSS – I often end up with a mix of tables and CSS.
I have to agree as well that the use of the grid is a larger issue beyond tables vs CSS, and grids are a design tool with a long and well provem history. Not every design, printed or electronic, should look to a grid system – but that is really more about the design process than the code. Sketch first, code later.
Allow me to add my thoughts to the pile.
I think it is important to acknowledge that designer’s don’t use grids because tables forced us to, but rather we used tables to accomplish grids. Grids and grid systems are at the very foundation of layout and composition. They had been in the designer’s toolbox long before even Gutenburg started mass producing his religious tome. They are one of the first things that a student will learn about at Design School. They are pleasing to the eye, and can be helpful to the reader and user.
When designers work in the web domain-space they are typically solving similar compositional and layout problems than in other design domain-spaces. To do this they can utilise suitable existing methods, in this case grids and grid systems. Tables were a great way to accomplish successful grid compositions, and in fact some may argue that tables are in certain situations still better than divs at this task.
Interestingly, a trained designer will easily spot the grid systems used in your examples intended to demonstrate no use of grids. Even Shea’s Zen Garden implementation could be based on a grid, and certainly a grid system if used in variations across a number of pages. Likewise AIGA Los Angeles site is clearly based on a grid, and could probably be accomplished wth either tables or divs.
Perhaps what you are exploring is whether grids should be box-matrix types (like a simple multi-celled table) or more varied and creative (accomplished with careful divs, or hacky table-col-span-soup). In any event this is a decision that we should encourage the designer to make at the design stage, not the production stage.
In short, good designers will choose appropriate layout and grid systems because they are appropriate to context of the design, and not because of structures inherent in HTML.
Tables didn’t choose grids for designers. Designer’s chose tables for grids (and are now also choosing divs).
A nice thought (and dialogue) provoking article though :).
I think a few people here are missing the point that Molly is trying to make (or at least the point as I see it anyway).
Okay, so the Zen Garden:Blood Lust website is perhaps not the best for information purposes, but that’s not what that site’s about. As far as I can tell Molly is referring to the layout of the page rather than the graphical design. Look at the loosely lined up layout diagram for the ZG:BL site and compare it to the Weightshift page diagram that looks like it’s been precision cut with a laser.
Nobody’s saying that we should do away with standard columnar style layouts and use circular designs instead. It’s about messing up the strict rigidness of perfectly aligned data cells and adding a bit of unconventionality in there, which if done properly shouldn’t affect useability at all.
After all, we’re making websites, not monitor test patterns.
Okay, with the gratuitous Matrix reference aside, I agree with Molly’s assertion that current web design has been locked into overly-rigid use of grids.
But how about this premise: There is no such thing as design without grids.
I would argue that all design is grid-based. I believe that even those designs that appear to be grid-less still follow a grid to some degree—the grid may only contain a few units or perhaps it consists of a complex array units.
I have a design degree from before the days of the web and like other designers commenting here, the grid was taught as the basis of all composition. The grid’s primary purpose is to help the designer bring the appropriate amount of order to a composition. Being a literal thinker who often gets stuck thinking within the box (no pun intended), my design professors had to help me understand the organic attribute of designing with grids—the grid can, and should, be broken to bring visual focus to items placed outside of the grid.
Design is about creating a visual language based primarily on hierarchy. There is a spectrum of purpose to graphic design ranging from the subjective (more like fine art, marketing) to the objective (strict information design).
Designers like David Carson made choices to break the rules and to challenge the ideas of form vs. function. In the contexts he designs in, he chooses to break many elements away from the grid, but there is still a grid under his compositions.
So it’s not a question of whether there’s a grid or not, it’s a question of how closely a design follows a grid.
Molly, thank you for challenging designers and coders alike 🙂
London is more fun, Tucson is easier to navigate. If I’m looking for data I want Tucson. If I’m looking for recreation I want London.
Ah, but London has content.
I think Molly’s argument is based on two, fundamentally flawed assumptions.
Firstly, she seems to be arguing that the reason grids have been used by web designers is because of the technological limitations of table-based html. This, as many other people have pointed out, is not in fact the case. Grids have been around since before the printing press.
Secondly Molly seems to be confusing the concept of the grid with an overly rigid grid.
She uses the example of http://www.aigalosangeles.org/ as a gridless website. In fact this website does have a grid. You can see this if you visit several of the pages, the elements on the page are in the same positions as on other pages.
The difference between this site and some of the others she list is that it has a much more interesting and individual grid. But it is a grid never-the-less.
In fact any website where two or more pages have the same layout has a grid. A website without a grid would require a different CSS for every page. This would be both impractical and confusing for the visitor.
I appreciate Molly’s thoughts on this topic. I have given it a fair amount of thought myself lately. CSS gives us great flexibility, but we seldom use it to break out of the mold.
I started “this project(CSS Toolshed – Christmas)”:http://csstoolshed.com/showtime.php?id=4s0t3c0d0e0 as an experiment to see if I could do something ‘unboxed’ given that I had no control of the html. I can do a very non-grid-like page as a one-off, but can a whole site work in a more organic fashion? I came to the conclusion that grids are an important tool for users. It’s how we figure out what’s important on the page and how to navigate through a site.
London is as it is because stone and mortar are very non-malleable. The cost to re-arrange to accommodate the new neighbors is prohibitive. Web documents are quite malleable, and their presentation even more so. That malleability means that web documents will look, and be planned.
Navigation is a critical part of the web. In real life, different cultures put street signs in different places. But, the time investment to walk to the next block if I don’t see the street sign is significant. If I feel lost, I’ll take a while to look in less likely places for those street signs. On the web, a feeling of lostness is often followed by a click on the back button. So, If my goal for the web site is to sell you something, or teach you something, or even just express myself, I don’t want to make the user uncomfortable enough to go for that ‘back’ button.
Grids are inevitable. Resistance is futile (except for minor tweaks). Fortunately, they will service us 🙂
“the constraints of Tucson’s grid do not encourage the emergence of alternative neighborhoods and communities”?
There are countless cities in the world that’ve used a fairly constraining grid system unlike London and have still fostered dynamically different cultural communities. First one that comes to mind for me is Brooklyn NY. That aside, I agree with some of Molly’s points and appreciate the article but the grid, as a means of content/information display, is here to stay. As much as I support creative design, creativity cannot trump usability for the people who will end up interacting with the site. Its truly the odd site out that can afford to engage its user in a unique manner. Just my 2 cents”¦
There are countless cities in the world that’ve used a fairly constraining grid system unlike London and have still fostered dynamically different cultural communities. First one that comes to mind for me is Brooklyn NY. That aside, I agree with some of Molly’s points and appreciate the article but the grid, as a means of content/information display, is here to stay. As much as I support creative design, creativity cannot trump usability for the people who will end up interacting with the site. Its truly the odd site out that can afford to engage its user in a unique manner. Just my 2 cents”¦
Of note: Firefox, which has implemented CSS Columns now, is pondering non-rectangular boxes for future versions. This might give you a circle you could then reliably fill with text.
The problem with tables is that the cells are joined. In a spreadsheet, each cell relates somehow to another in a nearby column or row. But divs are like floating cells that aren’t always related. What we require is still a grid – but one that lies invisibly in the background. Divs may then line up to the grid, or they may not, as the designer chooses. Just like a magazine or newspaper spread.
If only the web was more like DTP where you have a grid while you’re working on a layout, then turn it off to see the final result before print. (The user never sees the grid unless you mark it out with lines.)
I find it ironic to see some CSS layout demos that avoid tables, then advocate use of the “display:table” set of rules, so divs and lists line up and behave just like cells! Of course the fact is that Microsoft’s key browser doesn’t handle these rules, so only a minority of people are using them. Otherwise we might be seeing many more users experimenting with different table-like layouts. (Given that CSS tables are more flexible than HTML tables.) But don’t forget you can combine tables and CSS too. They are not exclusive.
Also it seems obvious that the fascination with grids stems directly from the pixels used for computer screens. If screens were circular, then we might still have grids, but they wouldn’t be so boxy. But pixels lend themselves to squares, rectangles and vertical/horizontal lines, don’t they? So it’s up to the designer to create something that looks like it doesn’t have a grid, if they want to be artistic.
My “day job” has centered more on print design and other forms of multimedia design that aren’t web-related. As a result of some advice from a friend, I recently started looking into XHTML/CSS.
The time ‘away’ from web design has served as a sort of clensing of the mental palette. The transition from table-based to CSS design was less of a fight for me than those described in the article.
With the new challenges and oppotunities that CSS provides to designers, designing for the web (at least to me) feels ‘new’ again.
The Kutztown University you displayed with it’s design breaking the grid etc, it’s “intro” page may be, but that was it. Once you surpass that it falls back into the grid. And why? That’s right, because the grid is good. I like breaking it, but most users find sites irritating that break it. Sadly these are usually Flash, but that’s something else.
Face it, even in 10 years, sites will still be using the grid. Anything else is new and unknown. Society doesn’t like that.
The Kutztown University you displayed with it’s design breaking the grid etc, it’s “intro” page may be, but that was it. Once you surpass that it falls back into the grid. And why? That’s right, because the grid is good. I like breaking it, but most users find sites irritating that break it. Sadly these are usually Flash, but that’s something else.
Face it, even in 10 years, sites will still be using the grid. Anything else is new and unknown. Society doesn’t like that.
I just saw this in a review of the graphical features coming in Windows Vista’s WPF (Windows Presentation Foundation) rendering engine:
“WPF also offers a Grid. This is an extremely powerful layout element which enables grid-like or table-like layouts—these will be familiar to anyone who has abused the HTML table element.”
http://msdn.microsoft.com/msdnmag/issues/06/01/WindowsPresentationFoundation/
I get what you’re trying to say about grids, but you’re completely wrong about not using grids. The example in Figure 10, the Kutztown University design, is your best example of a ‘non-grid design’, but it is in fact very balanced and makes use of a very strong visual grid. Design which does not use a grid, whether it is a print piece, a painting, a website, whatever, if you don’t use a grid, you get a messy unbalanced design. Take a closer look at the ‘unconventional designs’ and you’ll see that the ones that look visually appealing do in fact use a grid. They don’t use the most basic simple grids, but they do use a grid, elements are balanced, white space is used properly, and so on.
Tucson was planned. London was not but grew organically over several centuries. Maybe that is what makes London so difficult to navigate by Londoners and taxi drivers who have to spend years to learn enough about it to obtain their licence.
I very much like the idea of thinking out of the grid/box mode and I have no doubt that we will see some stunning designs. I do feel, however, designers of sites meant for the provision and/or dissemination of textual information should think extremely about usability/accessibility before jumping into “text in the round” or what have you.
Molly has written a very interesting article with lots of food for thought. However, as some others have mentioned, a grid is usually found as the underlying structure of even the most ‘uncovential’ or skewered graphical design.
I think it is important to temper groundbreaking design with usability. Currently, and most probably because of
abuses over the years, the web is a medium ideally suited to grid-based design and this fact cannot be ignored. When it comes down to it most people use the web for information – and if this information is not presented in a structured way usablity goes out the window.
Leaving the grid principles behind only works for experimental sites that deliberatly set out to explore new areas of graphical presentation. If the ultimate function of your design is clear information presentation then a grid-based design is essential.
If you are really interested in grids and design, it has long been discussed in physics, science, and math circles. Looonnggg before it entered designers minds that grids just seem “right”…heh
Here is a good place to start
http://www.world-mysteries.com/sci_17.htm
you can skip the math parts…
or Google
Fibonacci Numbers
Golden Rectangle
that can get you started towards the path to enlightenment
I guess I fall into the “Time and place for every design” camp.
The evolution of design for digital media is increasingly providing opportunities for new and different types of communication. The grid-dependent design clearly has it’s place in the majority. If not for it’s usability, then merely because that is what is expected from the end-user. It is important not to forget that an individual’s expectation of how something should work, their conceptual model, is based as much on past experience as the design of a thing.
So, if you’re going to design a website for a bank, a grid-based design is the obvious choice.
But there are increasingly new and different uses for the web, and not all websites are created for the same purpose. It is natural that as the type and purpose of media available grows and diverges, the methods of presenting it should diversify as well. Personally, I love the freedom of design afforded by CSS (which, by the way, doesn’t necessitate that one shy compeletely from the grid). Great article, Molly!
concerning mostly the comparison between London and Tucson, Arizona. Whoever’s concerned, read more on my page Of Phenomenology etc.
Thank you for the article Molly,
I agree with your ideas. As cssZengarden shows it is completely unnecessary to think a site from a content point of view. I think css is a very powerful tool if you do the effort to think in terms of semantic elements and not tables or cells.
But, as Paul Novitski say, I like to see curves too… and that obliges you sometimes to think a way to hack with html and css, just like happened when you wanted to layout with tables.
So, I think the real power of css is its organisational and structural capacity of grouping the site elements look, because in general we always want to do things out of the capacities of the current technology and that makes you hack and think one step forward. That’s why we need standards, isn’t it?
Maybe we just need to refrain from the square-designs. But you must admit, playing with wild organic layouts when content length is not always the same is much harder than sticking to the columns. Remember newspapers? 🙂
I’ve been thinking for a long time about the central design metaphor that I would like my new personal site to have. I had been thinking about a city metaphor, but I had let go of it because the town-square idea had been done to death (eWorld, anyone?). And as a city metaphor concept, a grid-based city just doesn’t seem that fun to look at, as far as maps go, anyway.
Then I spent two weeks in Spain, in the older parts of cities such as Sevilla and Toledo. Like Molly’s example of London, these are areas of the cities that have no grid — and the beauty of that was that no matter how good my map was, I always got lost on the way to my destination. Given that I was on honeymoon and not on business, however, getting lost was utterly charming.
I decided that I want my new site to have some flavor of the ability to get lost. I’m still trying to figure out how to do that and not make a site that’s impossibly convoluted to either navigate (for the reader’s sake) or maintain (for mine). I’m conceptually committed to using CSS throughout, and I’m going to require readers (I hate the term _users_) to employ Firefox or Safari, because I’m going to use PNGs (which I’m surprised no one else has mentioned for grid-breaking visual possibilities).
But that’s because it will be a personal site. I can’t have that same attitude toward people when I’m developing a business site, because you still have to design for some level of lowest-common-denominator, and that means IE.
And business or personal, I’m going to use a grid. I hope to achieve interesting design with it, but like other commenters here, I don’t see where the examples showed truly breaking the grid (Kutztown’s internal pages give the lie) or, if they did break something of a grid, such as the CSS Zen Garden example, it was just a visual jumble (I’d hope that kind of design would include an RSS feed).
Finally — I just don’t think the web lends itself well to interesting editorial design, at least not yet. After five years of developing websites for adult-literacy programs and curriculum, where I had to restrain myself to very-low-common-denominator technical requirements, I’m so happy to be back doing 99% of my work for print: I get to use the fonts I want, I can wrap text around irregularly shaped objects, I can make things with interesting folds, and I can mess with my grids however I like and not worry how some browser is going to render my work (not to mention that I can refine my grid from piece to piece without destroying older pieces). That’s why on my new site, readers will also have the chance to download some pieces as PDFs, so they can see my real design creativity at work.
Tables, suddenly we all hate them, they’re that despicable markup used for layouts. But hey tables were never meant to be be used for layouts anyway. Originaly table markup was added to HTML ni order to display tabular data. Until one day someone decided to go beyond that asn use it for layout. Now its not like non-grid layouts are the norm but table-less design definitely is. BUT that doesn’t mean you write lots of CSS code and force a table for the data that could be placed in some table markup.
Pick your tool wisely and for heaven’s sake, experts, quit that “table-less layouts are the coolest” rant.
When you design a site you think about layout, but when city is forming from ages to ages, there was no plan in the beginning.
Try to create a website by adding new elements not looking back. *You’ll create a masterpiece*
Gridless CSS layouts often end up being like college art films. Sure, they’re innovative at times, but no one ever really looks at them except other people making college art films.
The concept of “breaking out of the box” is great but lets look at it in practice. Most, if not all, of the gridless designs cited at examples were, quite honestly, horrible. How well do you think books would sell if we suddenly decided that straight lines were too “confining”? What if the Mac or windows interface just suddenly decided to get rid of grid layouts and throw widgets all over the place? We’d all go mad!
I dont need another nifty design. I’ve honestly seen enough of them. What I need are designers who care about getting my content to me in a quick, efficient, and intuitive way, not designers who want to make my content look “cool”.
Now as with anything there are exceptions to any rule. Band, movie, visual arts, & promotional websites for example are often based more on style than large ammounts of content anyway and can tollerate less traditional designs, but for the most part I just spend a lot of time wishing I could find plain text versions of websites to free me from all the “designer fluff”.
I think Molly probably chose the extreme examples she did in order to prove her point, not to hold them up as the kind of grid-free design we should all aspire to. In my opinion, the break-out-of-the-grid techniques that CSS affords us are sometimes most effectively used in small, subtle ways — for instance, allowing page elements to overlap, as with the ALA issue bug.
it used to be that any idiot (like me) could write an html page with a text editor and it would “work”!
so now our world has gotten “serious” …and strict.
i guess the “good old days” of “forgiving” browsers are gone forever.
yikes!
i’m gonna’ have to buckle down and start learning CSS, styles, etc.
thanx… i guess.
🙂
Dry Bones
Israel’s Political Comic
Strip since 1973
I enjoyed this article very much and found your examples really good. I know when I first when to the one at Zen Gardens, I thought, what a mess! But then after looking around the site there and going through just about every css style they had, realizing what was going on, I though, WOW, this is SO COOL! If you guys stopped at the first example of theirs, you might want to go back and look through it.
I am looking forward to learning more about css, having a very limited knowledge of it now. Thanks for the insight.
Personally I love to make website that are only made out of css div’s, but because IE designing in CSS (for IE) is hell and though IE7 supports most CSS1 commands, most IE users doesn’t support IE7.
I mostly design in CSS but I’m not afraid to trough away my personal ideas about the internet, when it comes tot designing for someone ells.
Grids don’t have to create “boxy” designs, but using borders and backgrounds on every div can, but it would be nice to have a greater set of tools for other geometry (usability withstanding).
For this reason, I was pleased to see Google using SVG to display charts on web usage (I think they were using some activex object for Win). SVG, with more consistent support (Opera has SVG tiny, Firefox has a subset of SVG 1.1), would be a good choice for displaying any geometry (curves!), colour or gradient, is an open XML standard that works with the DOM and scripting. If designers/coders could easily slip in and out of xhtml/html and SVG and rely on reasonable cross-browser support, we’d have all the tools we want without having to simulate curves with unscalable images.
Anyway, I think that grids are good for design, but perhaps the trick is to not make it look like you’ve designed to a grid by not continually highlighting the lines that you’ve worked to.
I grew up in London and often visit Tucson, so I hear what you say about grids and spirals.
However, when walking or driving around a city, the placement of the street signs (names of streets) makes a big difference. In Tucson, like most US cities, they are in very predictable places, and this is very handy. In London, like in much of the UK (and Edinburgh is terrible for this) the street signs are often in different places. Not easily seen, on different styles of plaque, in different locations at different heights etc. Its a real nuisance to strain around looking for the name of a street.
There is a clear parallel to webdesign here: if the navigation links aren’t in a predicatble place, it can easily be a hassle to find where you’re going.
Great article!!
It is always nice to hear someone who can think outside of the box and articulate an experience. This approach will not work for everything or everyone. Done well, this will define a good designer and a great designer. In the 90’s Carson introduced a non-grid style of communicating in print. We were ready for it then. Most design work up till then was over done with simple grids. Everything started to look alike.
We’ve been strict with grids in both web 1 and 2.0. It’s only a matter of time until the younger generation takes on a new approach. Outside of the box designers will inspire those creative people willing to pull of successful new user experiences. And we can achieve it with Dom!
thanks for this great article. seeing the layout as gray boxes made a big difference in my understanding of these layouts.
I think that there is a misunderstanding of what a grid is in this article, I failed to see one example listed that did not follow a strict grid design. Just because all elements don’t line up does not mean that a grid is not being used.
having a background in both city design and web design, i appreciate the goal of this article, but i don’t think you argued it well. you don’t address the WHY behind a grid vs. a non-grid – both in web design, and in city design. multiple commenters have already pointed out that when it comes to the web, the content (and i would argue audience) are key considerations when making a layout.
but with regards to cities, tucson’s and london’s layouts evolved in very, very different ways. london’s urban form evolved organically, slowly over time, as people needed. since people at the time mostly got around on foot, it (like many old cities) has developed into a distinctly pedestrian-oriented city. buildings are narrow at the street edge, and plots are deep, to minimize distances people have to travel. buildings are in general small and streets are as narrow as possible, because the distance one can get on foot is the most important constraining factor. as a result the city makes the most sense as a pedestrian. and in cities like this, for people who actually grew up there (and not say, in a pre-planned suburb of london), getting around is quite intuitive and easy.
tucson’s grid is NOT a result of city planning, as you said in your article, but rather the result of the 19th-century-era Jeffersonian plat that was laid out across the US, from roughly west of the Mississippi onward, ordering all land, regardless of natural landforms, hills, swamp, rivers, mtns etc according to a 1-mile by 1-mile grid, each square forming 640 acres. (see this article: http://www.core77.com/reactor/undesigningamerica.asp). this grid has shaped the evolution of almost all cities that grew after it was laid out, and not by choice. furthermore, it is a very constraining grid – because it’s square, neither axis has clear hierarchy over the others. it is in this way very different from the complex grid layouts shown in your article. tucson’s grid is more a lesson in what happens when a place does not grow organically.
the 60s and 70s saw a backlash against the grid and gave us suburbs that have endlessly curving streets with nary a straight line in sight. but those layouts, too, are problematic for people, especially when the streets don’t curve for a any particular reason beyond aesthetics. (ie, to go around a hill; to bring a person closer to an important landmark; etc.)
so the question really is – what can we learn, if anything, from all of this? i think the deeper lesson is that in design of any sort, the best structures evolve to meet the particular needs of the system they are supporting, and that blindly imposing any structure – be it gridded or not – without considering the content it will hold or the people who will use it is going to result in problematic design. period.
I agree with Molly – exciting, freeing, inspiring! “¦ and I agree with commenters like r a – non-grid places arise out of time and function, as much as, if not *more* than grid-based places.
I am excited to put Molly’s thoughts into action, but only after first asking myself, “What does this project need? Where does it come from, and where is it going?”
Most readers/users don’t have the luxury of time to get to know my sites, so they’re going to need other ways to orient themselves quickly and find what they’re looking for.
Freed of grid thinking, but still married to the message, I am now on the exciting path of creating new wayfinding signals to quickly and elegantly carry content to people.
I understand the excitement of CSS-based layouts. When I design websites they are pure CSS unless content would be better served in a table, but the site structure is always CSS and DIV based. I also do HTML emails which rely solely on table-based layouts with CSS being used only for font and the most minor areas of spacing. There is an undeniable increased freedom with CSS especially when you combine XHTML/CSS with Javascript frameworks like JQuery and Prototype.
However, looking again at the European city streets you will notice they rarely form cubes or rectangular block. When you look at the CSS wire-frames they are 100% rectangular. The only irregularity in shape is an illusion created by rectangular images that have been sliced and re-stitched together.
In order to truly break the grid layout that began with tables I think we will need to wait until we can define content areas with coordinates not restricted to top, right, bottom, left. Until then it’s all still a Tuscon city, we may be able to create an earthquake to mix things up, but the underlying structure is still a grid.
Going off topic, thanks Molly for your work with Dave on publishing CSS Zen Garden. It was that book and that site that made me pursue this career path almost 4 years ago.
The exciting things that are here in this field are largely due to the countless hours and dedication the “old timers” have invested in website design and producing.
Being a native Arizonan I appreciated your comparison of Tucson’s city street grid to the concentric circles and spokes of London’s roadways. However, I’m not sure that you can definitely tie a city grid-plan to its quality and quantity of cultural relevance. I’m guessing here but I would predict that London’s 2000+ years of history are the determining factor in its cultural vibrancy as well as the fact that London was the epicenter for the one of the most expansive colonial empires the world has yet seen.
In comparison Tucson has existed in one continuous form or another for roughly 300 years. Not a very long time in the grand scheme of micro-cultures.
I would not disagree that the city-grid may play a part in this cultural development (or lack there-of) but it should probably not be ascertained as the central foundation of the issue.