Code a Vibrant Professional Web Design with HTML5/CSS3

In this second part of this web design tutorial series, we will convert the vibrant and professional design we designed in Part 1. We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

CSS3

We’ll use a few CSS3 properties to make our lives a little easier in styling the layout. This means not having to use background images for rounded corners and instead using the border-radius property to achieve the same thing in less time and with less markup and page weight (making our web page faster). Here are some resources to read and review regarding CSS3:

960 Grid System Framework

Gut-Check

To minimize your head-scratching moments as you read through this HTML5/CSS3 tutorial, I recommend that you read up on the resources I’ve suggested above. I’ll still explain here and there as we go along, so don’t worry if you’re not an expert with these upcoming standards, but I’ll also assume that you already know at least the fundamentals of HTML5 and CSS3.

Also, the 960 Grid System is an integral part of this tutorial, and it’ll take you just a few moments of your time to learn it if you read the guide I referenced above.

Step 1: Create the Basic Containers and References

If you’re ready, let’s proceed by completing the HTML5 markup first, without giving any thought to styling at this point to make sure that our markup is semantic and logically arranged for screen-reading users.

Let’s start by first creating the main containers for the different sections, and referencing our stylesheets:

Code Explanation

I placed all stylesheets inside a directory called css/. You will need to download the 960 Grid System, extract the contents from the ZIP archive and place 960gs.css inside the your CSS folder.

The reset.css of our document is not the reset stylesheet that comes with the 960 Grid System. As of this writing, the 960 Grid System is not yet updated for HTML5, so some HTML5 structural tags (e.g. <header>, <footer>) are not yet covered by it. The reset.css comes from the one proposed by Richard Clark of HTML5 Doctor, which I found sufficient for the job. Here is the HTML5 Reset Stylesheet for you to download.

I’ve included the HTML5-enabling script, HTML5 shiv, which you can see inside IE conditional comments. HTML5 shiv was created by Remy Sharp to prevent IE browsers (8 and lower) from breaking when using these new HTML elements. We’re serving it directly off Google Code to take advantage of their infrastructure and increase the chances the script’s already cached in the user’s browser (speeding up the perceived performance of our web page for those users).

The rest should be pretty self-explanatory: using <nav>, <header>, <section>, <footer>, and so on for the different containers of our layout.

Step 2: Add Some Content

We can now insert the content inside our containers, now that we have the basic structure of our HTML document.

Code Explanation

Nothing too exciting here; just some dummy content to fill out our page. This is a good point to stop and look at how our site looks unstyled to see how accessible it will be when read by screen-readers.

Keep in mind that we need to be flexible with our final markup, as we’ll most likely need to tweak it later on to achieve the look of our original design.

Step 3: How the 960 Grid System Will Be Implemented

With the markup finished, let’s now take a look at how we’ll apply the 960 Grid System classes to our design. The layout we created in Part 1 has 5 major sections: the header, Featured, More Products, More Blurb, and the footer. You’ll also see that these major sections are further sub-divided into several sub-sections.

Here is a basic guide on how we will implement 960 GS.

Layout Explanation

We’re using 960 GS’s 12-column variant, so we need to add a container_12 class to the containers of each section in our markup later.

For the header, we can see that the site name/logo occupies 2 columns; and after that, 4 blank columns (before the navigation area starts). We’ll give the site name/logo sub-section a class of grid_2 suffix_4 (note the class double-declaration). The navigation occupies 6 columns of width, so we’ll give it a grid_6 class.

Our Featured section has two areas: the description at the left (with the buttons), and the large phone at the right. Although both occupy 6 columns, and each could be given a class of grid_6, I decided to set the large phone as a background image using CSS, and just let the description and the buttons stay in the markup. We’ll give the left section a class of grid_6 suffix_6.

In our More Products section (it has the heading of "Our Phones") it’s easy to see that each phone and its description occupy 4 columns each. We’ll assign grid_4 to each of these sub-sections.

The More Blurb section has two sub-sections: the blurb section, which contains a further blurb-widget sub-section (not shown below) and the blog sub-section. The blurb-widget sub-section spans 7 grids (grid_7), and the blog sub-sections, 5 grids (grid_5).

I’ll be referring to these classes later on, and if you need a refresher, just scroll back up here.

If all of that sounded like a foreign language to you, read this guide on 960 GS.

Step 4: Slicing the PSD

Let us grab some graphics from our PSD layout in Part 1, which you can download if you don’t want to run through the Photoshop part of this tutorial series.

Basic PSD Slicing Technique

Load a selection around the area with the Rectangular Marquee Tool (M)

Copy it (Ctrl/Cmd + C)

Create a new Photoshop document (Ctrl/Cmd + N); the Width and Height of the canvas of the new document will automatically be filled in with the dimensions of the copied area that’s in your clipboard

Paste the copied area into the new document

Go to File > Save for Web & Devices (Alt/Option + Shift + Ctrl/Cmd + S) and save it into the image directory (which I have called img/)

Slicing the Site Name/Logo

First, consider our site name/logo: We’ll use PNG-24 as our image format for alpha transparency (if you care about IE6 and lower, you can use a JavaScript library like IE PNG Fix to support it).

Slicing the Background Artwork

Next, let’s slice the background artwork in the header/Featured and footer sections (header/Featured slice shown below). Nothing special to note here except that you should maintain the background images’ sizes: 1920x400px for the header, and 1920x for the footer. You’ll also have to turn off some layers to isolate the background.

What About the UI Buttons?

You can either save the button as JPGs and set them as CSS background images or use CSS3 properties for gradients and rounded corners. We’ll do CSS3 of course; it’s more fun.

Slicing the Phone Images

There are 5 phone images in this layout, and we need to save each one of them for the web, along with the thumbnails in the blog section. Save the large phone as a PNG file to maintain its transparent background, save the 3 phones in the More Products section and the one at the More Blurb section with their backgrounds as JPEGs.

Slicing the Dividers/Separators

Finally, we also need to save the vertical separator in the More Blurb section as an image. We can probably do this in CSS3 using box-shadow and gradient properties with some loss in the design comp’s fidelity, but let’s go the traditional route for this one so that we can get this detail exactly the way it is in the design.

As for the horizontal and vertical dividers in the footer, we could simply replicate that effect through CSS3, so there’s no need to slice those.

What You Should Have

After all that slicing and dicing, you should have the following (similarly named) images in your img/ directory:

Step 5: Implementing the 960 GS Classes

Now that we have our images ready, let’s start assigning the classes to our containers, and visualize how our document would look with the 960 GS classes applied.

First, review the 960 GS classes we planned out in Step 3 if you need to, and then let’s apply them to our markup. I’ll remove some of the HTML elements so that we can better visualize our 960 GS containers. Note that only the relevant code will be shown from now on so we can focus on the particular section of the project.

Just let your imagination work for a little bit and you’ll see that already we’ve got the proper containers in place. All we have to do now is style each of the sections further to achieve the exact look of our design. And that’s what we’ll do next.

Step 7: Styling the Header

You probably noticed from the start that we have graphical elements outside of our 960px boundaries (e.g. the large background images in the header and footer, the dark background of the logo and navigation, and so on). So how do we deal with these elements since we are obviously confined to just a width of 960px? One way of solving this problem is by determining how many elements over 960px need to be accounted for, and then creating wrapping divs outside the 960 GS containers so that they won’t be affected by the fixed widths of the system.

In our example, we have a large background image that spans the header and Featured sections. Also, we have a dark horizontal bar that serves as a background for our site name/logo and navigation menu. Thus, we could add 2 properly-placed wrapping divs, like so:

Code Explanation

We use the text-shadow and border-radius CSS3 property for the hover effects on the navigation. This saves us from messing around with background images and extraneous markup that’s needed to support flexible rounded corner elements.

Step 8: Working on the Featured Section

Up next: The description beside the large phone and the two buttons below them. As I’ve mentioned earlier, I decided to make the large phone a background image so we’ll create another container to hook the image to. We’ll also create pure CSS3 buttons that looks very similar to our design (with very little loss in the fidelity of our design).

Code Explanation

I just added a new container, #hfwrap2, directly below #hfwrap. I tried using CSS3 multiple background images for this, but I can’t get it to work on Chrome 7 and Firefox 3.6. At least this "old-school" technique still works!

Code Explanation

The code above is lengthy for just one element of the design. But bear in mind that it beats serving an image and is easier to change and maintain than an image button. The main things are that we use the gradient property for the color gradient fill, box-shadow for the drop shadow, and border-radius for rounded corners we had in the PSD layout comp.

We also style the :hover, :active, and :focus pseudo-classes so that we visually present different states of the button as the user interacts with it; a good practice (especially :active and :focus for people with motor impairments that prevent them from using a traditional point-and-click device like a mouse).

Step 10: Create the White Translucent Band

I had to figure out a way to create the 10px-high translucent white band at the bottom of the Featured section.

My first thought was to add a border-bottom to the container that displays inward (much like an inside stroke in Photoshop); but alas, I didn’t find such a feature in CSS. So what I did was just to create a container (#hfwrap3), give it a height of 10px less than the #hfwrap height, and set the translucent border-bottom to it. It’s not the most ideal solution because it requires an extra wrapping div, I know, but it works. Here’s the markup:

Code Explanation

To get the translucency effect of the white band, we use the RGBA color value notation on the bottom-border property to set the color. The RGBA color value has a function notation that has the format: rgba([red], [green], [blue], [alpha]) where the [red], [green], and [blue] parameters can be 0–100% or 0–255 and alpha -- which controls the opacity of the color -- can have the value between 0–1. So in the code above, at 0.5, our white band has an opacity value of 50%, giving it the translucent effect that we want.

Code Explanation

There's nothing remarkable about the CSS above, maybe except how the dotted border was achieved.

I had to add <span> elements for it, set it to display: block, and declare border-bottom values for it instead of placing the bottom border in #more-products itself. This is because the border's endpoints extend beyond the 3 photos' edges (since it contains them), thus breaking the photos' alignment with it. I had to attach it to an element that's a child of the #more-products container for it to align perfectly with the photos.

Step 12: Working on the More Blurb Section

The blurb area on the right of the More Blurb section is pretty straightforward: just a heading followed by a text description, then an image and a short description of the image (the widget) that rotates, with a button beside it. Ideally, you should have several items listed in the widget (which you could then rotate using JavaScript), but for our example, I'll just use one widget to represent them. We won't cover the JavaScript aspect of that in this tutorial.

Code Explanation

Again, nothing fancy here if you're already familiar with "old-school" CSS. It's worth mentioning, though, that I did a lot of trial and error just to come up with the precise values for the padding, margins, etc. of the elements, to achieve the look of our design.

Step 14: Completing the Footer Section

We finally come to the last section: the footer. We need to style two main components: the 4 sub-sections, and the copyright area at their bottom.

Let's attach the background image for the whole footer (similar to the one we have for the #header-featured section above). To accomplish the task, let's create a wrapper div for the whole section, named #footerwrap.

Next, let's create the horizontal separator between the 4 sub-sections and the #copyright-info. To achieve the effect, we need to assign a dark bottom border to a container above, and a lighter top border to a container below. But again, since we're using the 960 GS framework, we need to attach these borders to containers outside of elements assigned container_12 classes. To achieve that effect, I created two containers (#fsubwrap1 and #fsubwrap2) that each wrap around the #main-footer and #copyright-info elements:

Next, let's style the vertical separators between each footer sub-section. Initially, I just gave each of these sub-sections a footersub class, and planned to create the general styling that would apply to each one of them. However, due to how the vertical separators appeared -- between the sub-sections but with no separator to the left of the first or the right of the last sub-section -- I found it easier to control the CSS by giving them each a unique ID instead:

Code Explanation

We use the new HTML5 input type email that also allows a placeholder attribute to be placed in it so that we don't need any JavaScript to hide and show sample inputs and instructions (e.g. "email@example.com" or "Type your email address here") . What's great about this input type is that it auto-validates the user's input to check if it is in an email format, which means we don't need JavaScript or server-side validation.

What's cool with this is that we can style the placeholder attribute independently, so that it looks different from the text the user types in, by relying on attribute selectors (i.e. input[placeholder] {property:value}). If you wanted to be cool, you can also style the :focus pseudo-class and give it CSS3 transition properties to fade the text in and out slickly without any JavaScript (we're not doing that here, but I want to give you some ideas on how to take it further). The contents in the other 3 sub-sections can be pretty much styled using "old-school" CSS.

And the final styling we'll do is for the contents of the #copyright-info sub-section. Again this is all pretty much classic CSS, with some text-shadow thrown in:

A Note on Cross-Browser Support

As you followed this tutorial, you probably used the latest Chrome or Firefox browser (being the geeks that you are) to check our progress as we wrote the code for our markup and styling. Unfortunately, at the time of writing, around 50% of Internet users still use browsers that aren't future-standards compliant (i.e. they don't support CSS3/HTML5 yet). Keep that in mind as you create your own web pages; you should use your judgment on whether or not certain HTML5 elements/CSS3 properties are good ideas to use on a production site. Make sure that you're thinking about progressive enhancement, which is important in this transition period in our industry (with new specs, the Mobile Web, and desktop apps moving into the Web space).

For this tutorial, I had the luxury of deciding not to support browsers that haven't implemented/will not implement HTML5/CSS3 or that don't have PNG alpha transparency support (IE6 and lower). But, in the real-world, you have to think about your users and you have to make many compromises in order to best serve their experience.

So this tutorial's product is more of a proof-of-concept -- of how HTML5/CSS3 will make our jobs more awesome once our users move to browsers that support them -- rather than a production-ready site build.

Explore HTML5/CSS3 Frameworks and Tools

Fortunately, some benevolent geeks have done some excellent work for us, to create frameworks and tools for this transitional period. I'm talking about the people behind projects like CSS3 PIE, HTML5 Boilerplate and Modernizr. Check these out when you have the chance -- they can really help speed up development and reduce headaches.

Tutorial Summary

As you've seen in this tutorial, there is nothing you can design in Photoshop that you can't translate into HTML/CSS if you have the fundamental background knowledge of how HTML/CSS works. With browser support for the new HTML5 elements and CSS3 properties getting better and better in browsers, our tasks will become easier, and our capabilities to deliver richer user experiences will be extended greatly.

If you encountered any questions or thoughts you'd like to share as you went through our tutorial, I encourage you to leave your comments below.

This tutorial is Part 2 of a tutorial series that walks you through the design and coding of a vibrant and professional web layout. Part 1 dealt with designing the web layout in Photoshop.

Download Source Files

D. S. Del Rosario is a web designer based in the Philippines who is passionate about web standards. He usually spends his days practicing his kung-fu skills on street thugs, engaging in extreme sports, and obeying the commands of his mom. He dreams of world peace and world domination in his spare time. Email him at your peril.

Nice tutorial, although I don’t agree with some of the HTML choices :)
a better choice for marking up the “fat footer” would be an aside element rather than a div with a footer element.
I also think there are many unecessary and unsemantic div elements. One of the reasons for HTML5 is to achieve more semantic documents with less meaningless divs.
You could also use the ARIA roles : footer role=”contentinfo”, and header role=”banner”, for example. You can then style them in CSS with attribute selectors.

Yes, and there’s more coming (for the older web design tutorials). I’ve been delayed with a couple that I was supposed to convert and write tutorials for, but they’re coming as promised in the comments (just not as quickly as I would’ve hoped).

Great tutorial, I noticed there are issues in Opera for Mac and of course inside IE6 (who cares though, right?)

I really like how you broke down the process in going from the grid960 to your own css classes and id. I’d even say this is the first time I’ve seen this in a tutorial as so many people grow to assume users will simply overwrite these classes or it’s just fine to use the gird layout code as is.

I like the tutorial as i am still Grasping the concepts of html 5 and css as you were styling down the page did not like how you were not showing the extra mark-up you were adding when you just covered the css.
I still learned a lot and thank you for it

The problem was that when I wanted let’s say two columns inside the main contaner_12 they did not align.
Only solution was to put a clearing empty div after them or enclose the two grid_6 in a class=”grid_12 clearfix” div.

Well, I figured that if I want to use the clearfix I had to use id=”container” class=”grid_12 clearfix” instead of (id=”container” class=”container_12 clearfix” .)

if I am not mistaken it should be class=”container_12 clearfix” on your containing div/element/section and the 2 div’s inside would have class=”grid_6″ you would then need to close that out and start another section with class=”container_12 clearfix” and that will clear the floats in the previous div/element/section. see if that works
If I am wrong will someone please correct me

Todd, first, we’re sorry that the images on this post are not displaying. We’ve been working on this issue for a while, and we will get it resolved soon.

We’re trying to get feedback from users not seeing the images, since most users are able to see the images, and we’re having a difficult time determining what could be causing this issue for some users.

Could you help out by answering these questions?:
1) Were you able to see the images in the previous tutorial (Part 1 of this series)? Were you able to download the source file of the previous tutorial?
2) When did you first visit the first tutorial?
3) What browser (and version), operating system (and version) are you using?

thank you. this is an amazing tutorial it features all the things that I’m interested in 960.gs, html5 and css3. I think you also deserve to part of the “benevolent geeks” mate, if you’re not already in there :)

Great tutorial! Although, I noticed as I went through and typed all of the info myself, that there were some discrepencies so the ending had some issues I had to search and fix myself. For instance, at one point you had “descrp” then later “description” then back again. But the overall lesson was excellent and a big help.

really well explained and precisely detailed tutorial (both this part and the preceding PSD). I agree with the post above that there do seem to be a few inconsistencies at the coding stage, but all in a great step-by-step with rock solid explanations. Thanks :)

I am beginner to web design, I followed this tutorial and start coding my own design, but i am stuck in place where, my internal CSS not working for some part, specially like in your more products and more-blurb like in my site. when i check with fire fox tool, it is still taking from the reset.css file only.

AWESOME tutorial! I appreciate this so much!
I just wanted to ask, how did you get that engraved look in the navigation? I couldn’t get the same, elegant look that you achieved. I tried for a little while, but I just couldn’t make it look nice. Any tips?