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

Tags: css html
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?



Answers

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 :)

By : Andy


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.


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).


This video can help you solving your question :)
By: admin