web design PSD to html -> more direct ways? [closed]

Question

At work I see one colleague designing a site in Photoshop/Fireworks, I see another taking this data, slicing it up and using Dreamweaver to rebuild the same from scratch.

It seems like too much mucking around!

I know that Photoshop can output a tables based HTML, and Fireworks will create divs with absolute positioning; neither appear to be very helpful.

Admittedly, I haven't tried much of (DW/FW) (CS4/CS3) since becoming a programmer, so I don't know if new versions are addressing this work flow issue, but are we still double handling things?

Can we attach some sort of layout metadata (this is a rollover button, this will be a SWF, this will be text, this logo will hide "xyz" <h1> text etc) to slices to aid in layout generation? are there some secret tools which assist in this conversion process? Or are we still restricted to doing things by hand?

The frustration continues when said hand built page needs to be reworked again to fit Smarty Templates/Wordpress/generic CMS.

I acknowledge that designers need to be free of systems to be able to do whatever, but most conventional sites have:

• a header with navigation
• a sidebar with more links
• the main content part
• maybe another sidebar
• a footer

Given the similarity of a lot of components, shouldn't there be a more systematic approach to going from sliced designs to functional HTML?

Or am I over-simplifying things?

-edit- Mmmmm.... I suppose I will accept an answer, but they weren't really what I was looking for.

It just seems like designing the DOM is a bit of holy grail ("It's only a model!"), and maybe with all the "groovy" things you can do with HTML and Javascript, it would be mighty hard work, but with a set of constraints (that 960 stuff looks interesting), some well designed reset style sheets and a bit of... fairy dust? we should be able to improve the work flow.

Photoshop's tables by themselves are pretty much useless, I agree, but surely we can take this data, and then select a group of cells and say "right, this is a text div, overflow:auto" or "these cells are an image block, style it with the same height/width as the selected area". Admittedly here at work there are other elephants in the room that need to make their formal introductions to management, but some parts of the design>page workflow seem... uneducated at best.

Answer 1

To me, doing it by hand is an advantage. You only have to get it right once, and if you're going specifically for visual appeal, you've likely got a lot of work ahead of you making it cross-browser friendly...

Would love to hear other answers. This is just my take on it as I make more data-driven than visually appealing sites.

Answer 2

Skip Photoshop entirely and just get your designers mocking up straight in the view HTML. Not only will you remove the complicated, awkward-feeling process you're feeling, but you'll get better, more resilient designs, because 100% of it will be based on what's possible in HTML/CSS, not what's possible in Photoshop.

More reading:

• Why We Skip Photoshop (37signals)
• Walls Come Tumbling Down (Andy Clarke) (via Jason Berry's answer)
• Web Designers Should Do Their Own HTML/CSS (37signals) (via Paul Souders' answer)