Top design tip for designing in the browser

There is an increasing movement to put aside photoshop or fireworks and design directly in the browser. However, this can be difficult without the benefits of a strong grid system. This tip will help.

Grab the grid bookmarklet now

  • toe

    This is awesome! Thanks for finding and sharing this!

  • It’s a great post, so inspirational.
    Thanks to share it!

  • top notch Paul.

    You the man;

  • Ed

    sweet find Paul,

    will be trying this one out immediately!

  • awesome. cant wait to see how it helps the vertical text rythm.

    how are you supposed to accurately layout your css without this? by mathematical numbers brought over from a photoshop grid?

  • Robert

    Great tip! Thanks so much, Paul. I’ll be putting grid to good use.

  • I can see that becoming permanently added to the toolkit – a fantastic resource.

    The folks at sprymedia can be rightly proud o’ themselves.

  • Thanks, Paul!

    There’s another useful grid tool called Slammer. It works the same way the bookmarklet you posted, except that it’s an app. You can use it offline and along with other software.


    Sadly it’s a Mac only app.

  • Mark

    GridFox for FireFox is also quite nice:

    Not as sophisticated as the bookmarklet demo’d here though and only available for use in FF obviously – still handy though.

    Cheers for the info Paul.

  • I used to design in photoshop (and tell everyone how good it was) but like the worst kind of ex-smoker, I’m now adamant that everyone should design in a browser.  Here are my top 15 reasons why you should mockup in markup: