Grid Calculation Do's and Don't (Some help please)

[Denis]

Hi all,

Been reading material on BlueprintCSS for a few days now and gone
through some of the demos etc. Really interested in sitting down and
applying this framework. The project I'm on is a re-design rather than
a green-field.

I'm supporting 1024x768 as my base resolution. My header currently has
a bg colour running the full width of any resolution and I think the
footer may as well. I mention this because the design will have a drop
shadow on the left and right of the container.

I want to use as much of the screen as possible and after some testing
on different monitors I think I can stretch to 996px without impacting
the user experience.

After using http://www.29digital.net/grid/ to get an idea of the
column and gutter I settled on:

24 columns
30px width
12px gutter
996px total

The problem I then ran into was that the design needs smaller columns
(approx 20px) to ensure I can match up the layout.

My questions are; how should I factor (if at all) in the drop shadow?
What grid combination should I be looking at?

Cheers
Denis

[Denis]

I also meant to ask about any guidelines there are for defining my
grid, such as avoiding odd numbers etc.

Is there any tutorials on this kind of thing?

On Jun 24, 5:30 pm, Denis <denishoc...@gmail.com> wrote:
> Hi all,
>
> Been reading material on BlueprintCSS for a few days now and gone
> through some of the demos etc. Really interested in sitting down and
> applying this framework. The project I'm on is a re-design rather than
> a green-field.
>
> I'm supporting 1024x768 as my base resolution. My header currently has
> a bg colour running the full width of any resolution and I think the
> footer may as well. I mention this because the design will have a drop
> shadow on the left and right of the container.
>
> I want to use as much of the screen as possible and after some testing
> on different monitors I think I can stretch to 996px without impacting
> the user experience.
>

> After usinghttp://www.29digital.net/grid/to get an idea of the

[Sam Sherlock]

http://sharebrain.info/resources/daily-helpers/layout-grid-bookmarklet/246/

http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/

there is another gridbookmarklet better than Andy Budds it allows you to load an adjustable grid over anypage but site is down (I am pretty certain this is the one I am thinking about)

http://www.sprymedia.co.uk/article/Grid
- S

2009/6/25 Denis <denis...@gmail.com>

[Denis]

Thanks for that Sam, I found another good one here: http://bluecalc.groupion.com/index.php

But what I'm after is do's and don'ts for grids like;

Is it ok to uses gutters below 8px?

Is there any cons to having a large number of columns apart from the
extra counting? (32+)

Does using odd numbers for columns/gutters/width of columns cause
issues down the line?

Thanks
Denis



On Jun 25, 12:43 pm, Sam Sherlock <sam.sherl...@gmail.com> wrote:
> http://sharebrain.info/resources/daily-helpers/layout-grid-bookmarkle...http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/

> <http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/>there is
> another gridbookmarklet better than Andy Budds it allows you to load an
> adjustable grid over anypage but site is down (I am pretty certain this is

> the one I am thinking about)http://www.sprymedia.co.uk/article/Grid
> - S
>
> 2009/6/25 Denis <denishoc...@gmail.com>

>
>
>
> > I also meant to ask about any guidelines there are for defining my
> > grid, such as avoiding odd numbers etc.
>
> > Is there any tutorials on this kind of thing?
>
> > On Jun 24, 5:30 pm, Denis <denishoc...@gmail.com> wrote:
> > > Hi all,
>
> > > Been reading material on BlueprintCSS for a few days now and gone
> > > through some of the demos etc. Really interested in sitting down and
> > > applying this framework. The project I'm on is a re-design rather than
> > > a green-field.
>
> > > I'm supporting 1024x768 as my base resolution. My header currently has
> > > a bg colour running the full width of any resolution and I think the
> > > footer may as well. I mention this because the design will have a drop
> > > shadow on the left and right of the container.
>
> > > I want to use as much of the screen as possible and after some testing
> > > on different monitors I think I can stretch to 996px without impacting
> > > the user experience.
>

> > > After usinghttp://www.29digital.net/grid/toget an idea of the

[Sam Sherlock]

try this 

http://www.vcarrer.com/2009/05/o-rule-golden-proportion-for.html

in general the site is a great source of info, also an interesting talk by mark boulton on typog at fowd i think

 
- S

2009/6/25 Denis <denis...@gmail.com>

[G. D. Speer]

Hi Denis -

For lack of anyone else weighing in, I'll say this ...
To my knowledge there are no tech issues to large numbers of columns or odd
numbers.
The page weight increases (larger CSS) as you add columns because there are
6 or so new style rules for each added column.
Maintainability gets more difficult in a team environment as it's harder to
figure out what you did and why. If you are after a certain
pixel-perfect alignment, it may be more advantageous to simply plug in the
sizes you want and forget about grid abstractions.

From a design prespective, you begin to lose elegance when the columns are
not easily divisible into thirds, fourths, sixths and eighths.
That's the magic of 24 - it easily accomodates those splits and splits of
those splits.

If you have a design reason to go odd, go odd. Look at Eric Meyer's complex
spiral project all based on the rule of thirds - that would take
you to unusual column sizes if followed recursively for several splits with
mathematical precision.

Grids are the online equivalent of graph paper - pick a size that seems to
support your design intentions and run with it. You can always
resize the grid - look at the Compass project to see blueprint grids resized
on the fly.

Gutters can be any size as well - just like margins. If they get too small,
the page becomes harder to read due to lack of whitespace / separation of
text from nearby edges, but the judge of that is you, the designer. If you
are prepending or appending to make larger effective gutters, then gutter
size becomes less significant as the total whitespace is what's visually
important. Only you know where the grid and gutter lines are. There are no
right or wrong answers.
Duke

--------------------------------------------------------------------------------



No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.339 / Virus Database: 270.12.91/2201 - Release Date: 06/25/09
06:22:00