L Squared Design

...pursuing excellence in web design

Markup first, then images


In the past once I was done with a site design in Fireworks, the first thing I would do is slice the images. Once they were done I would move to a text editor and write the HTML and CSS. I’ve recently discovered a better way. Many of you may already work this way, but this was new to me.

After reading Transcending CSS , and trying out the 960 grid system framework , my last few designs have started from the HTML, and worked from there. I’ve marked up the content semantically in HTML, then laid out the page using CSS. Once everything was were I wanted it to be, I set about creating background images, logos, etc from my design comp.

I found that using this process went a lot faster, with fewer hiccups. It made it easier to troubleshoot problems, and seeing the design with no visual embellishments helps to confirm that a design is solid.

On a related note, using 960 was a great. Using the included Fireworks template and ensures that I use a strong grid, and then moving from that to the code is quite easy. Taking a bit of time to learn the system at the beginning has saved lots of time on other projects, and probably even make the first site I did shorter overall. I’m definitely adding this to my web design toolbox.

Les Reynolds

| Categories: ,



© 2011 L Squared Design. All rights reserved. | 905.220.5534 | Valid XHTML | Built on Textpattern | Twitter