Welcome to Part II of the Sketch to WordPress series. In the last part we talked about design ideas as well as discussing ways to go about getting that design idea from paper to Photoshop. Here in this article we will be discussing how you take your final Photoshop Mockup and convert it to a basic HTML/CSS page. In the end you should be able to take your design to the HTML/CSS stage without too much hassle.
We will need to setup a few things before we begin. If you havent made a default HTML/CSS page before you started this go ahead and set that up now. Here is what I typically start with. Create two files, index.html and default.css. I also create a style folder and a images folder. Place the default.css into the style folder.
Add this line in the head section of the index.html:
The CSS file will stay empty for now but let’s talk about where I usually start a CSS file with. There is a CSS method called the ‘CSS Reset’. The idea is that all browsers define what the ‘defaults’ are of tags differently. So what we would like to do is to get them all as close to the same to start with, before we start adding our custom code for our site. The cascading style of the CSS system will then allow our defaults to be there and we can just then edit the attributes we need for each tag.
The reset that I use the most, or at least a variation of, is the reset that Eric Meyer has maintained for us. The easiest way to implement this into your site is to first save his code as its own file, say reset.css. Place it in that style folder.
In your default.css file add the following line to the top.
@import reset.css
This only works for modern browsers, so if you’d like to support older browsers on this project, you will need to include the code in your default.css file. Either way we have a blank slate and are ready to go. Fire up Photoshop and lets start learning to love the Slice tool.
I tend to slice items by section first so that I’m slicing just what I need, rather than slicing up the entire document at once and trying to save all the images at once. The goal is to minimize the amount of images/slices required to build your page. If you can recreate the effect in CSS/HTML/JS then its probably faster to do it that way, but again not always and this varies.
We will take the new Cove layout for example. You can see that there aren’t many images around. The script section headings, the RSS and twitter icons and the navigation buttons and drop shadow below the header section and then lastly the background for the content section that adds the drop shadow on the outside edges. Go around the net and see how your favorite sites are cut up too. Check out some of the ones in our sidebar here. If you haven’t already, now would be when you start using Firefox and Firebug.
Some tips on good slicing. Slice the least amount you can, and try and reproduce as much of the effect in CSS as possible. It might also be helpful to hide certain layers when you are slicing things to make it easier to grab things. Layer->New Layer Based Slice, is nice and has its place as well so use that when you need to. I’ll use that on things like those script headings on the Cove. After you have carved up your first few slices switch to the Slice Select tool and double click the slice, in that box name your slice what you want the image to be named. Then when you do the Claw (Ctrl + Alt + Shift + S, aka Save for Web, yes I know a PC shortcut!), and select save, the names will be set and you can just use the save options to just save the slices you want. I also try and not use GIFs if at all possible. Slice in background colors and things that will make them easier to incorporate into your site. Transparent PNGs are also widely used and there are workarounds to get them to work in old browsers if you are worried about that.
As with any layout start with getting the basic layout structured in your HTML/CSS file and then we will start on the header. I dont want this lesson to be a copy/paste-fest so do a little Googling if you need to catch up to certain points. A basic 968px wide centered two column default HTML/CSS setup can be found easily.
Now since we are about to start typing in some CSS into your project its best to decide on what format you are going to type it out in, either single or multi-line (how the Cove is done). You then should organize your CSS file into code that is related, like ’sidebar’ and ‘header’ or ‘navigation’ things like that will make it easier to maintain.
Here is the HTML code for the header section at the Cove:
Pirate Cove
A Safe Haven for Designers and Programmers
You will notice that the row of navigation buttons at the top of the page is nothing more than a standard Unordered List element, the logo is an H1 tag and the slogan is an H2 tag. Remember HTML needs to semantically describe the content. You need to keep style related phrasing and coding out of your HTML, it belongs in your CSS file. Since a menu is basically a list of items, the UL tag is great for menus. H1/2 are great for logos and headlines and things of that nature.
Here is then how we style the header (Press expand to see full code…it’s a bit long):
/* Typography */
h1 {
background: #4F6373 url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
height: 44px;
}
h2 {
background: #4F6373;
font-family: Verdana, sans-serif;
font-size: 10px;
color: #FFF;
padding: 0 300px 5px;
}
/* Navigation */
#nav {
margin: 0 90px;
position: relative;
}
#nav ul {
list-style: none;
float: left;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
display: block;
}
#nav a.home {
background: url(../images/home.jpg);
width: 55px;
height: 40px;
text-indent: -9999px;
}
#nav a.home:hover, #nav a.home:focus {
background: url(../images/home_h.jpg);
}
#nav a.about {
background: url(../images/about.jpg);
width: 65px;
height: 40px;
text-indent: -9999px;
}
#nav a.about:hover, #nav a.about:focus {
background: url(../images/about_h.jpg);
}
#nav a.tutorials {
background: url(../images/tutorials.jpg);
width: 84px;
height: 40px;
text-indent: -9999px;
}
#nav a.tutorials:hover, #nav a.tutorials:focus {
background: url(../images/tutorials_h.jpg);
}
#nav a.portfolio {
background: url(../images/portfolio.jpg);
width: 76px;
height: 40px;
text-indent: -9999px;
}
#nav a.portfolio:hover, #nav a.portfolio:focus {
background: url(../images/portfolio_h.jpg);
}
The techniques used just in this header section should get you rolling on the rest of your site. Images, unless they are the actual content, as in they are part of the styling of the site, should be in your CSS as backgrounds usually. Remember things in HTML should be content, things in CSS should be styling.
The background element is the first thing you will need to get used to using. The next hack is the text-indent line you see in the H1 element. This will remove the text from being displayed, and then you are just left with your image. This has quite a few applications, and I could even use that a bit more in spots here.
This part of the process, if you are new to HTML/CSS, can be pretty frustrating. Leveraging Firebug to help you with spacing and seeing how the pieces of the page fit together will be a big help. As you get better with HTML/CSS and the various tricks and hacks, this step will go much faster than you expect.
In the next article we will talk about how I went about converting this new HTML Mockup over to the WordPress Theme system.
Related Articles:
Sketch to WordPress: Part I
Sketch to WordPress: Part III
