I recently came across Khoi Vinh’s post about using a background image of a grid to help you lay out your page as you are building it [via Garrett Dimon].
Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.
This seems like such a useful technique, especially when it comes to resolving cross-browser differences, that I’m surprised I haven’t seen it referenced before (maybe I just don’t move in the right circles).
As Khoi says himself:
Coming up with this little trick left me very pleased with myself, as it allowed me to produce easily the most precise layouts of my career.
I thought it might be useful expand upon this idea and create a generic grid template that one could use with any layout, and so I came up with the example below:
I haven’t thoroughly tested it out yet in the form of applying it to real-world design projects, so if there are some improvements you’d like to see just let me know.
Or, you can add them yourself; I’ve included the Fireworks source file (old school, I know) for you to customize as you see fit.
In a similar vein, you should also check out Greg Storey’s ruler image technique, which works well in conjunction with the grid image.
Wow this is absolutly brilliant and highly useful. 😀
will be using it when composing my next css design.
10X.
Nice work! 🙂 This is going to come in very useful.
Mark
very good work. IMO it is the best tool of the week 🙂
nice. very nice. thanks for willingly sharing with the world.
Hello,
I really like this idea… but I would like to suggest an improvement on the design 😉
I would use css to set the background to the HTML tag rather than the body, incase you want to use the body tag for a fixed width layout.
And then, you can then make the body transparent so you can always see the grid and where objects cross each other.
The example can be seen here:
gatekiller.co.uk/LayoutGrid/
Feel free to use and abuse to your hearts content 🙂
Cheers
GK
Great tip. I have always used ruler add-ons for browser to measure distances (which still has it’s time and place) but this seems like a better method of laying out the page itself.
If like me you like to initially design a site in say photoshop, this is great image as a background layer as you can see exactly how your site will fit prior to building it in css. I found it easier to use than the rulers and grids provided.
GREAT IDEA.
Wow! Really good!!
Oh, such a simple solution, yet so effective. Thanks for the tip!
It would be cool to have it in the web developer extension, like a transparent overlay layer …
My God, why didn’t I think of it!?
But I’ll move even further – this might help some people. Put the background image on the HTML element, and than set opacity: 0.5; for the BODY element. How about that?
Simply: Thanks a lot!
Wow. That’s absolutely brilliant and now so obvious. I’ll definitely try this on my next project.
All – thanks for the feedback and I hope you find the template useful. My hope is that others will take the idea and develop it (much like “Stephen has done”:https://smileycat.com/miaow/archives/000264.php#comment-13164 ) as I’m sure there are numerous enhancements that can be made.
For example, although it looks nice, I’m not sure how useful the ruler along the top really is. Perhaps it needs to be repeated further down the page? Also, should there be a vertical ruler or is that just overkill?
I haven’t used this technique enough to know what works and what doesn’t, but as I come up with new ideas I’ll be certain to add them to this post.
Thats a great idea. I’ve been generally applying faux column backgrounds and workging from those but this is a great extension of that idea.
Really useful idea. I was never think like this grid. 🙂
Hats off!! And a better proposal/solution than Khoi Vinh’s, which was also inspired from Airbag (Greg Storey)…
It is a must for anyone toying around with complex designs and content management systems (like Joomla for example). I belong to the designer/developer hybrid kind of people and as time passes by and my knowledge on both progresses, I tend to use less Photoshop, but more coding.
I find it faster to use a starting xhtml/css layout template to design a new template, in comparison to what I used to do with Photoshop. Photoshop now serves for pure graphic imagery and in an assistive way.
Your layout grid is now a part of this starting template and a godsend when testing through different browsers, when measuring tools don’t work.
For anyone working on CMSs like Joomla, it shouldn’t be difficult to just apply the grid background on a duplicate css style, login as admin when necessery and switch through stylesheets on the frontend to enable/disable the grid live.
Again, hats off!!
This is a great technique for fixed-width layouts but doesn’t do much for promoting liquid or elastic layouts.
Nice idea however and thanks for sharing the graphic(s).
Good tip! You deserve a kiss, ops, just a hug! lol
Oh my god a nice tip, this really works for easly and quick finding browser differences. Very much appreciated tip!
You made my day!
Very nice. I’m too lazy to do this myself, but a version that starts out at 0,0 in the top center might also be helpful.
And I think the application for this is more than just for any one tag (body, or the suggested html). You can use it as a background image for any individual element that you want to check the measurements of. Might even helps some to understand the box model.
This has been in Dreamweaver for ages as something you can simply turn on or off without having to create a background image.
Hi.
I created a simple extension that adds/removes layout grid to the current page.
I changed the starting point so you’re able to always view the rule mark. This extension adds padding to HTML element and sets opacity to 0.5.
Works great if you don’t use absolute-positioned elements.
Check it out at http://simplesideias.com.br/layoutgrid.xpi
Btw, great article!!!
Great! thanks Nando
Not new.
See Dreamweaver Tracing Image
But, it’s a simple ideia.
*Nando* – can you tell me how you get the extension to work? Maybe I’m missing something, but I can’t see how you activate it!
*JM* – really? I didn’t know that. There again, although I’m on Dreamweaver 8 I still tend to use it as an expensive text editor.
*Note to self*: I must take the time to learn some of the things you can do in DW to make coding easier.
Christian: Just drag the xpi you downloaded to firefox. Then, click on its icon [1] for enabling/disabling it.
[1] http://img74.imageshack.us/img74/6362/screenshotol7.th.png
*Nando* – got it at last! The problem was that I couldn’t find the icon in order to click on it. I finally noticed that it was down in the status bar.
Wow – it really works great. I’ve been clicking around a bunch of sites looking at how they line up with the grid. This could be really useful. Thanks!
…I posted the thumb url. Here’s the image:
http://img74.imageshack.us/img74/6362/screenshotol7.png
Hope you don’t mind, but I took the liberty of recreating the .gif here with a pixel font, so the text is a little more legible at high resolutions.
http://www.toddvanarsdale.com/images/web-grid.gif
Well, it just takes the simple things in life…..
Awsome idea. I will definately be using this in any web designs I creat in the future. Plus as I work in one of the worlds largest marketing agencies I’m definately going to try and get our designers to use this image on a base layer within their Photoshop designs to help the developers receive pixel perfect designs.
Im a designes and illustrator, for me is very very useful, thanks for the big tip.
and keep going!!
Cool extension Nando, thx! 🙂 I modified it to include the graphic using the pixel font here: http://www.toddvanarsdale.com/tools/layoutgridpixel.xpi
BTW, forgot to say thanks for making this post in the first place. Made my week. 🙂
Good idea that, with that grid/ruler image. Never thought about that before. It’s as always – the easiest ideas are the most useful ones 😉
Thanks for the firefox extension.
There seems to be alot of buzz going around about this post 🙂
I really like the firefox extentions, however, im going to go with Andy Budd’s idea of bookmarklets.
This means you can use the grid idea is any browser not just firefox, which I hope we all should be doing 🙂
Cheers
GK
After reading Andy Budd’s article and the idea of bookmarklets, I quickly created by own bookmarklet based upon my Layout Grid. This bookmarklet sets the background to the HTML tag and then sets the BODY tag to an opacity of 75%. Here it is:
Layout Grid Bookmarklet (text file).
Hope this is useful to all 🙂
Cheers
GK
Thanks for this, Christian. To add to the conversation, here’s another take, this time, for percent-based layouts. How to Lay Out Percent-Based Rulers in CSS, in 4 Easy Steps.
Christian,
Don’t know if you saw this, but I think this is probably the best implementation of the grid layout yet.
The show/hide bookmarklet version is my favorite.
@Tom Watson: If you read the comments then you will see this has already been mentioned
Good technics! It’s very usefull for crossbrowser markup!
Excellent! I have never seen this done in the 7 years of doing website design. I use it in photoshop but never even thought of this.
Thanks for sharing this wonderful tool!
Could be helpful, thanks!