web design PSD to html -> more direct ways?

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

Omega touched on it, but I think the biggest problem is cross-browser compatibility. If all those browser quirks didn't exist (coughInternetExplorercough), what you suggested would be much simpler. However, it often takes a lot of hand-coding to make it look pixel-perfect in every browser.

Another thing is fine-grained control. Sure, you can just pop your PSD template into Dreamweaver or whatnot and have a working website, but it's going to use hacks and ugly things like tables to make it work. And even then, it probably won't work entirely like you want it to. You have to remember things like accessibility and SEO, too, and Dreamweaver just can't give you that.

Answer 3

It's a nice pie-in-the-sky sorta dream, but I think as long as websites are written in (X)HTML/CSS, at the end of the day, you'll always have to do some, most or all of the work manually.

There's just a fundamental rift between static pixels in some 'shopping software and dynamic, changing, expanding, content-focused, text-based sites. The best tool to bridge that gap is still... the human professional.

Tools like iWeb (completely WYSIWYG) or DW/Fireworks (somewhere in the middle) only get you so far or have serious limitations. You get only pre-fabbed templates in case of iWeb, often sub-optimal code in case of DW/Fireworks. You'll have to decide which limitations you can live with and when it's best to do it manually.

Answer 4

A number of people nowadays are designing straight into the browser using (X)HTML/CSS because of that exact problem - all of the mucking around with Photoshop and then going to code after getting the client to sign-off on a static design.

A good read is Andy Clarke's Walls Come Tumbling Down presentation.

Answer 5

There are several tools such as Sitegrinder that do just that.

Adobe themselves has a project in Labs called Catalyst that does what you describe and more for Flash:

It takes the slices from Photoshop, allows you to change their properties and export it to a working Flash file. (Right click box, add text property, it becomes a text field...)

If you watch their video (which you should - its amazing), you will see that they are deluded into thinking that websites will soon be built this way.

Before Zimbra was bought by Yahoo, it looked like they were heading towards such a tool that outputted cross-platform HTML similar to what catalyst does for flash. No more. But with the shake-ups at Yahoo, such software may still rise from the Zimbra ashes.

Answer 6

In my opinion, a site should be mocked up in Photoshop if necessary, with parts being cut out for use in the actual site, but to design the site completely in Photoshop, then want to make it work on the web is just going about it backwards. Really the two should be done in parallel.

In short, graphic designers design the look of a website, but you need a programmer to program it.

Answer 7

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)

Answer 8

My opinion is that HTML/CSS is sufficiently simple that a competent web designer should be moderately fluent in it. Photoshop has its place for quick look-and-feel experiments, but I think this misses an important step: user experience design.

Personally, I've been designing and prototyping directly in HTML for some time now. This is where the clean separation of content and layout provided by CSS really shines. I organize pages into regions using unstyled divs, which allows me to organize the page conceptually (i.e. keep related items near each other in the code) and postpone thinking about appearance. This has the side effect of making a pretty thorough site inventory.

Next I'll use CSS to lay out the divs, which happily also produces wireframes (useful for reviews and paper prototyping.)

The last step is applying visual elements: color, text styles, graphics. I'll use whatever graphic program I need to cook up the pretty.

Note the orthogonality inherent in this method: develop concepts, then layout, then look and feel. This puts the hard thinking (conceptual models) up front, and the most volatile thinking (colors/styles) at the end. So when the art director changes the color palette, you only have to edit one CSS file. And if you need to change your conceptual model, much of the layout and look/feel may be reusable.

If you need traction in this method you can use a standard css grid like 960 (http://960.gs/). It handles a lot of the arithmetic and floaty business that makes layout such a chore.

In addition to Rahul's link above I also recommend: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss

Answer 9

What you probably should go for is train the designers to work within a well established grid system for their site designs. If they can understand the layout as a grid/block system a lot of interesting design can be accomplished within those constraints. But it isn't going to be straight conversion from PSD to HTML because they are two completely different ways of representing visual data.

There are lots of frameworks that make the css work easier. One is Blueprint CSS

http://www.blueprintcss.org/

There are lots of templates out there for representing the grid system within photoshop.

http://konigi.com/tools/photoshop-template-blueprint-css-comps

Think of the grid as a visual constraints layer, then the design can be mapped between a photoshop comp and specific HTML/CSS implementation. Visual elements have to be bounded within clean grid boxes. SOme elements or units within the grid can be mapped to background images. Others solid colors or white space with div containers holding content.

With a well understood and grid framework you can get pretty close to pixel perfect layouts.

Also, good designers will understand how to use white space effectively in a design mockup. If there is lots weird intersecting lines and crossover elements in the visual design then that presents a real challenge for implementation. Just because you can visually imagine it doesn't mean it is easy to implement in a browser without making certain kinds of trade offs for the way HTML and CSS work. Think of the grid system as the constraints and an effective way to judge layout requirements.

Answer 10

Personally, I design it in html/css first using borders and background colors. I then take the PSD and insert the images as background images or html images. It's pretty fast, the code is yours so you know what each css rule mean which speed up the dev process (as opposed to to PS's awkward sliced image names and css selectors names)