What's the best way to go from a Photoshop mockup to semantic HTML and CSS?

Question

I generally use a manual process:

1. Look at the page, figure out the semantic elements, and build the HTML
2. Slice up the images I think I'll need
3. Start writing CSS
4. Tweak and repeat different steps as necessary

Got a better approach, or a tool?

Answer 1

Some of the designers i know, usually uses Illustrator to make the design elements.

Answer 2

No shortcuts :) but everybody works slightly differently.

This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.

EDIT: The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.

Answer 3

This page shows how to do it a little more automated.

Answer 4

Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.

Some pointers how to markup things:

• menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:

    <ul id="menu">
       <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
       <li id="about"><a href="/about" title="More about us">About</a></li>
    </ul>
  

  if you'd like an horizontal menu you could do this:

    #menu li {
      display: block;
      float: left;
    }
  

  • Logo - use a H1 (heading) element for the logo instead of an image.Example:

    <div id="header">
      <h1>My website</h1>
    </div>

And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):

#header h1 {
  display: block;
  text-indent: -9999em;
  width: 200px;
  height: 100px;
  background: transparent url(images/logo.png) no-repeat;
}

• IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.

• Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.

I hope this helps :)

Answer 5

I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:

1. The page title is a top level heading

   • Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.

2. The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.

3. Section headers are h2, sections within those sections are h3s etc. Stack them up.

4. Use blockquotes and quotes where possible. Don't just surround it with ".

5. Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.

6. <label> your form elements.

7. Use <acronym>s and <abbr>s where possible, but only in the first instance.

8. The easiest: always, always give your images some alternate text.

9. There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.

That's just a few pointers, I'm sure I could think of more.

Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).

Answer 6

I essentially do the same thing Jon does, but here are a few other ideas:

1.) Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.

2.) Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.

3.) After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).

Notes on using Photoshop:

• Use Guides or the Grid.
• Use the Notes feature for any pertinent information
• Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
• Always name your layers.
• You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.

Answer 7

If you have money, outsource it to someone such as Psd2HTML

Answer 8

I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.

• What happens when more text is put in the navigation?
• Is this width fixed or fluid?
• Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
• You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?

It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.

Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.

Answer 9

Also, get to know the "Layer Comps" feature. I use this for changing button states.

1. Create layer comps for normal, hover, and active.
2. In each of these, set up the effects/color overlays and visible layers which belong with that state.
3. Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).