web design PSD to html -> more direct ways?

Posted by Assembler on Stack Overflow See other posts from Stack Overflow or by Assembler
Published on 2009-07-07T06:06:24Z Indexed on 2011/01/15 18:53 UTC
Read the original article Hit count: 201

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about layout