11 I'd like to see MORE grid support in CSS

Nice article.

The kind of layouts the author advocates are good and have their place. But grids are used much more often, and if anything, I’d like more support for grids in CSS.

Personally, I’ve never seen anything wrong with tables – perhaps if Netscape had called them ‘grids’ they would have been more accepted? The amount of hassle I have to go through to implement multi-column layouts, footers and all the rest of it with the box-based CSS is just ridiculous.

posted at 11:57 am on December 20, 2005 by fritz stelluto

12 Well said

The timing of this article is impeccable. As a designer/coder since the days of simpletext, I completely connect with what you are saying about veterans being able to break the grid and create successful designs.

I do agree with some of the other readers’ comments that the grid is in use broadly for a reason. I think that as long as we maintain that the goal of any project is to solve a problem, how we solve it is open-ended, grid or no grid.

If the design is good, the markup well-written, and the goals reached, the project should be deemed successful.

posted at 12:13 pm on December 20, 2005 by Richard Leland

13 Thanks Molly!

I’ve found that the more mature the web and its technologies become (specifically CSS), the more I return to a grid-based design. 99% of my work involves getting huge amounts of information to the reader in an easy to follow manner, and the grid system works perfectly for such a thing. What you didn’t mention was The ONION. There is so much information on that homepage, and it’s all rather easy to find, thanks to a rather complex grid.

posted at 12:32 pm on December 20, 2005 by CM Harrington

14 Untitled

The biggest hindrance to pure CSS layouts still, I think, is MSIE. Tables provide a layout mechanism that is more or less consistent across the various browsers, which is a lot more than can be said for the CSS box model. This is too bad since it would be nice to have both options available.

I am opposed to using CSS hacks in order to trick MSIE into rendering the page correctly because I do not like how it makes my code look. As a result, sometimes tables are the only way to achieve the desired layout and compatibility without resorting to hacks or conditionally included CSS, though I tend to prefer using the latter over the former in a PHP environment where I can check the browser easily and just include a second CSS file if needed.

The widespread adoption of pure CSS layouts is highly dependent on MSIE getting some semblance of correct support. The incorrect box model and the complete lack of certain tags make it incredibly and sometimes prohibitively difficult to avoid using tables for structure. Until then, the majority will continue to do it the tried and true way and many of the people entering for the first time will adopt this approach as well.

posted at 12:35 pm on December 20, 2005 by Ryan Britton

15 CSS & Grids

Fritz: The two or three times that I’ve tried to create (or modify) a table-based site, I’ve become increasingly frustrated trying to get it to behave. CSS may not be the most natural thing either, but once you learn to love negative margins and other more sophisticated techniques, things like getting full-height columns become a piece of cake.

As to the article, I find my base designs sticking to pretty standard column-based stuff. But I just love the adornments made possible by positioning and other tricks. For example, christmas and halloween at a community site I oversee.

posted at 12:41 pm on December 20, 2005 by Mike Purvis

16 How about usability?

Nice article and great point of view. However, before diving into non-grid design for web you should ask yourself this: How about usability?

In my many years of experience making graphic and web design I’ve defined what the I call the graphic design constant which is the queen of any layout is its contents. In other words, there’s no use for a design where the viewer can’t get the information he/she is looking for.

So, by using the same author’s example, London and Tucson urban layout. It’s harder to the user navigate on a London type website, although it looks nicer. I am not saying that we shouldn’t go crazy sometimes and create unique layouts, but we always have to consider the client’s needs and the user’s experience while navigating a website.

For example, if an user surfing a non-grid layout website asks, where the heck is this company’s phone number, something is not right in your design. Therefore the website is not promoting the company’s brand/services/products very well, and finally they’ll have to redesign the website. Probably the client will hire another designer to do it, and there’s no need to say that’s not good.

So, why not to choose the path between these two paradigms? That’s usually what I do, and it works like this. On any website the most important part is the navigational system, Because that’s the area where all the information is indexed and displayed in topics. Then we should consider two things, where and how to display the options within the navigational system?

My formula is to use a good css driven menu and Gestalt. The css menus are great because the users are used to this way of navigating through their desktops and applications. Furthermore, it’s reasonably easy to develop css menus and there are a lot of examples here on ALA and all over the web. However positioning the menu is the key of a successful design. Gestalt theory says that the best places to lay the most important things of a design is a little bellow the top/right and top/left corner of a page tending to its center.

Now we have all the topics visible and not more than one click away from the user we can design the way we’ll display the contents. Here we can do pretty much whatever comes up to our minds eye. The only rules we have to follow is the ones laid down by typography. For example, not to use small serif type on screen, to control kerning and tracking, and so on. There are a lot of great books on this subject you can look for help.

This formula has proven itself as very effective along the years I’ve been applying it. Designing and developing a website by these rules is quite easy, and when clients see the results coming from the website (i.e. more consumers and closed deals) he/she will certainly come back to you looking for more graphic design solutions.

posted at 12:58 pm on December 20, 2005 by Mario Mariani

17 Untitled

you said:

‘There is a new kid on the block, and her name is “I’ve never designed with a table in my career.â€? ‘

…that sounds all too familar. :) I seriously haven’t built a table based layout since I left school.

I will admit I do find myself creating grid like websites more often then not. When you have to comply with Section 508 standards something gridlike and predictable is just easier to use for someone that has to rely on assistive technology.

Although for personal sites, that do not have a ton of content…I love drawing outside of the lines.

posted at 12:59 pm on December 20, 2005 by june walls

18 Time and Place

I enjoyed the article.

I think that like everything else in this world, there is a time and a place for it. This should not be attempted in every project, but can be implemented where appropriate.

posted at 01:27 pm on December 20, 2005 by Jim M

19 Untitled

While I like designs that break away from grid-based layouts, I had a horrid time trying to figure out where anything was on the non-grid examples given. Breaking away from a grid doesn’t mean we have to make everything into a horridly confused mess, although the examples would imply that.

To be fair, I found the AIGA example to be painful as well, since there’s absolutely no way to tell where the actual content is.

posted at 02:56 pm on December 20, 2005 by Jordan Cole

20 Technology change brings design change

When thinking about the history of the grid in print design, you must remember that until the widespread use of photo-offset lithography, it was seriously difficult to impossible to mass produce anything other than a rectangular design.

Look at the changes in mass-media design since the first half of the 20th century. Everything from use of more color and illustrations (including color photos) to the wide variation of type styles has happened because of this technological change.

I believe the same kind of profound design change will happen on the Web, in this case due to CSS. Compare some of the designs on showcase sites like screenspire.com with older sites. The grid has often either disappeared or has been so buried as to be unrecognizable.

posted at 04:03 pm on December 20, 2005 by Rick Holmes