Anyone here build their site based on grids?

Discussion in 'Web Design and Development' started by definitive, Jul 20, 2010.

  1. definitive macrumors 68000


    Aug 4, 2008
    I've always sketched website layout in illustrator, and then would build a site based on that. Recently I came across a few CSS sites that offer grid systems, and while I understand the purpose behind them, it just struck me odd that I've never heard about anyone who used such a system throughout the years of me building websites.

    Is it really a good practice to use such a thing? I get the grid system, but at the same time, I don't think it's really necessary for building websites...
  2. GadgetGeek71 macrumors 6502

    Mar 5, 2010
    Wherever I May Roam
    Can you modify the grid system? Seems that graphics would be a lot more choppy this way.
  3. jaikob macrumors 6502


    Jul 1, 2008
    Freeland, MI
    I still use good old fashion pen and paper. I sketch it, and I also pen my div pixel sizes in there too. :)

    As for the gird system. Never used it, and I am a professional web developer :p

    By the way, everyone designs and builds their sites different. There is the "Trial and Error" type, which will just go and make it all up as they go (usually the creative challenged types. It takes a long time to develop a good layout, me included haha), and the "Structural" type, which will have everything done prior to programming. Everyone is different :)
  4. definitive thread starter macrumors 68000


    Aug 4, 2008
    no, it's just a layout type of deal where it helps you arrange your text, columns and images so they all line up properly. it's more like a background image that repeats vertically, and you remove it once you're done laying out your website.

    here's an example:

    reason i asked is that i took a look at their css coding, and it was much more different than what i typically use. so i'm wondering if it's needed or not.
  5. eponym macrumors 6502

    Jul 2, 2010
    There are pros and cons to CSS frameworks (which is what you're really talking about).

    They can really help with bashing out consistent sites quickly. Especially as you become familiar with them.

    But there's 2 major downsides to them, IMHO:

    1) Their class naming structure tends to be too technical, and not semantically relevant. It can make reading and adjusting frustrating.

    2) You tend to design around the framework, instead of writing CSS to reflect your design.
  6. lucidmedia macrumors 6502a

    Oct 13, 2008
    Wellington, New Zealand
    alignment is a key element in creating both structure and visual hierarchy... two necessary elements for visual communication.

    A grid can assist with this. As long as you are not a slave to it (as that becomes boring and defeats the purpose of using a grid)

    If you are building a large-scale website, it is not uncommon to rough out a series of generic CSS rules that define the grid so you can quickly line things up.

    Once you've done this a lot, you realize that a chunk of that CSS can be carried from project to project and reused.

    This is where the frameworks come from. They are usually tightly written, flexible systems that you can use to quickly rough out a site.

    I have used 960gs for a few sites... its like any other framework, you need to use it a while to start to understand its strength and weaknesses...
  7. CMT macrumors regular


    Aug 24, 2009
    I do use 960gs when necessary.

    It depends a lot from the website you're building. A simple website may not need it, but a more magazine looking website, or newspaper looking, is easier to build with a grid.

    I'm not sure, but I think Apple uses a grid, that themselves made.

    Just a note: I do not recommend using a grid system if you're not experienced with CSS, specially floats.

    If you want to build your own, that's not difficult too. I also would recommend downloading the development version of 960gs and reading it. It's fun to read these things (well, at least for me :p ) and also make you understand better what's going on behind the scenes.

Share This Page