In this tutorial, we’ll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance.
This is Part 2 of 3 of the Photoshop blog design called Brilliante, published some time ago on SpyreStudios and designed by Mahmoud Khaled Deiab.
In this second part, I’m gonna walk you through the PSD to HTML/CSS coding process. Third part will be about creating a WordPress theme. Let’s begin!
Step 1
Download the Photoshop file and take a look to the 4 main sections: header, content, footer and bottom.
Step 2
Let’s create a folder for our Brilliante Layout with the following file structure:
Note that we’ll include all the images in a “img” folder inside the “css” folder.
Step 3
In the index.html file let’s type our basic layout with the main divs.
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Brillante</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>
<body>
<div id="header">
</div><!– #header –>
<div id="content">
</div><!– #content –>
<div id="footer">
</div><!– #footer –>
<div id="bottom">
</div><!– #bottom –>
</body>
</html>
[/html]
Step 4
Open the PSD file and, with the Rectangular Marquee Tool, select the header top background, including the thin white line at the bottom.
About Photoshop slicing and exporting images
The slicing process I use the most is not by using the Slice Tool, but the Marquee Tool instead. I find it to be quicker and effective considering the way I write code.
These are the steps:
- With the Marquee Tool, draw the slice selection you want to export. The more zoom you have the better. I recommend to zoom-in enough to the “pixel-point” to avoid anti-alising and getting the sharpest exported image you may get.
- Then, Edit > Copy Merged – Command+Shift+C (Control-Shift+C if you’re on a PC). This way, you make sure you select exactly the image you see, no matter how many layers this is made with.
- File > New. Note that Photoshop will create a new file with exactly the same height and width as your selection.
- Edit > Paste. A new layer will be created with the image.
- File > Save for Web and Devices. You have many options here. We’re gonna focus on image format and size. My preferences are: JPEG for plain photos, banners and (not so often) logos. GIF for little icons, separating lines, ornaments. And PNG for high quality images with transparent backgrounds, such as custom font-face titles, slogans, big icons.
- Save. Try to be simple and obvious here. Always name your images thinking about your CSS.
Step 5
Open your style.css file and start filling it with the reset properties.
[html]
/* —————– Resets —————- */
* { margin: 0; padding: 0; outline: 0; }
body {
font: 15px/23px Arial, sans-serif;
color: #1a1e27;
background-color: #ededed;
}
img { border: 0; }
.notext, .notext-footer { font-size: 0; line-height: 0; text-indent: -9999px; background-repeat: no-repeat; }
[/html]
The “notext” classes will be used later in this tutorial.
Step 6
In Photoshop, select and export the navigation arrow for the selected and hover states.
Grid-Fixed and Fluid sections in the same layout
The Brilliante design is made over a 24-grid system. The page content is exactly 950px wide. But, the 2 dark-blue areas are wider. No matter how wide your viewport is, the blue areas behave like a 100% fluid layout, with the content fixed inside.
Take for example, the
div. Inside, we have the “top” div, and inside we have the “top-content” div. As you might be guessing, the “top” will be all along your browser with the dark-blue background, and the “top-content” will be centered and with a fixed width of 950px.
Step 7
So here’s the CSS code for the layout.
[html]
/* —————– Layout —————- */
.top {
background: transparent url(img/top-bg.gif) repeat-x;
color: #fff;
position: relative;
height: 71px;
}
.top-content,
.logo,
.featured,
#content,
.footer-content,
#bottom {
margin: 0 auto;
width: 950px;
}
.main {
width: 550px;
float: left;
}
.sidebar {
width: 350px;
float: right;
}
#content, .featured, #footer, #bottom {
clear: both;
}
#footer {
background: #1a1e27 url(img/footer-bg.jpg) repeat-x 0 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
[/html]
Important!
Sharp-eye readers might ask: “Why the top area needs a background image when we could achieve the same with CSS?” As we clearly did with the footer. Answer is: IE. My first try was CSS for the top area background and the white border, but IE was not rendering the hover state as I want it to.
As you can see, when hovering over, IE cuts the arrow with a dark blue line. So I replaced the CSS code with a background image and then all browsers agreed. ;)
Top Content
Inside the header
tag, the top content area has the main navigation, RSS feed and the search field.
Main nav: the links here have the Frutiger font. We could use CSS sprites for this special font, or rendering with one of the font-linking services out there, or using Cufón. I’ll stick to this last option, since the CSS sprites technique won’t be practical for the future WordPress theme implementation.
So, what’s Cufón?
By definition, it’s a fast text replacement with canvas and VML – no Flash or images required. If you want to learn more about Cufón, check here.
Step 8
First, you download the Cufón YUI from here and save it to your “js” folder. Download the font (or free similar ones) from here. Then, go to the Cufón Generator and browse for your local font file with the following options…
Finally, click the Let’s Do This! button and download your font file.
Rename the file with the font name frutiger.font.js and drop it to your “js” folder. Open your index.html file and include the following lines of code before the tag.
[html]
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/frutiger.font.js" type="text/javascript"></script>
<script src="js/func.js" type="text/javascript"></script>
[/html]
This is the correct order for the script tags: first the Cufón YUI, the font file next, and your func.js file at the end. Create this last file, we’ll need it later.
Step 9
Right after the opening div for “header” type this:
[html]
<div class="top">
<div class="top-content">
<ul>
<li class="first selected"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!– .top-content –>
</div><!– .top –>
[/html]
As we saw earlier, we’ll be needing “inner” sections in the markup (in this case, “top-content“) to accomplish the centered 950px wide content within the “fluid” background all along the viewport.
Step 10
Let’s code the CSS for this section.
[html]
/* —————– Top —————- */
.top-content ul {
float: left;
height: 42px;
margin-top: 29px;
}
.top-content li {
margin: 0 7px;
line-height: 14px;
height: 42px;
list-style: none;
float: left;
height: 42px;
display: inline;
}
.top-content li.first {
margin-left: 0;
}
.top-content li a {
color: white;
text-decoration: none;
height: 42px;
display: block;
cursor: pointer;
}
.top-content li.selected, .top-content li a:hover {
background: url(img/nav-arrow.gif) no-repeat scroll center bottom transparent;
}
[/html]
Here we floated our unordered list to the left, gave margins to the items, except the left margin on the first one, and applied the arrow image for the selected and hover state.
Note we don’t need to type url(../img/image.gif)
with the dots before the image folder, because we already structured our images folder inside the css folder.
Step 11
Open the func.js file to style the links with Cufón.
[html]
Cufon.replace(‘.top-content a’);
[/html]
Here’s what the website should look like so far:
RSS feed: select the RSS icon and the text like this:
Step 12
Repeat the Photoshop steps we learnt in step 3 to export our images. We’ll name it feed.gif. The same for the search input field and submit button area.
First, we’ll export the search background and name it search-bg.gif. Before doing this, be sure to disable the submit button/arrow like this.
Then, enable it back and select and export it with the name search-arrow.gif.
Step 13
Now, after creating the navigation, we’ll need to create another inner section for both the RSS and search sections. Back to the index.html file we’ll type the code for the inner block section after the navigation “ul” closing tag.
[html]
<div class="block">
<p><a href="#">Grab our feeds</a></p>
<form id="search">
<input type="text" name="" class="search_input" value="Search…" name="s" id="s" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}"/>
<input type="submit" name="" class="search_submit" value="Go" />
</form>
</div><!– .block –>
[/html]
The javascript code you see inline is for the simple “onfocus” event – you know, when you click on the word “Search” in the input field, the field clears itself. If we click outside, the word shows again.
Step 14
In the CSS, we float the “block” div to the right and position its descendent elements with the absolute property.
[html]
.block {
float: right;
height: 71px;
position: relative;
}
.block a {
position: absolute;
right: 221px;
display: block;
height: 71px;
line-height: 71px;
text-indent: -9999px;
background: url(img/feed.gif) no-repeat 0 0 transparent;
width: 127px;
height: 21px;
margin-top: 25px;
}
#search {
position: absolute;
top: 0;
right: 0;
float: right;
width: 169px;
background: url(img/search-bg.gif) no-repeat 0 0 transparent;
height: 41px;
padding-left: 35px;
margin-top: 14px;
margin-left: 17px;
}
.search_input {
background: none repeat scroll 0 0 transparent;
border: 0 none;
color: #1a1e27;
display: inline;
font: italic 15px Arial, sans-serif;
height: 24px;
margin-top: 7px;
text-transform: lowercase;
width: 144px;
}
.search_submit {
background: url(img/search-arrow.gif) no-repeat scroll center top transparent;
width: 15px;
height: 17px;
font-size: 0;
text-indent: -9999px;
border: 0;
cursor: pointer;
position: absolute;
top: 12px;
right: 7px;
}
[/html]
This is what we have so far:
Step 15
Export the logo image, selecting the separation lines on the right.
Step 16
Still inside the “header” we type:
[html]
<div class="logo">
<a href="#"><img src="css/img/logo.jpg" width="196" height="42" alt="Brillante – A Brilliant Website Design" /></a>
<p>A very short description about the website goes here. And that’s it!</p>
</div><!– .logo –>
[/html]
Step 17
Style the logo area.
[html]
/* —————– Logo —————- */
.logo {
height: 148px;
overflow: hidden;
}
.logo img {
margin: 62px 22px auto 42px;
float: left;
}
.logo p {
margin-top: 67px;
width: 229px;
float: left;
font: italic 15px/17px Georgia, serif;
color: #646464;
}
[/html]
Step 18
Last div inside header is for the featured content. In Photoshop, we’ll select the elements, first, by selecting the layer, and then, doing Cmd+Click (Ctrl+Click on the PC) on it to obtain the selection as shown in the screenshots. This way you’ll go faster with the image exporting process. Disabled the “Hire Us” text and background, select and export the banner with pencils featured.jpg. Enable back the button and export it as hireUsButton.gif. Finally, select and export the thumbnails (th1.jpg, th2.jpg, th3.jpg), just the pictures without the borders.
Step 19
In our index.html file we type the code for the featured area, after the logo div.
[html]
<div class="featured">
<div class="img">
<img src="css/img/featured.jpg" width="600" height="248" alt="" />
<p class="button"><a href="#">Hire us</a></p>
</div><!– .img –>
<div class="desc">
<h3>It’s Brilliant!</h3>
<p>Brilliante, Lorem ipsum dolor sit amet, con-<br />sectetur adipisicing elit, sf sed dos eiusmod lorem ipsum dolot sit amto. It is brillaint!</p>
<div class="thumbs">
<a href="#"><img src="css/img/th1.jpg" width="73" height="61" alt="" /></a>
<a href="#"><img src="css/img/th2.jpg" width="73" height="61" alt="" /></a>
<a href="#"><img class="last" src="css/img/th3.jpg" width="73" height="61" alt="" /></a>
</div><!– .thumbs –>
</div><!– .desc –>
</div><!– .featured –>
[/html]
Step 20
The CSS for the featured content.
[html]
/* —————– Featured —————- */
.featured {
height: 248px;
overflow: hidden;
}
.featured .img {
position: relative;
margin-left: 1px;
}
.featured .desc {
background-color: #1d1f25;
width: 316px;
height: 208px;
padding: 21px 15px 19px;
overflow: hidden;
}
.featured .img,
.featured .desc {
float: left;
}
.featured .thumbs {
padding: 20px 13px 19px;
border-top: 1px solid #393939;
height: 61px;
}
.featured .thumbs a img {
margin-right: 31px;
}
.featured .thumbs a img.last {
margin-right: 0;
}
.featured .desc h3, .featured .desc p {
padding: 0 13px;
font-weight: normal;
}
.featured .desc h3 {
margin-bottom: 7px; /*PSD 18px*/
}
.featured .desc p {
margin-bottom: 18px; /*PSD 25px*/
line-height: 23px;
}
.featured .button a {
position: absolute;
left: 1px;
bottom: 20px;
background: url(img/hireUsButton.gif) no-repeat 0 0 transparent;
display: block;
text-indent: -9999px;
width: 107px;
height: 37px;
}
.desc h3 {
font-size: 30px;
}
.desc h3, .desc p {
color: #ededed;
}
[/html]
We’re coding this banner section with a fixed height, assuming it will have a javascript fading effect, showing different big images when we click on the thumbnails. The text there have the same overflow:hidden
to limit the number of lines in the paragraph, avoiding extra content messing with the layout.
Note the “PSD” comments in the code. They’re just little reminders from the measuring process in Photoshop. In both, the Photoshop ruler and Firefox Web Developer ruler there are little discrepancies when measuring and positioning elements in the browser. (Pixel-perfect geeks stuff.)
Step 21
The title “It’s Brilliant!” here is using the Frutiger font. So we’ll include the h3 tag in the func.js.
[html]
Cufon.replace(‘h3’);
[/html]
The webpage at this point:
Step 22 – Content: Main
We’ll start coding the content area, focusing on the main section with the blog posts. We need to export the posts images without the borders (post-img1.jpg, post-img2.jpg, post-img3.jpg) and the separation lines sep.gif you see in between the Categories and the Date. Remember to zoom-in deeply enough to select both lines accurately. And the Read More button readMoreButton.gif.
Step 23
Here’s the html code for the main section, inside the content div.
[html]
<div class="main">
<h2 class="cufon-h2"><span>Latest from the blog</span></h2>
<div class="post">
<h3><a href="#">An Example of a Post Goes Here.</a></h3>
<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&nbsp;</span>
<span class="date">Date:
<em><a href="#">08 April 2010</a></em>
</span>
</div><!– .cat-date –>
<div class="post-teaser">
<img src="css/img/post-img1.jpg" width="142" height="140" alt="" />
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>
<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">10 comments</a>, <a href="#">5 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>
</div><!– .post –>
<div class="post">
<h3><a href="#">Another Post from the Blog Goes Here!</a></h3>
<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&nbsp;</span>
<span class="date">Date:
<em><a href="#">10 April 2010</a></em>
</span>
</div><!– .cat-date –>
<div class="post-teaser">
<img src="css/img/post-img2.jpg" width="142" height="140" alt="" />
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>
<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">3 comments</a>, <a href="#">10 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>
</div><!– .post –>
<div class="post">
<h3><a href="#">It’s Brilliant. Yes, It Is!</a></h3>
<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&nbsp;</span>
<span class="date">Date:
<em><a href="#">12 April 2010</a></em>
</span>
</div><!– .cat-date –>
<div class="post-teaser">
<img src="css/img/post-img1.jpg" width="142" height="140" alt="" />
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>
<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">No comments</a>, <a href="#">2 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>
</div><!– .post –>
</div><!– .main –>
[/html]
Each blog post here will have a h3 title, a metadata section for categories and date, the post excerpt and a Read More section with the author, number of comments and a button linking to the full single post.
As you see, we applied the “notext” class we defined in the CSS Resets for the Read More button.
Step 24
[html]
/* —————– Content —————- */
.post {
margin-bottom: 40px;
}
span.sep {
text-indent: -9999px;
background: url(img/sep.gif) no-repeat center top;
}
.cat-date {
margin-bottom: 10px;
}
.post-teaser {
overflow: hidden;
}
.post-teaser img {
margin: 0 11px 11px 0;
border: 1px solid #cacaca;
padding: 3px;
float: left;
}
.post-teaser .text{
padding-left: 160px;
}
.post-teaser .text p {
margin-bottom: 9px;
line-height: 23px;
}
.readMore {
border-top: 1px solid #bdbdbd;
line-height: 17px;
padding-top: 9px;
}
.readMoreButton {
background: url(img/readMoreButton.gif) no-repeat;
width: 110px;
height: 29px;
float: right;
cursor: pointer;
border: 0 none;
margin-top: -15px;
}
[/html]
Note we did the post images borders with CSS, that’s why we ignored them when exporting the images.
Again, we have to think about the future WordPress theme impelementation for the h2 titles. So we assign a class h2 class="cufon-h2"
for the Cufón titles with the dark blue background. And the tag to avoid the default block background. In other words, we give the heading a “span” just to color the text background, not its whole width. This way, the titles will be rendered dynamically via CMS.
Step 25
The func.js file will need one more line.
[html]
Cufon.replace(‘h2’);
[/html]
Step 26
It’s time to style our main fonts.
[html]
/* —————– Fonts —————- */
h2.cufon-h2 {
margin: 50px 0 25px;
font-size: 26px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
}
h2 span {
background-color: #1a1e27;
padding: 1px 6px;
text-align: center;
}
h3 a {
color: #1a1e27;
font-size: 25px;
text-decoration: none;
font-weight: normal;
}
h4 {
color: #646464;
font-size: 20px;
margin-bottom: -5px;
font-weight: normal;
}
.author em {
font: italic 15px Georgia, serif;
color: #646464;
margin-top: -3px;
}
.cat-date a, .readMore a {
font: italic 14px/20px Georgia, serif;
color: #646464;
text-decoration: none;
}
[/html]
Step 27 – Content: Sidebar
Export the author’s photo (author.jpg), the dummy-banners (advertiseHere.gif) and the categories arrow/bullet (cat-arrow.gif).
Note we had to modified the Advertise Here picture selection, because it has 1px border around, and we’ll just use CSS to do this. In Photoshop: Menu Select > Modify > Contract > 1px.
Step 28
Right after the main div, we type the sidebar html code.
[html]
<div class="sidebar">
<div class="author">
<h2 class="cufon-h2"><span>About the author</span></h2>
<img src="css/img/author.jpg" width="99" height="99" alt="" />
<h4>Mahmoud Khaled</h4>
<p><em>Web & Graphics Designer</em></p>
<p>Sectetur adipisicing elit, sf sed dos eiusmod tempor incididunt utto po Web and graphics designer!</p>
</div><!– .author –>
<div class="sponsors">
<h2 class="cufon-h2"><span>Sponsors</span></h2>
<a href="#"><img src="css/img/advertiseHere.gif" width="164" height="164" alt="" /></a>
<a href="#"><img class="last" src="css/img/advertiseHere.gif" width="164" height="164" alt="" /></a>
</div><!– .sponsors –>
<h2 class="cufon-h2"><span>Categories</span></h2>
<ul class="cat">
<li><a href="#">Category Number One</a></li>
<li><a href="#">Photoshop Designs</a></li>
<li><a href="#">Identity Branding & Logo Design</a></li>
<li><a href="#">Giveaways, and Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Another Category Goes Here</a></li>
</ul>
</div><!– .sidebar –>
[/html]
Step 29
The author’s name and the category links have the Frutiger font. Let’s include both in the func.js file.
[html]
Cufon.replace(‘h4’);
Cufon.replace(‘.cat a’);
[/html]
Step 30
Here, we style the picture borders with CSS one more time.
[html]
/* —————– Sidebar —————- */
.author img {
float: left;
margin: 0 10px 10px 0;
border: 1px solid #cacaca;
padding: 3px;
}
.sponsors img {
margin-right: 13px;
}
.sponsors img.last {
margin-right: 0;
}
.cat li {
list-style: none;
}
.cat li a {
text-decoration: none;
color: #1a1e27;
background: url(img/cat-arrow.gif) no-repeat left center transparent;
padding-left: 23px;
font-size: 16px;
line-height: 42px;
}
.cat li a:hover {
text-decoration: underline;
}
[/html]
This is how our awesome webpage look like so far:
Footer
We won’t apply Cufón in the footer headings. Here we’ll use the text-replacement technique, using images for the titles and hiding the heading text with CSS.
Step 31
In Photoshop, disable the footer background layer, so there’s nothing behind the titles, just transparency, and select one by one, as pixel-perfect as you can, including the border lines at the bottom. Export them in PNG format (txt-links.png, txt-flickr.png, txt-twitter.png).
Step 32
Select the footer background like this, just the blue area (there’s a subtle linear gradient). Export it as JPEG (footer-bg.jpg).
Step 33
And finally, the Twitter bird. Select it with Command+Click on the layer image (Control+Click on a PC). This way, you’ll have the bird icon selected like this…
Step 34
We need the footer background showing all along the browser width, that’s why we create the footer-content div inside the footer.
[html]
<div id="footer">
<div class="footer-content">
<div class="links">
<h2 class="notext-footer txt-links">Links worth spreading</h2>
<ul>
<li><a href="#">Link Number One Goes Here</a></li>
<li><a href="#">Link Number Two Should Go Here</a></li>
<li><a href="#">Another Link would Go Here</a></li>
<li><a href="#">And Maybe Yet Another One</a></li>
<li><a href="#">Awakening Website Design</a></li>
<li><a href="#">Mahmoud’s Design Blog And Portfolio</a></li>
</ul>
</div><!– .links –>
<div class="flickr">
<h2 class="notext-footer txt-flickr">Watch us on flickr</h2>
<a href="#"><img src="css/img/flickr-th1.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th2.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th3.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th4.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th5.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th6.jpg" width="74" height="74" alt="" /></a>
</div><!– .flickr –>
<div class="twitter">
<h2 class="notext-footer txt-twitter">Tweet tweet!</h2>
<p><em>“Lorem ipsum dolor sitet ameto, is simply an example of a tweet. And probably some more blahs shoud actually go here which works as a tweet!”</em></p>
<p class="cufon">10 hours ago. From <a href="#">TweetDeck</a><br />
In reply to <a href="#">@MahmoudKhaled</a></p>
<h4><a href="#">Follow us on Twitter!</a></h4>
</div><!– .twitter –>
</div><!– .footer-content –>
</div><!– #footer –>
[/html]
Step 35
Here’s the h2 tag class notext-footer (we included this one at the very beginning on the CSS Resets), because there’s no need for the Cufón magic this time. Followed by new special classes for each title (txt-links, txt-flickr, txt-twitter).
[html]
/* —————– Footer —————- */
h2.notext-footer { height: 38px; }
h2.txt-links { background-image: url(img/txt-links.png) }
h2.txt-flickr { background-image: url(img/txt-flickr.png) }
h2.txt-twitter { background-image: url(img/txt-twitter.png) }
#footer {
overflow: hidden;
height: 288px;
}
.footer-content {
padding-top: 28px;
}
.footer-content h2 {
margin-bottom: 17px; /*PSD 22px*/
}
.links, .flickr, .twitter {
float: left;
width: 281px;
margin-right: 53px;
}
.twitter {
margin-right: 0;
}
.links li {
padding: 0;
margin: 0;
}
.links li a {
text-decoration: none;
color: #ededed;
font-size: 15px;
line-height: 29px;
}
.flickr a img {
margin-right: 10px;
border: 3px solid #646464;
}
.twitter {
background: url(img/twitter.png) no-repeat scroll 100% bottom transparent;
}
.twitter p, .twitter a {
color: #ededed;
}
.twitter a {
text-decoration: none;
}
.twitter h4 a {
color: #818181;
font-size: 20px;
}
.twitter em {
font: italic 15px Georgia, serif;
}
[/html]
Step 36
Well, there’s two more elements using Cufón here: the links and the Twitter text. Func.js:
[html]
Cufon.replace(‘.links a’);
Cufon.replace(‘.twitter p.cufon’);
[/html]
We could group all the Cufon.replace
tags into one, like this:
[html]
Cufon.replace(‘h3, h4, .cat li a, .links li a, .twitter p.cufon, .top-content li’);
Cufon.replace(‘h2’);
[/html]
Note I’m extracting the “h2” tag from the group because it would mess everything on IE :-(
The webpage so far.
Step 37 – Bottom
Finally, the bottom area. There’s no need for nested divs this time, because no special background is showing.
[html]
<div id="bottom">
<ul>
<li class="selected"><a href="#">Home</a>&nbsp;|&nbsp;</li>
<li><a href="#">About Us</a>&nbsp;|&nbsp;</li>
<li><a href="#">Services</a>&nbsp;|&nbsp;</li>
<li><a href="#">Portfolio</a>&nbsp;|&nbsp;</li>
<li><a href="#">Blog</a>&nbsp;|&nbsp;</li>
<li><a href="#">Contact</a></li>
</ul>
<p>Copyright 2010 – <a href="#">Brilliante</a> – All rights reserved</p>
</div><!– #bottom –>
[/html]
Step 38
And its CSS.
[html]
/* —————– Bottom —————- */
#bottom {
height: 70px;
}
#bottom ul {
float:left;
}
#bottom li {
float:left;
list-style:none;
}
#bottom li a {
text-decoration:none;
color: #1a1e27;
}
#bottom li.selected a, #bottom li a:hover, #bottom p a {
text-decoration:none;
color: #646464;
}
#bottom p {
float:right;
}
#bottom ul, #bottom p {
line-height: 70px;
}
[/html]
We use the line height equal to the div height to center the elements vertically. Here’s our final website showing in a decent browser. ;)
IE CSS
Before jumpt into CSS fixing for Internet Explorer, there’s a little piece of code we need to add to our markup. This will help to prevent some IE speed and rendering issues with Cufón.
Step 39
Include this before the tag.
[html]
<script type="text/javascript"> Cufon.now(); </script>
[/html]
Step 40
Create the ie.css file inside your css folder, then call it from your markup with a conditional comment, right after the style.css line.
[html]
<!–[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /> <![endif]–>
[/html]
You might be familiar with this one. This line here is adding some extra css rules only if the browser is Internet Explorer 6 or below.
There’s a good article here about conditional comment rules for your css files. Or if you wish to go really deep into css debugging, read about the In-CSS hacks technique.
We didn’t use HTML5 tags for this website (except for the Doctype, of course), but if you wish to ensure IE compatibility with HTML5 elements, I suggest you to read about these two awesome javascript frameworks: Modernizr and HTML5 Shiv.
Step 41
In our ie.css file, we group all the divs with margins on both sides, left and right, to prevent the (in)famous IE double-margin bug.
[html]
.readMoreButton,
#search,
.featured .img,
.featured .thumbs a img,
.featured .thumbs a img.last,
.featured .desc h3,
.top-content ul li,
.sponsors img {
display: inline;
}
[/html]
Step 42
First IE bug you see is on the top navigation links, aligned vertically. If you give them the CSS property “inline-block” they would show like we mean to, horizontal aligned.
[html]
.top-content li a {
display: inline-block;
}
[/html]
Step 43
We push down the search field a couple of pixels, because it was a little too high.
[html]
.search_input {
padding-top: 3px;
}
[/html]
Step 44
The Read More button was way too much on the right side, even trespassing on the sidebar, so we give it some more room from the right till it falls back in the blog post position, and pull it higher with negative margin-top.
[html]
.readMoreButton {
right: 190px;
margin-top: -35px;
}
[/html]
Step 45
We fix the padding for the h2 headings with the dark blue background.
[html]
h2 span {
padding: 3px 6px 1px;
}
[/html]
Step 46
Stretch the line-height for the category links on the sidebar.
[html]
.cat li a {
line-height: 40px;
}
[/html]
Step 47
Reduce the right margin for the three columns on the footer in 1px.
[html]
.links, .flickr, .twitter {
margin-right: 52px;
}
[/html]
And that’s it! It wasn’t that painful, was it?
IE PNG Fix
If you do some research about how to fix the PNG-images bug on IE, you’ll see there’s a ton of options. Here’s how our PNG footer headings look in Internet Explorer:
Step 48
We’ll use the “BelatedPNG” hack. Download the belatedPNG.js file to your js folder and include this conditional comment in your index.html, before the Cufón scripts. So both the conditional comments for IE css and PNG will be there together, just for the sake of simplicity.
[html]
<!–[if IE 6]>
<script src="js/belatedPNG.js"></script>
<script>
DD_belatedPNG.fix(‘*’);
</script>
<![endif]–>
[/html]
Cufón and the link selectors issue on IE
If you check the webpage on a Windows machine at this very point, you’ll note something’s missing with the links styling: top navigation links, sidebar category links and footer links and Twitter paragraph. Oh yeah, we already include this rules on our func.js file and the design looks amazing on Firefox, Safari, Chrome, etc.
Obviously Cufón and IE aren’t very good friends. No, they don’t hang out or have a beer together, when you try to apply custom font types on “a” tags for links. To be completely honest, I googled for this, and I found that including a Javascript framework (as jQuery) to our design helps IE to render link tags as we meant to. We’re not using jQuery in our website to create beautiful animations or effects, just to make IE a little smarter.
Step 49
We only need to include the jQuery library from the Google CDN in our mark-up before the Cufón scripts.
[html]
<!– jQuery makes Cufon rendering links properly on IE –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
[/html]
I downloaded the jQuery file in the js folder and added it in the last line here (as fallback), just in case I want to work with this website offline.
Here’s how the website should look on IE6 now.
Cross-Browser Testing
I recommend you to test your websites in different browsers and platforms. A cool online tool for this is BrowserShots. In this case, you should deploy your website somewhere and paste the URL in the text field. Check or uncheck the different Browser/Platforms combinations to see the website screenshots.
Validate Your Code
Normally, I start with the Photoshop slicing and exporting, then the whole HTML and finally the CSS. It’s a good practice to validate your code when you finish any of them. In this tutorial I walked you through working with markup and presentational layers at once, and we didn’t have the chance, yet.
Step 50
So, go to W3C and validate your HTML…
…and your CSS.
Step 51 – Compress Your CSS and order the properties
Once your website is on production, working on a server, you would like to save some HTTP requests by minifying your CSS files. Here’s another handy online tool for this.
Step 52 – Minify your Javascript files
In our case, there’s no need for this, because all our javascript files are already compressed, but, if you wish to add some custom js flavors to the design, well, here you have two more online tools:
Step 53 – Don’t forget the “alt” tags
Yeah, almost forgot about it. Doing some quick revision, I found we didn’t comment our alt tags in the images, except for the logo. I leave this to your own taste. Have in mind that completing the alt
tags is a good SEO practice.
Step 54 – Create the FavIcon
Last, but not least, we’ll use html-kit to produce our “favicon”. We need a square image to upload, in this case I cropped the”featured.jpg” image with Photoshop.
Save the generated image (.ico file) in the website root, and include the following piece of code in the header, right before the css lines.
[html]
<link rel="shortcut icon" href="favicon.ico">
[/html]
Here’s how your favicon should look on a couple of browsers:
Be sure to deploy your website somewhere, favicons won’t show on your local machine.
Fork this project on Github!
If you liked this project and want to experiment with its last version to date, or if you discover and fix any other cross-browser bug, please let me know in the comments. Or, if you do version control with Git in your Mac or PC for development, you may also download or fork this project on Github.
Thanks!
Wow! That was a lot of reading, wasn’t it? Well guys, thank you and hope you enjoyed this tut. See you all in the 3rd part for the WordPress theme development!
This is one of the best complete tutorial i have ever seen.
Thanks Taty
Hi,This tutorial is amazing for building a portfolio site from scratch! It definitely teaches you the ins and outs of coding your Photoshop design, in a wonderfully easy and friendly way. – Stephanie
What a tutorial : huge, brilliant and unbelievably complete.
Thanks A LOT!!
Great in-depth post, I’ll have to give it a try later starting on #1, must do some invoicing now though, thanks for sharing :)
Wozzaa
Thanks!!!!
Brilliant!
Good work my man. Thanks for the effort to do this and for the sweet links like StyleNeat. Didn’t know about that :)
Bookmarked!
wow! great examples. XHTML coding really help
Thanks
Bookmarked! This is an incredibly detailed tutorial, learned a lot just in the first few steps!
Should have been written for WordPress since this is a blog layout. Nice job, though. Lots of detail and great information.
It will be – a WP tutorial is coming soon.
Thank you so much for the tutorial. It’s great and I definitely learned a lot!
Wow Taty, this is the best tutorial for PSD to xHTML I’ve seen for a very long time.
I have learned several things only reading it once. I am sure there will be more things coming.
The only suggestion I can make, is if you can show us how to produce CSS styling, that you already showed us here, because most of don’t know how you set them up. Was it through Dreamweaver ???
Also I look forward for next series for xHTML -> WordPress. Bokkmarked for future reference.
Nice tutorial.. Thanks for sharing,…
Simply Perfect, Most complete tutorial ever i seen,
Great job,