16Jul2006

Using a Background Image Grid to Lay Out Your Web Site

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 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.

Posted on: July 16, 2006 | 43 Comments

43 Comments Posted

Wow this is absolutly brilliant and highly useful. :D
will be using it when composing my next css design.
10X.

1. Posted by Danny on July 17, 2006

Nice work! :) This is going to come in very useful.

Mark

2. Posted by Mark on July 18, 2006

very good work. IMO it is the best tool of the week :)

3. Posted by Koziołek on July 18, 2006

nice. very nice. thanks for willingly sharing with the world.

4. Posted by jen on July 18, 2006

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

5. Posted by Stephen Hill on July 18, 2006

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.

6. Posted by Ross Johnson on July 18, 2006

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.

7. Posted by Timbronze on July 18, 2006

Wow! Really good!!

8. Posted by Ramon Bispo on July 18, 2006

Oh, such a simple solution, yet so effective. Thanks for the tip!

9. Posted by Antti Kupila on July 18, 2006

It would be cool to have it in the web developer extension, like a transparent overlay layer ...

10. Posted by Egon on July 18, 2006

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?

11. Posted by Datrio on July 18, 2006

Simply: Thanks a lot!

12. Posted by who-cares on July 18, 2006

Wow. That's absolutely brilliant and now so obvious. I'll definitely try this on my next project.

13. Posted by Adam Romig on July 18, 2006

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 ) 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.

14. Posted by Christian Watson on July 18, 2006

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.

15. Posted by Damien on July 18, 2006

Really useful idea. I was never think like this grid. :)

16. Posted by fatihturan on July 19, 2006

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!!

17. Posted by Fotis Evangelou on July 19, 2006

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).

18. Posted by Si Jobling on July 19, 2006

Good tip! You deserve a kiss, ops, just a hug! lol

19. Posted by Erik on July 19, 2006

Oh my god a nice tip, this really works for easly and quick finding browser differences. Very much appreciated tip!

You made my day!

20. Posted by Adam K on July 19, 2006

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.

21. Posted by Justin Reid on July 19, 2006

This has been in Dreamweaver for ages as something you can simply turn on or off without having to create a background image.

22. Posted by Brandon on July 19, 2006

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!!!

23. Posted by Nando Vieira on July 19, 2006

Great! thanks Nando

24. Posted by Egon on July 19, 2006

Not new.

See Dreamweaver Tracing Image

But, it's a simple ideia.

25. Posted by JM on July 20, 2006

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.

26. Posted by Christian Watson on July 20, 2006

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

27. Posted by Nando Vieira on July 20, 2006

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!

28. Posted by Christian Watson on July 20, 2006

...I posted the thumb url. Here's the image:

http://img74.imageshack.us/img74/6362/screenshotol7.png

29. Posted by Nando Vieira on July 20, 2006

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

30. Posted by Todd on July 20, 2006

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.

31. Posted by Steve on July 21, 2006

Im a designes and illustrator, for me is very very useful, thanks for the big tip.

and keep going!!

32. Posted by sergio on July 21, 2006

Cool extension Nando, thx! :) I modified it to include the graphic using the pixel font here: www.toddvanarsdale.com/tools/layoutgridpixel.xpi

BTW, forgot to say thanks for making this post in the first place. Made my week. :-)

33. Posted by Todd on July 21, 2006

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 ;)

34. Posted by CountZero on July 23, 2006

Thanks for the firefox extension.

35. Posted by seba on July 24, 2006

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

36. Posted by Stephen Hill on July 24, 2006

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

37. Posted by Stephen Hill on July 24, 2006

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.

38. Posted by Charlie Park on July 27, 2006

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.

39. Posted by Tom Watson on August 08, 2006

@Tom Watson: If you read the comments then you will see this has already been mentioned

40. Posted by Stephen Hill on August 09, 2006

Good technics! It's very usefull for crossbrowser markup!

41. Posted by dreel on August 24, 2006

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!

42. Posted by Proimpulse Website Design on August 27, 2006