>> “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.
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”.
…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.
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.
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!
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.
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.
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.
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 CSSbackground-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).
Copy & paste the code below to embed this comment.
dave arturs
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
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.
Copy & paste the code below to embed this comment.
Derek Pennycuff
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.
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.
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.
Copy & paste the code below to embed this comment.
Julian Wong
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.
Copy & paste the code below to embed this comment.
_ _
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.
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 :).
Copy & paste the code below to embed this comment.
Van Cleef
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 :)
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.
Copy & paste the code below to embed this comment.
Roger Roelofs
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.
Copy & paste the code below to embed this comment.
Jesus Christ
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.
Copy & paste the code below to embed this comment.
Jesus Christ
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.”
Copy & paste the code below to embed this comment.
Space Gorilla
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.
Copy & paste the code below to embed this comment.
Lorraine Ireland
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 <table></table> 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.
Copy & paste the code below to embed this comment.
Andrew White
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
Copy & paste the code below to embed this comment.
Dan Corcoran
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!
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? :-)
Copy & paste the code below to embed this comment.
Cheshire Dave
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.
Copy & paste the code below to embed this comment.
Max Kiselev
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
Copy & paste the code below to embed this comment.
Cliff Pruitt
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.
Copy & paste the code below to embed this comment.
Daniel Sanders
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.
Copy & paste the code below to embed this comment.
Alexander Muir
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.
Copy & paste the code below to embed this comment.
Sorba Rightley
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!
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.
Copy & paste the code below to embed this comment.
r a
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.
101 Reader Comments
Back to the Articleruss yusupov
grids don’t make dull webpages—designers do.
Adriano Varoli Piazza
>> “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 forcesthe 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.Patrick Tehubijuluw
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.
Leo Pitt
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”.
Stephen Down
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.
Stephen Down
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:
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.
Stephen Down
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!
Mirty Twelve
What a great article. I am very much a beginner with CSS, but this has opened my mind and my eyes to the possibilities.
Dave Rau
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.
Richard Anderson
blah blah blah blah. Another trite article, Thanks A List Apart!
Thom Wiley
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.
Zackary Webb
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.
John Lascurettes
Agreed. “You’ve got to make the grid before you can break the grid,” I remember as the mantra of one Design instructor.
Raanan Avidor
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.
Simon Hobbs
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.
Andrew Branch
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. :)
Jeremy Epstein
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).
dave arturs
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.
Rob Swan
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.
Richard Clarke
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
Nick Ballinger
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.”
John Lascurettes
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.
kris meister
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.
Alex G
The further away you get from a grid design, the more attention you start drawing to the design. Noticeable design is bad design.
Derek Pennycuff
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.
Ashley Bowers
I disagree Kris alot can be learned from this article and I thought it was a well written and very informative.
David Lightheart
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.
omar puig
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.
omar puig
oh hell.. if CSS can’t achieve the solutions your working for then just design that thing flash!!!
Chris Oglethorpe
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.
Julian Wong
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.
T Kane
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.
Ross Howard
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 :).
Van Cleef
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.
Chad Kieffer
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 :)
Norman Wingrove
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.
Richard Quick
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.
Roger Roelofs
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 :-)
Paul Sveda
“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”¦
Paul Sveda
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”¦
Chris Hester
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.
Chris Waters
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.
Jesus Christ
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.
Jesus Christ
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.
Chris Hester
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/
Space Gorilla
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.
Lorraine Ireland
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.
Loughlin McSweeney
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 <table></table> 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.
Andrew White
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
Dan Corcoran
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!
Eugene Scherba
concerning mostly the comparison between London and Tucson, Arizona. Whoever’s concerned, read more on my page Of Phenomenology etc.
Juanjo EspÃ
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?
Srđan Prodanović
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? :-)
Cheshire Dave
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.
Harshit Sekhon
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.
Max Kiselev
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
Cliff Pruitt
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”.
Lindsey Kuper
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.
yaakov kirschen
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
Leslie Ingram
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.
Stijn D'haese
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.
Daniel Sanders
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.
Alexander Muir
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.
Sorba Rightley
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!
Jim McNelis
thanks for this great article. seeing the layout as gray boxes made a big difference in my understanding of these layouts.
michael hewson
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.
r a
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.
Penina Finger
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.
Matthew Booth
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.
Mike Jones
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.