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

  • http://www.hotsaucestudio.com toe

    Paul,
    This is awesome! Thanks for finding and sharing this!

  • http://www.ohliberte.com Luke Lux

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

  • http://keycss.com joao

    top notch Paul.

    You the man;

  • http://www.joomlacreative.com Ed

    sweet find Paul,

    will be trying this one out immediately!

  • http://zlevine.com zackn9ne

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

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

  • http://codeandeffect.co.uk/blog AM Doherty

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

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

  • http://mmuller.com/blog Marcel Müller

    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.

    Link: http://site.ringce.com/products/slammer/slammer.html

    Sadly it’s a Mac only app.

  • Mark

    GridFox for FireFox is also quite nice: https://addons.mozilla.org/en-US/firefox/addon/4904

    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.

  • http://www.grahamrobertsonmiller.co.uk/ Graham Miller

    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: 
    http://www.grahamrobertsonmiller.co.uk/mockup-in-markup/n1

Headscape

Boagworld