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

Related Post

You are in demand. Don’t settle! In today's knowledge economy digital professionals are the most valuable commodity organisations have. Don't stay somewhere that doesn't appreciate that.
How to create fast, impressive proposals that sell Writing proposals are a necessary evil of selling digital services. But even when we win projects, our proposals often fail us. Fortunately there is a better way.
Designing with data and incremental development Designing with data and incremental development are great in principle. But practically they face problems. Problems a new generation of tool help us overcome.
  • toe

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

    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.

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

    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.

  • 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

Boagworks

Boagworld