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 ArticleLeslie 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.