PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Aug 29 2010 by Eric Hoffman | 33 Comments

This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.

Final Result

Click on the final result preview below to see a live demo. Since we are using some CSS3, this demo might not look exactly the same in all browsers.

Final Result

View Demo

Create the Basic Files

1 The first thing we’ll do is set up the files and folders. Create a new folder in your computer and name it letterpress. This will be our working directory.

2 Create 2 folders inside the letterpress folder and name them images and styles.

3 Open up your favorite HTML/CSS editor (such as Dreamweaver or Notepad++) and create an HTML document. Name it index.html or some other preferred file name. Save this HTML document inside the letterpress folder.

4 Create a stylesheet document and name it style.css (or any other name you want). Save this file inside the styles folder.

Basic HTML

5 The code below goes in index.html. The code represents common HTML markup.

<!DOCTYPE HTML>
<html>
  <head>
  <title>Letterpress</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

</body>
</html>

Slice the Bookmark from the PSD

6 Now open up Photoshop and open the PSD we created together from Part 1 of this tutorial series.

7 Hide all except all Photoshop layers except these layers:

  • Datebg and shadow
  • Headerdivider
  • Navbarbg
  • Logo
  • Sidebar
  • Sidebar divider
  • Background
  • Widgetbg
  • Footerbg
  • Image
  • imagebg

Slice the PSD

8 Use the Rectangular Marquee Tool (M) to select the bookmark that indicates the active page.

Slice the PSD

9 Copy the selection by going to Edit > Copy Merged (Ctrl/Cmd + Shift + C).

Slice the PSD

10 Open a new Photoshop document (Ctrl/Cmd +N); don’t change the canvas size because it will have automatically set it to the dimensions of the most current thing on your clipboard (the bookmark, in this case).

Slice the PSD

11 press Ctrl/Cmd + V (the keyboard shortcut for Edit > Paste) to paste the copied selection in the new Photoshop document.

12 Go to Edit > Save for the Web and save the new document as a JPG in the images folder.

Slice the PSD

Write the HTML Markup

I usually code the HTML (with the classes and ids) first, and then write the CSS to style the site afterwards. This way I don’t have to switch back and forth and can keep my workflow compartmentalized. We’ll start writing the code for all the different sections of our design first, then style them later.

Container

13 Create a div with the ID of container; It will be used as a wrapper for all the elements except the footer. We’re doing this so that we can easily center the layout later on.

14 Create a div for the logo and insert the image of the site’s logo inside it. You can slice the logo from the PSD mockup using the same process as discussed earlier, or insert your own logo (preferred).

<!-- CONTAINER -->
<div id="container">
  <!-- LOGO -->
  <div id="logo">
    <img src="images/logo.jpg" width="348" height="60" title="logo" />
  </div>

Slice the PSD

Navigation Bar

15 Next, we’ll create the navigation bar. Use an unordered list and add each navigation bar link as a list item. Add the ID of firstlink to the first list item; this way you can add a background-image to the current link (which is the bookmark that we sliced out of the PSD). Also add a divider.

<!-- NAVIGATION BAR -->
<div id="navigationbar">
  <ul>
    <li id="firstlink"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Archives</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<div id="dividerheader"></div>

Slice the PSD

Sidebar

16 Create another div and give it the ID of sidebar.

17 Insert a form with an input type="text" element.

18 Change the default value of the input element to Search, the size attribute should be set to 29 (for 29 characters), and give it a JavaScript event listener so that when the user focuses or leaves the input element, it calls a function called clearText().

Note: It’s highly advised to write JavaScript unobtrusively. Since we are going to gloss over JavaScript in this tutorial, I’ve decided to have this functionality inline. Please use unobtrusive JavaScript.

onFocus="clearText(this)" onBlur="clearText(this);

This is the function that will handle the hiding/showing of the “Search” text inside the search input.

<script type="text/javascript">
function clearText(field)
{
  if (field.defaultValue == field.value) field.value = '';
  else if (field.value == '') field.value = field.defaultValue;
}
</script>

Here is our HTML markup for the sidebar and the search form.

<!-- SIDEBAR -->
<div id="sidecolumn">
  <!-- SEARCH -->
  <form>
    <input type="text" id="searchform" value="Search" size="29" onFocus="clearText(this)" onBlur="clearText(this)">
  </form>
<div id="dividersidebar"></div>

Slice the PSD

Recent Posts and Latest Comments

19 Create two divs; give one the ID of recentposts and the other, latestcomments.

20 Add a divider between them. Type some sample content in and be sure to add a heading and paragraph elements. Use HTML character codes for the right-pointing double angle quotes (») which is &#187;. You can find a full list of HTML character codes here. I used <li> tags for each comment/post name, and will style them later.

<!-- RECENT POSTS -->
<div id="recentposts">
  <h1>Recent Posts</h1>
  <ul>
    <li><a href="#">&#187; Lorem Ipsum post</li>
    <li><a href="#">&#187; Another post</a></li>
    <li><a href="#">&#187; I'm just writing things</a></li>
  </ul>
</div>
<div id="dividersidebar"></div>
<!-- LATEST COMMENTS -->
<div id="latestcomments">
  <h1>Latest Comments</h1>
  <ul>
    <li><a href="#">&#187; "Blah Blah Blah..."</a></li>
    <li><a href="#">&#187; "Blah Blah Blah..."</a></li>
    <li><a href="#">&#187; "Blah Blah Blah..."</a></li>
</ul>
</div>

Recent Posts and Latest Comments

Sidebar Web Banners

Every blog has advertising zones these days, why shouldn’t ours?

21 Inside the #sidebar div, add another div that will contain our web banners.

22 The first two web banners need to have the ID of adrightfirst (for right one) and adleftfirst (for the left one). Since we only have enough space for two ads in one row, you have to add a line break for every row.

<!-- ADVERTISING -->
  <div id="adrightfirst"></div>
  <div id="adleftfirst"></div> <br />
  <div class="adright"></div>
  <div class="adleft"></div> <br />
  <div class="adright"></div>
  <div class="adleft"></div> <br />
  <div class="adright"></div>
  <div class="adleft"></div>
</div>
<!-- END OF SIDEBAR -->

Sidebar Web Banners

Posts

Onto the markup for the blog posts.

23 Create a date1, datetext1 and post1 div.

24 Add the date (day using <h1>, month in <p>), the title (using <h1>), metadata of the post (using <h2>) and some content (in <p>‘s).

25 Copy the entire post div, and paste it beneath (to create another blog post entry). Insert a divider between both posts. Don’t forget to change the numbers (date1 to date2).

<!-- DATE ONE -->
<div id="date1">
  <div id="datetext">
    <h1>13</h1>
    <p>apr</p>
  </div>
</div>
<!-- POST ONE -->
<div id="post1">
  <h1>I enjoy reading Six Revisions</h1>
  <h2>By Eric Hoffman  ·  1223 Comments </h2>
  <img src="images/snowboard.jpg" title="snowboard" style="margin: 5px 0px 5px 0px"/>
  <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#"><i>Continue Reading... </i></a></p>
  <div id="dividerpost"></div>
</div>
<!-- DATE TWO -->
  <div id="date2">
    <div id="datetext">
      <h1>12</h1>
      <p>apr</p>
    </div>
  </div>
<!-- POST TWO -->
  <div id="post2">
    <h1>Who likes Obama?</h1>
    <h2>By George Bush  ·  0 Comments </h2>
    <img src="images/snowboard.jpg" title="snowboard" style="margin: 5px 0px 5px 0px"/>
    <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#"><i>Continue Reading... </i></a></p>
  </div>
</div>
<!-- END OF CONTAINER -->

Sidebar Web Banners

Footer Widgets

26 Create another div and give it an ID of footerwidgets. Place a div with the ID footerwidgettext inside this div. Insert three divs with different ids. For example: footerwidgettextfirst, footerwidgettextmiddle, and so forth. The reason for having unique IDs is each one will have different margins, so we can’t use a class.

<!-- FOOTERWIDGETS -->
<div id="footerwidget">
  <div id="footerwidgettext">
<!-- WIDGET ONE -->
    <div id="footerwidgettextfirst">
      <h1>Widget title </h1>
      <p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p>
    </div>
<!-- WIDGET TWO -->
    <div id="footerwidgettextmiddle">
      <h1>Widget title </h1>
    <p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p>
    </div>
<!-- WIDGET THREE -->
    <div id="footerwidgettextlast">
      <h1>Widget title </h1>
      <p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p>
    </div>
  </div>
</div>
<!-- END OF FOOTER WIDGETS -->

Sidebar Web Banners

Footer

We’re going to use a simple footer section.

27 Just as the #footerwidgets div, the #footer div will be 100% width, but the text will be aligned with the rest of the content (centered). That’s why we’ll create another div inside it with the ID of footertext. Add the footer content inside #footertext.

<!-- FOOTER -->
<div id="footer">
  <div id="footertext">
    <p>&copy; 2010 Eric Hoffman. All rights reserved.</p>
  </div>
</div>
<!-- END OF FOOTER -->
</body>

Footer

That’s all for the markup; let’s move on to CSS.

Write the CSS

So, we’re done with our HTML. Now we’ll tackle our styles.

28 First thing’s first: open up the style.css file you created at the beginning. Make sure your HTML file links to it correctly.

CSS Reset

29 First, we’ll use a simple CSS reset to zero out our styles. I encourage you to read more about CSS reset to fully understand the importance of it; this article on CSS Reset is a good place to start. For berevity, I just used the * selector here.

* {
  margin:0;
  padding:0;
}

Body Background and @font-face

30 Next, change the body background to the image of the blue background with noise in our PSD mockup. Slice it out of the PSD mockup for practice (I’ve also included it in the downloadable source file below as background.jpg).

31 Also, we’ll add the CSS3 text-shadow element.0 is the x-offset, 1px is the y-offset, 2px is the blur and #555 is the color of the shadow. @font-face allows us to embed non-websafe fonts so that all the viewers can see the site the way we do. You can read all about @font-face through this guide titled The Essential Guide to @font-face.

body {
  background:url("../images/background.jpg") repeat;
  text-shadow:0 1px 2px #555;
}

@font-face {
  font-family:"Museo Slab 500";
  src:url("http://hatchergraphics.com/MuseoSlab-500.otf");
}

Wrapper/Navigation

32 We’ll now create a container as a wrapper so that we can center our design easily. I like creating pixel-perfect designs, so I chose a fixed-width layout. If you want to see other layout types, check out this guide titled A Guide on Layout Types in Web Design. To center the container, just use margin: 0 auto; (thanks to the Smashing Book and its chapter on layout types, which coincidentally was co-written by Six Revisions founder, Jacob Gube).

33 Add styles to the navigation bar. #firstlink is the current link. If you wish to expand the design and add all four pages, you’ll have to change the ID of the list. For example, if I’m on the "About" page, the About list item should have the ID of firstlink. To center the background image, use background-position: center;.

#container {
  height: 1000px;
  margin:0 auto;
  width:890px;
}

#navigationbar {
  height:auto;
  margin:50px 0 80px 390px;
  width:650px;
}

#navigationbar ul li {
  display:inline;
  font-family:"Museo Slab 500";
  font-size:15px;
}

#navigationbar ul li a {
  color:#FFF;
  padding:74px 30px;
  text-decoration:none;
}

#navigationbar ul li a:hover {
  color:#DBDBDB;
  text-decoration:none;
}

#firstlink {
  background:url("../images/linkbg.jpg") no-repeat;
  background-position:center;
  color:#FFF;
  padding:74px 30px;
  text-decoration:none;
}

Wrapper/Navigation

Logo/Divider

34 The logo height and width depends on your website name. It turns out that "Letterpress" at 65pt (in Photoshop) is 60px high and 348px wide.

35 Next style the divider. Here you can use a 2px-high empty div, a span, or style your header to have a 2px-high border at the bottom. I used the same background image as I we’ll use with the post divider.

#logo {
  float:left;
  height:60px;
  width:348px;
}

#dividerheader {
  background:url("../images/dividerpost.jpg") repeat-x;
  height:2px;
  margin-bottom:20px;
  width:890px;
}

Logo/Divider

Sidebar

36 Next, we will style the sidebar. Since the post divs are going to be 500px wide and I’d like a little margin between the posts and the sidebar, I chose 250px for the width of the sidebar.

37 Style the divider, the recentposts and latestcomments and the search bar. Here we’re going to use another CSS3 property called border-radius. This means we can create rounded corners using only CSS. Unfortunately this feature isn’t supported by all browsers, so it will not look rounded in all browsers (such as IE8 and below).

38 Style all the ad elements and make sure the math is correct (together, they can’t be wider than 250px).

#sidecolumn {
  background-color:#2c7c88;
  border:1px solid #116678;
  float:right;
  height:240px;
  padding:25px 0;
  width:250px;
}

#dividersidebar {
  background:url("../images/dividersidebar.jpg");
  height:2px;
  margin-bottom:10px;
  margin-left:25px;
  margin-top:10px;
  width:200px;
}

#recentposts,#latestcomments {
  margin-bottom:10px;
  margin-left:25px;
  width:200px;
  word-wrap:break-word;
}

#recentposts ul a,#latestcomments ul a {
  color:#FFF;
  display:block;
  font-family:"Trebuchet MS";
  font-size:13px;
  line-height:22px;
  list-style-type:none;
  text-decoration:none;
}

#searchform {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  background-color:#FFF;
  border:0;
  font-family:"Trebuchet MS";
  font-size:13px;
  margin-left:25px;
  padding:2px 6px;
}

#adrightfirst {
  float:right;
  margin-right:-1px;
  margin-top:31px;
}

#adleftfirst {
  float:left;
  margin-left:-1px;
  margin-top:31px;
}

#adright {
  float:right;
  margin-right:-1px;
  margin-top:16px;
}

#adleft {
  float:left;
  margin-left:-1px;
  margin-top:16px;
}

#adright,#adleft,#adrightfirst,#adleftfirst {
  background-color:#f6f6f6;
  border:1px solid #e7e7e7;
  height:117px;
  width:117px;
}

#adright:hover,#adleft:hover,#adrightfirst:hover,#adleftfirst:hover {
  background-color:#e7e7e7;
  border:1px solid #dbdbdb;
}

Logo/Divider

Posts

39 Next up: the posts. We’ll create two post divs: one named post1, and the other we’ll call post2.

40 We’ll do the same with the date. As I mentioned before, both post divs should be 500px wide. Position them both with margin, and add a padding-left of -90px. The position property should be set to absolute.

41 Create another divider, but this time, it should be as wide as the post.

#post1 {
  color:#FFF;
  float:left;
  height:auto;
  margin:10px 0 0 10px;
  padding-left:90px;
  position:absolute;
  width:500px;
}

#post2 {
  color:#FFF;
  float:left;
  height:auto;
  margin:525px 0 20px 10px;
  padding-left:90px;
  position:absolute;
  width:500px;
}

#dividerpost {
  background:url("../images/dividerpost.jpg") repeat-x;
  height:2px;
  margin-bottom:20px;
  margin-top:16px;
  width:495px;
}

#date1 {
  background:url("../images/datebg.jpg")no-repeat;
  float:left;
  height:123px;
  width:90px;
}

#date2 {
  background:url("../images/datebg.jpg")no-repeat;
  float:left;
  height:123px;
  margin-left:-90px;
  margin-top:500px;
  width:90px;
}

#datetext {
  height:46px;
  margin:0 auto;
  padding-top:38.5px;
  width:31px;
}

#datetext p {
  color:#FFF;
  font-family:"Museo Slab 500";
  font-size:20px;
  text-transform:uppercase;
}

#datetext h1 {
  color:#FFF;
  font-family:"Museo Slab 500";
  font-size:35px;
  line-height:22px;
}

Posts

Footer Widgets

Almost done!

42 Footer widgets: As you saw with the HTML, the footer and the footer widgets are placed outside of the container so that they aren’t restricted by the 890px width of our wrapper. Both should be 100% wide.

43 Add the background, height (240px), and the top margin. I created a #footerwidget div, a text div, and then three more divs for the separate widgets. Add the same styles to all of them — the only differences being the borders and the margins.

#footerwidget {
  background:url("../images/widgetbg.jpg");
  height:240px;
  margin-top:110px;
  width:100%;
}

#footerwidgettext {
  height:240px;
  margin:0 auto;
  width:890px;
}

#footerwidgettextfirst {
  border-right:1px dotted #FFF;
  float:left;
  height:165px;
  line-height:22px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

#footerwidgettextlast {
  float:left;
  height:165px;
  line-height:22px;
  margin-left:594px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

#footerwidgettextmiddle {
  border-right:1px dotted #FFF;
  float:left;
  height:165px;
  line-height:22px;
  margin-left:297px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

Posts

Footer

44 The footer’s height is 44px. Add a background. The position should be absolute so that it is always at the bottom. Similar to the footer widgets, I created another div for the text so I can center it and align it to the main content area. Here I used the margin: auto 0; CSS property to center it. The 10px are the top-margin.

#footer {
  background:url("../images/footer.jpg") repeat-x;
  height:44px;
  position:absolute;
  width:100%;
}

#footertext {
  height:44px;
  margin:10px auto 0;
  width:890px;
}

Footer

45 The following styles apply to various elements; I just grouped them together.

#recentposts h1,#latestcomments h1,#footerwidgettextfirst h1,#footerwidgettextmiddle h1,#footerwidgettextlast h1 {
  color:#FFF;
  font-family:"Georgia";
  font-size:18px;
}

#post1 h1,#post2 h1 {
  font-family:"Georgia";
  font-size:30px;
}

#post1 h2,#post2 h2 {
  font-family:"Trajan Pro";
  font-size:18px;
}

#post1 p,#post2 p {
  font-family:"Trebuchet MS";
  font-size:13px;
  line-height:22px;
}

#post1 a,#post2 a {
  color:#FFF;
  text-decoration:none;
}

#post1 a:hover,#post2 a:hover {
  border-bottom:1px dotted #FFF;
}

#footerwidgettextfirst p,#footerwidgettextmiddle p,#footerwidgettextlast p,#footertext p {
  color:#FFF;
  font-family:"Trebuchet MS";
  font-size:13px;
}

Footer

We’re Done!

I hope you enjoyed following along with this tutorial. Please pose your questions and thoughts in the comments below.

Download Source

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.

Related Content

About the Author

Eric Hoffman is a young American freelance web and brand identity designer based in Switzerland, working under the brand, Hatcher Graphics. He enjoys reading, playing basketball, and getting plenty of sleep. If you’d like to connect with him, you should follow him on as @hatchergraphics.

33 Comments

Arshad Cini

August 29th, 2010

It is hard to find these kind of well explained conversions

Thanks Eric.

Techy

August 29th, 2010

Hey,

I was looking at this and realized you set a fixed hight for the sidebar… Which wont work in most cases if you made it into a wordpress theme.. I found a little work around though…

change #sidecolumn in the css file to:
#sidecolumn {
float:right;
width:250px;
}

Under that add #backing:

#backing {
padding:25px 0;
background-color:#2c7c88;
border:1px solid #116678;
}

Now move back into the html file and add

right underneath

and add

right above the line that says

now you can add as many comments/recent posts as you want :)

Techy

August 29th, 2010

Also, would you mind if I made this into a wordpress theme.. I wont use it/sell it I would just like to use it for personal practice of creating wordpress themes :)

Techy

August 29th, 2010

Sorry for the triple post.. but I also made it so you can add multiple posts, and make it so the footer stays on the bottom when you do that…

Ariel Mariani

August 29th, 2010

Excellent tutorial, but I prefer to use PNG files for the logo or images that require transparency, so that in the future I (or my client) can change the background color without slicing the PSD again.

guci0

August 29th, 2010

HTML 5 please!

esranull

August 29th, 2010

perfect work thanks a lot

Eric

August 29th, 2010

Hey! Thanks for the positive feedback! @techy thanks for the additions. I wrote this tutorial a while back and have learned a lot since then. Sure, you may use it as a wordpress theme! If you don’t mind, I’d love to see the result! But only for private use.

Eric

DesignMango

August 29th, 2010

Nice tut thanks

David | WebModia

August 29th, 2010

Hi. I first want to say that I applaud you for the effort in both for creating the tutorial and designing the creative elements used herein.

However, I must also say that I think you unfortunately missed the mark on actual coding practices. There are a number of instances where I think you should have suggested different coding methods which better represent the concepts of web standards, best practices, elegant code, etc.

Particular puzzling is the mention of CSS3 in the article title, whereas the actual tutorial and demo hardly touch on any of the CSS3 tools that would have proven very useful here.

Here are a few areas where I see problems:
1. Separation of content and presentation – you have a number of extraneous elements in your markup that are clearly only there to act as hooks for your CSS. You should instead be coding your markup to give your content structure and appropriate semantics. Adding markup just as a CSS hook is bad practice.

For example, there’s no need to add an empty div just to create a divider, as you did with the #dividerheader and #dividersidebar divs. Those dividers could have been handled without the extra markup by targeting CSS to existing elements. Or you could have even use hr elements (semantically sound, one could argue) and then style them.

2. ID-itus & Classitus – You’ve used the same IDs more than once, for example the #datetext ID. This is not only against spec, it is also not necessary since that div in particular is entirely reachable via CSS without an ID via it’s parent container’s ID. For example “div#date > div” would work here — this is a simple child selector and that’s not even CSS3, it is CSS2.

Likewise, in the sidebar banners, proper use of CSS3 would have helped avoid the extraneous IDs #adrightfirst and #adrightleft. CSS3 offers very powerful selectors, including structural pseudo-selectors like “nth-of-type” that would have been perfectly suited here.

Another example are the repeated .adright and .adleft class attributes in the sidebar banners. They have no semantic value, they are only used as CSS hooks. Again, this is unnecessary with CSS3. Very simple “odd” and “even” nth-of-type selectors would have handled this banner ad layout for you, without the classitus.

3. Non-flexible layout – your post divs (#post1, #post2) are positioned absolutely. Add too much content, or bump up the font-size and this layout quickly breaks. Generally, you should keep content containers flexible vertically and this is easily done using well established CSS methods. The only reason I can think that you used absolute positioning is to get a “pixel perfect” reproduction of your mockup – this should not be the goal. Keep your content flexible and usable.

4. Fonts – you use “Trajan Pro” for the meta data. This is not a web-safe font. So best practice would be to use a font that is universal regardless of the user’s OS. Or use CSS3′s @font-face, or sIFR, or any of the other fairly well-established methods for using non-common fonts in your designs. At the very least, you should code a font stack dictating the backups to be used if your chosen font is not available on the user’s system.

5. Document hierarchy and semantics – You’ve got nine h1 elements. Even the date tags are h1 elements. An h1 should be the most important piece of content on a page. Standard practice here is to make the h1 the site title, and have that as the only h1. Then your document outline would continue with h2 elements, such as Recent Posts or the individual blog entries. This creates a more meaningful document structure.

Instead, what you’ve done is water down the h1 element’s significance and therefore deprive your document of any useful hierarchy.

Furthermore, you’ve got the logo as an inline image in a meaningless div tag. Arguably better practice would be to use HTML text in an h1 and use CSS image-replacement to call in the logo. This is semantically sound, and goes to keeping your site keyword-rich and search-engine friendly.

6. Editing – this one is less about coding standards and more about editing standards. The tutorial details certain code snippets. Readers expect that if they view source on the demo, they are seeing the finished tutorial’s code. Instead, the demo is riddled with inconsistencies, a number of such errors I assume are due to sloppy copy-and-paste assembly. This really should have been caught by an editor.

Honestly, I could go on. And I realize that to some, these things may seem like nitpicks. But if the design and development practices as demonstrated in this tutorial were used in a client site, you can bet there would be complaints from both the client and the users on how poorly the site performs.

To be blunt, this tutorial does more harm than good. It is particularly harmful because it is published on sixrevisions.com, which has a sizable readership. This is an audience that is (I would guess) largely composed of novice web designers who will not know better and who will repeat the coding practices suggested here. This was an opportunity to introduce new web designers to best practice coding techniques. I am afraid you missed that opportunity. I hope future sixrevisions.com tutorials take this concern into consideration.

Sincerely,
David Gowrie

Aj

August 29th, 2010

Eric,

Hey would you mind if I turn this into a WordPress theme and credit you as design by “your link” coded by “my link”?

Its a nice design. Let me know….You will get some good back-links ;)

I can do the XHTML but if you want to get it rolling you can send me the files as well.

awesome work!

-AJ

Matthew Wehrly

August 30th, 2010

Eric,
Thanks for the detailed conversion. Great Job!

Matt

Harry

August 30th, 2010

Good tutorial. :)

kris

August 30th, 2010

Dude, Eric, you need to be sure your website is finished and functional before guestposting on a blog like this…you could be losing a ton of business…(nice tutorial though)

J

August 30th, 2010

Nice tutorial, however you do use an awful lot of markup, maybe I mis-read the article but there’s a whole load of divs surrounding every element on the page, and I saw divs with tags afterwards up there somewhere…and for the most part it would make more sense to use ul’s instead of divs for displaying the listed items…but kudos for writing a full article

Eric

August 30th, 2010

Thanks! As I said, I did write this a while back, and have learned lots since then. I hope you enjoy my upcoming tutorial more :). Anyone can use this privatly, please link back to my twitter though.

Radim

August 31st, 2010

Very detailed tutorial, I think this could be useful for many newbies and beginners!

azul

August 31st, 2010

great step by step PSD to HTML/CSS conversion tutorial, keep it rocks :)

Luke

September 1st, 2010

Great for people starting out!

aki

September 1st, 2010

Very detailed tutorial. Thanks for this. I like the part 1 PSD tutorial.

Jakob

September 1st, 2010

Hey I’m not a pro but I’m not a beginner either. Can’t miss the long comment up there by David and seems there’s a few good points being made. To see all the other comments saying “great for newbies” etc… gotta wonder how many of these appreciative readers will know what parts are good and what parts are not. Just talking about the code, not the process itself… or the PSD design, which is nice. Just 2 cents.

Andrew Fairlie

September 3rd, 2010

I agree with David Gowrie, not a great tutorial, but rather one that encourages poor techniques. I took exception to the way the sliceup is generated in Photoshop, there is a slice tool, use it! I have seen so many tutorials which show this method of copying and pasting merged selections into new image files in PS. Rather create slices in a PSD document, and save for web. Far easier to maintain, especially in the professional world where you often have to change or tweak a design. Cmon Six Revisions…

Girisoft

September 6th, 2010

Thanks eric, Nice tutorial

Sean

September 12th, 2010

very very perfect & nice tutors.

Beben

September 12th, 2010

awesome, thanks a lot :)

Saad

November 18th, 2010

Thanks a lot !

David Tang

December 6th, 2010

Dear David Gowrie and Andrew Fairlie,

now that you have scared me enough not to follow Eric’s tutorial. Please please please please

Please post a tutorial to Six Revs so that all newbie would know, instead of Eric’s style, what would be the best practices done in code.

If you have not time to post any tutorial, please show an example of best practices in professional world.

sonny

February 8th, 2011

great one! thanks

Tharik

April 27th, 2011

Good tutorial

Rahi

June 28th, 2011

hey..! this is noce tutorial.. but i have heard about fireworks… PSD To (X)HTML work is done on adobe fireworks… there is some confusion so please help me out

Antonio

July 8th, 2011

Muito bom seu website, gostei muito parabéns!

Aman

August 17th, 2011

It took almost two hours to follow your tutorial. Good stuff for beginners like me.

Jure

October 25th, 2011

Everyone should consider Davids (WebModia) comments if doing this tutorial.

Leave a Comment

Subscribe to the comments on this article.