Calling all Layout Experts. Need suggestions

[hero]

Be Gentle

I’m a web applications developer and NOT a designer. Our over-paid designers use FrontPage, which I believe still exists in an empty hall of the Smithsonian. Each of them must have suffered a childhood trauma that led them down a dark path of refusing to accept events that happened after they graduated.

I decided to pick up the torch and work on our redesign. However, because they have a phobia of div tags, I’m hesitant to use 960 or blueprint. I’m afraid being terminated for causing their eyes to physically pop out of their heads when they see:

(They are still using table layouts and cant understand div statements)

We do not have a need for a twenty-four column grid and I am not a fan of the overhead. Somewhere in the world a rock was lifted and we have many 56k users. So, I put together a small solution hoping it would be easy enough for them to create equal column layouts with HTML 5:

Styles

section.layout

{

width: 90%; min-width: 960px; overflow: hidden; margin: 0 auto

}



section.layout > section

{

margin: 0 1%; float: left

}



section.columns-1 > section

{

width: 98%

}



section.columns-2 > section

{

width: 48%

}



section.columns-3 > section

{

width: 31.3%

}



section.columns-4 > section

{

width: 23%

}

Code

This is the first column












This is the second column












This is the thirdcolumn

Jquery Widget

I want to avoid them having to write classes on each column like the other layout systems. They will forget and are not comfortable using style sheets. I may eliminate the need completely using a jquery widget I’m working on. The widget would count the amount of embeded sections inside a section and add the appropriate classes.

Heres the questions

1. Does it seem simpler for our “non-designer” designers to read and implement then Blueprint or 960?

2. How would you go about making an easy way for them to do unequal columns? (like a sidebar) I thought of:

section.sidebar > section /* Redefines the width with the addition of a sidebar class */

{

width: 23%

}



section.sidebar > aside

{

width: 48%

}

Let me know what you think.

[hero]

Quick note:

Can’t seem to get child columns to display properly. Am I missing something?

[soap]

I know a lot of people are fans of using frameworks but I personally prefer to write the layout myself.

If you mean unequal in width then just give them a static width or use a percentage, doesn’t really matter.

.content {

width:640px;

}

.rightbar {

width:320px;

}

Teach them how floats work and you’re golden.

In my opinion, there is a lot more fuss about layout and grids than is necessary.

[hero]

There are some good benefits of grid systems, but that debate is as old as fluid verse fixed layouts or the equivalent of talking about politics or religion in a bar. I’m seeing a growing trend of people using them.

W3C is proposing one in the position module:

http://dev.w3.org/csswg/css3-grid/

The main question is how easy is it for a “non-designer” designer to use. I wish it where that easy for them to learn floats, but before that they would need to learn how to write HTML without an editor, and understand css.

Usually trying to get them to learn anything is followed by a z-snap, or the hand on the hip / cold glare manuever.

[soap]

That’s understandable. Tell them that they don’t know everything and that the first barrier to learning is thinking you know everything. You might have more problems trying to get them to use a CSS grid system than you would teaching them enough to do it themselves. There are going to be rules all over that stylesheet that are completely foreign to them and they might end up in a downward spiral. If these guys call themselves web designers then they had better learn CSS.

As for the grid debate, what I never understood was the fuss. How hard is it to create a proportionally correct layout? It takes a few divs and a few floats in most cases and in those rare cases when you decided to do something wild it just takes a bit of tweaking of percentages and positioning to get everything right.

I’m not against grid frameworks by any means, I just never had the urge or necessity to use one. Maybe I don’t understand fully what they are, who knows..

[hero]

I think it comes down to need. I have a division that has hundreds of pages. Most pages uniquely display content differently. They are setup like a magazine and have different gutters, child columns, etc.

Most sites only use up to four columns, but its hard to manage many pages with unique looks if they look like this:

http://www.blueprintcss.org/tests/parts/sample.html

There inst really a need if your managing a site that can up to four columns which is the norm. You can basically define generic classes like I did above to manage content layout.

[soap]

Well then maybe you want to narrow it down to exactly how many different layouts there will be and then from there create or use templates. Surely most of the pages will have at least numbers of columns in common, right?

[hero]

Most pages have mixed layouts. Its NOT…

page 1 – one columns
page 2 – two columns
page 3 – two columns with a sidebar offset

Look at the example. Imagine many different pages using different gutters, columns, spacings, etc

http://www.blueprintcss.org/tests/parts/sample.html

[Author]

Posts