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

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 2

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 3

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 4

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.