Tutorial: From Comp to Code--A Complete Website Design

[vtjustinb]

I set out today to do a pretty ambitious thing--I wanted to go through the entire process of developing a website layout from start to finish so that people in this forum could gain a little insight into some common approaches for semantic, CSS-driven design. What I provide at the end of the tutorial is essentially a complete website design, ready for content to be added.

For this toy example we're going to pretend we're developing a blog for a girl named Cassie. She's a relatively design-conscious girl, not too girly but definintely not afraid of colors or subtle contrast. She wants this webpage to reflect her fun personality, but still be professional and clean enough to appear polished and respectable. After spending some time with sketches or moodboards I typically go straight into Photoshop comps, where I can begin to piece together the design of the page.

Designing the Mockup:

The first place I'll start out is picking fixed, fluid or elastic layouts. Because she anticipates the audience of her blog to be primarily design-savvy users, we agree that a fixed layout at a relatively generous width would be most appropriate. Because we're designing for 1024x768 we obviously can't go any wider than 1024, but because of browser chrome and the fact that many people don't browse full-screen we settle with 960px. This is a great number to choose for this resolution because it is divisible by 1, 2, 3, 4, 6, 8, 12, and so on (which makes designing to a grid very easy). Cameron Moll first discussed this width as optimal for 1024 in his blog post here: http://www.cameronmoll.com/archives/001220.html, which is a great read. As a follow-up, he discussed how well this width broke down into grid-based design, and even provided a very handy template which I make frequent use of (and will be used in this tutorial): http://cameronmoll.com/archives/2006...dding_the_960/.

I've decided on a rough color palette, and a width of 960. I would like the header to stretch the width of the browser, and have the 960px column centered on the page. In Photoshop I end up with this blocking as my first step:

http://just-in.org/etc/tut/1-blocking.png

The second step is to overlay the grid in this design so that I can set up my proportions and guides in Photoshop. You can see what this looks like here: http://just-in.org/etc/tut/2-grid.png. Grid-based design is one of the most powerful tools you could ever utilize. Many people look at grids as being too constraining, but the opposite is in fact true. Grids open up many possibilities for going against the grid in creative ways, but overall it provides you with a solid basis for alignment that just "feels right" for your users. You can read more about grids at Khoi Vinh's gorgeous grid-based site: http://www.subtraction.com.

Now that I have my grid setup I can place my content blocks in a little more completely. I have decided to place the side column on the right in a 1/3rd grid (320px), and my header will be 200px high. This also lets me establish a vertical grid of 50px, which will help in alignment for things like navigation and logo branding. I also decide that I want a 10px gutter around each content block, so I set up some guides in Photoshop to easily align things to my grid which I keep hidden until I need to refer to it:

http://just-in.org/etc/tut/3-blocks.png

Happy with my general layout, I turn to polishing what I have. Starting with the header I want to apply a subtle gradient from dark blue to my lighter blue to give the section a little depth. I add a thin 1px line to the bottom of the box for some contrast, and apply a faint drop shadow to make the header pop just a little more:



I then add some faint borders to my side column to separate them from the background more, which gives me this:

http://just-in.org/etc/tut/5-blocking.jpg

The next step is to work on the branding for the site, which I take a simple flower metaphor which represents Cassie's femininity but alter it slightly to give it an updated look. I pick a fun and slightly wavy font for the primary heading, and in the subheading I pick a simple script font to stay in line with the girly feel of the site. It's important to note that you should spend a LOT of time in the branding of a site, and had I of not wanted to pump this out in a day I certainly would have. If there's any place to spend your money when developing your public identitity it's your branding--never be afraid to subcontract out work if you feel you're not qualified to produce something impacting on your own.

That leaves us with this logo:

Next up we nail down the navigation, which is 50px high and sits flush with the right edge of the content. We don't want to get too fancy with the navigation, so we decide on a conventional tab metaphor. We also decide to make these image-only, so that we can re-use the font from the logo for consistency. This is a somewhat poor choose from an accessibility standpoint, since people with failing eyesight cannot resize the navigation text, so as a nod to them we choose a large text size from the start.

Navigation:

One last step is the footer, which we use the text color from the logo and a subtle gradient to cap off the content. At this point we have a full Photoshop comp of our design, separated by layers and ready to be pulled out into our HTML/CSS design:

http://just-in.org/etc/tut/8-comp.jpg

In our next post, we'll start to flesh out the HTML and begin to convert this comp into a semantic CSS-driven layout, ready for content.

[vtjustinb]

Pulling the Comp into Markup:

I like to begin my code with envisioning the content and the structure of the page. This helps really nail down the organization of the page before you get too deep in how to make it look the way it's supposed to. The skeleton of my page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Sample Design</title>
	<style type="text/css" media="screen">
		
	</style>
</head>
<body id="home">
	<div id="branding">
		<h1>Cassie's Place</h1>
		<ul>
			<li>Navigation</li>
		</ul>
	</div>	
	<div id="content">
		<div id="main">
			Main Content
		</div>
		<div id="side">
			Side Content
		</div>
		<div id="footer">
			Footer
		</div>	
	</div>
</body>
</html>

You'll notice there are a few wrapper divs--one being "branding" and the other being "content." You really should strive to minimize these in your designs, but they serve a few important purposes in this layout: 1.) They limit the width of the content to 960px and center everything horizontally with automatic margins 2.) the content div can be "faux-columned" to make sure I get a consistent look. They also do provide a semantic grouping of like divisions, which from an organizational stance isn't such a bad thing.

This next process is really kind of a puzzle. You have a Photoshop comp that looks the way you want it, but you have to get the CSS to kind of "speak your language" in terms of repeating and placed backgrounds as well as borders and positioning. You will definitely improve with experience, but hopefully by me outlining my thought process you can gain some insight into the workflow.

I start with the header, which fortunately for me I designed with a consistent color pattern left-to-right. This should tell you that you could recreate the background with a repeated image, which is what I've done below:



You might notice that the filename of that image is "bg_header.png" which is a naming convention I like to follow. By using type_name I can visually group similar types of files together without needing to create a directory structure. Little things like this can really save time when you have to hunt down images in a site that has several hundred. Also you'll notice that I chose PNG as the format of choice, and that is simply because you can depend on color precision with pngs and as long as the color palette isn't too high or the image too large they come out with nice small filesizes.

I could place this header inside of #branding, but since I want it to stay at 960px wide and I want the header to span the entire width of the page I'll instead place it inside of the body tag:

#header {
	color: #666;	
	background: #d4d495 url(img/bg_header.png) left top repeat-x;
	}

It's worth noting that I could have easily recreated that 1px bottom contrast line in CSS, but that would require an addition div so I was content simply including that in the repeated bg tile.

My next step is extracting out my logo image, which I've decided to make with the full background in-tact:



I could have just as easily extracted the logo layer out as a transparent PNG, but because I don't want to bother with PNG hacks this is an easy way to make the logo look good cross-browser. Another option would be to make a transparent gif with parts of the gradient background outlining the logo to ensure the it blends properly into the background, but because that pixel-perfect alignment to fit into the gradient I'll stick with the composite png.

For the markup I use a header tag. It is common to mark the site title up with a h1 tag, which is what I've chosen to do. You'll notice I use image text exclusively in the logo, but that doesn't mean I can't provide the same text inside of the h1 and hide it. This lets people with CSS disabled view a proper site header while letting everyone else see the pretty version:

#branding h1 {
	position: absolute;
	width: 381px;
	height: 199px;
	left: 0;
	top: 0;
	background: url(img/img_logo.png) left top no-repeat;
	text-indent: -9999px;
	}

So why use absolute positioning if i'm just going to stick it top-left? (which is where it would default to in normal flow) Well, flexibility. It makes the placement independent of my logo, and if I ever decide I want to move it around or change its grid it's just a few tweaks to the CSS. If I had instead done this with floats I'd have to consider width, margins, and how it interacts with my navigation. I just find it's a good practice to put these hooks in early so that when I need to make changes down the road they're simple. Also take note of the "text-indent: -9999px" This is a common method of hiding text without hiding the element itself which is important to users with screen readers.

Next up I need to tackle the navigation, which is usually quite the beast for most people new to CSS. The trend is to use unordered lists for navigation markup, and I'm a fan of that as well. Not only does it give your navigation semantic structure (and plenty of nested tags to style), but for users who have CSS disabled it presents the navigation in a logical format. For beginners I think you should learn to jump in there and make your own CSS navigation. One of the worst things beginners do is simply copy CSS code, which means if you want to make any additions or manipulations you're completely in the dark. CSS navigation isn't as hard as it looks, so here is the step by step process on how to achieve the navigation I made in the comp:

First off there's the issue of the the tabs themselves. Typically if you want image navigation people place tabs or buttons as background images, but these don't handle text resizing well. Douglas Bowman pioneered a technique called "Sliding Doors" which allow tabs to grow horizontally and vertically with the text using only a few images. If you are using text for the labels of your navigation I would highly suggest looking into this method, which is well-outlined here: http://www.alistapart.com/articles/slidingdoors2/

Like I mentioned above we decided to go with image-only text to reinforce the branding, so because I chose a larger font size to enhance accessibility I don't have to worry too much about resizing. I'll take advantage of this fact and create both the normal tabs and the hover tabs all in one image:



You'll notice that the tabs are 50px high, and that entire image is 100px high. This lets me do some clever things with the image tabs themselves without needing a bunch of separate files. To understand how this will work, think of an oldschool roll of film. The film itself consists of several frames, but only the one directly infront of the lens opening is displayed. What's displayed on the screen is a direct result of where the projector offsets the film. Think of the list items (LIs) of our navigation as the camera lens. It has a fixed height and width, and will only display the background that can fit in it. By using CSS background positioning, we can offset the background so that different parts of the background show through on different LIs. This lets us store our rollover states, our idle states, and all tabs in one file. The following figure illustrates how specific LIs can use offsetting to show different parts of the same image:



My first step is to absolutely position my navigation ul, which I place at the bottom right corner of my header (allowing 1px for the contrast line):

#branding ul {
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 454px;			
	height: 50px;			 		
	}

Next I'm going to fully mark up my navigation, providing hooks for each list element (you'll see why in a minute):

<ul>
	<li id="nav-home"><a href="home.html">Home</a></li>
	<li id="nav-about"><a href="about.html">About</a></li>
	<li id="nav-archives"><a href="arch.html">Archives</a></li>
	<li id="nav-contact"><a href="contact.html">Contact</a></li>
</ul>

For a horizontal navigation, you need to get the LI elements to position themselves horizontally. The easiest way to achieve this is by floating the elements. We'll also take off the list-style, removing the bullets from the list:

#branding li { 
	list-style: none;
	float: left;
	margin-left: 2px;
	}

You'll notice I put a margin of 2px there, and that's mainly to provide a small gutter between the li's that aren't clickable. This is a subtle visual cue that makes the tabs feel like separate entitites, and not just an image bar. Also notice that because I gave the ul a specific height I do not need to float it. Normally if you float the list elements of an unordered list, the unordered list ceases to have any height unless you float it as well. Since I know the height of my navigation exactly I removed this behavior by simply giving it a height.

Now we want to mark up the anchors inside of the list items, which is where we will place our background images. Now, it would have been perfectly feasible to instead put the background elements on the li tag, but this raises a problem in IE6 which doesn't support :hover on all element types. We want the tabs to change when you hover over them with a mouse, and by placing the background on the anchor instead we can use a:hover to change the background image--which IE6 handles just fine.

#branding li a {
	height: 50px;
	display: block;
	width: 111px;
	text-indent: -9999px;
	}

There's two things worth noting here. First is "display: block", which turns the anchor tag into a block-level element. This has to do with a design guideline called "Fitt's Law," which essentially states the amount of time it takes a user to select something is a function of both the size of the target area and the distance the user has to travel. By making the anchor tags block level you essentially make the entire tab area clickable, which is a win for ease-of-use. You can read more about how Fitt's Law can apply to the web at Dunstan Orchard's (sadly now defunct) blog: http://1976design.com/blog/archive/2...ion-fitts-law/. The second thing of merit is the repetition of the text-indent from our site header, which will effectively hide the text of the unordered list while still allowing them to be clickable.

Note that there's a seemingly arbitrary width for the anchors, but if you do a little math (4 tabs @ 111px = 444px, 4 2px margins = 8, 444+8 = 452) you'll see that it all adds up to the width of our ul: 452px.

Something handy that I like to do at this point is to place the navigation image as a background of the ul, and give the li's a transparent background to make sure everything lines up.

I'll temporarily add the following code to the ul and li tags:

#branding ul {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 452px;			
	height: 50px;		
	background: url(img/bg_nav.png) 2px top no-repeat;
	}
#branding li { 
	list-style: none;
	float: left;
	margin-left: 2px;
	background-color: #000;
	opacity: 0.4;
}

This puts a transparent overlay in the li elements, which lets you quickly check to make sure everything is positioned correctly before you move on:

http://just-in.org/etc/tut/10-nav.jpg

As one last tweak I put the entire navigation image as background of the UL. This is to deal with flickering that IE6 is bad about during images changes. There's a slight pause for the server to redisplay an image, even if it's only been repositioned, so by putting the image on our UL it will still look loaded and we won't get any flickering.

Now I need to place the background images on my li anchors, which will let them display the tabs individually:

#branding li#nav-home a{ background: url(img/bg_nav.png) left top no-repeat; }
#branding li#nav-about a { background: url(img/bg_nav.png) -113px top no-repeat; }
#branding li#nav-archives a { background: url(img/bg_nav.png) -226px top no-repeat; }
#branding li#nav-contact a { background: url(img/bg_nav.png) -339px top no-repeat; }

With these selectors you see how we can use the same image for all of them, and simply change the negative offset to scoot the image backwards so that only the right tab shows through that li. You'll also notice that because all of these elements are aligned to "top" that we'll only see the inactive tabs. If you remember, the nav image we crated was 100px tall, and the bottom 50px are the rollover versions of the inactive tabs.

Now we add the tabs for the rollovers, along with a few extra selectors:

#branding li#nav-home a:hover,
#home #branding li#nav-home a { background: url(img/bg_nav.png) left bottom no-repeat; }		
#branding li#nav-about a:hover,
#about #branding li#nav-about a { background: url(img/bg_nav.png) -113px bottom no-repeat; }
#branding li#nav-archives a:hover,
#archives #branding li#nav-archives a { background: url(img/bg_nav.png) -226px bottom no-repeat; }		
#branding li#nav-contact a:hover,
#contact #branding li#nav-contact a { background: url(img/bg_nav.png) -339px bottom no-repeat; }

So what's up with the rules like "#home #branding li#nav-home a"? Well, this allows us to place a single id on the body tag, which will make one of these rules active. This allows you to make one of your tabs "active" without actually having to touch the navigation markup at all (conventionally people put a class on one of the elements called "active" or something similar). This is really handy when making use of PHP or other server-side languages where we can dynamically include the navigation on each page. It's also worth noting that I could have done this with simple background-position changes, but since I wanted the rule to apply to active tabs as well (not just hovers) I can't depend on the right image being loaded so I just do an image swap.

So since we're mocking up the home page we'll add a id="home" to the body tag making that tab active, and we now have a completed header with a functional navigation!

http://just-in.org/etc/tut/11-header.jpg

With that out of the way, I'm going to add one little bit of visual sugar to the design. If you remember, our layout had a drop shadow below the header itself. Drop shadows can be tricky to make when they fall on top of several different colored elements, because IE6 and below does not support alpha PNGs. To combat this many people put the the dropshadows into the tops and sides of the layout backgrounds, and try to line them up to give the illusion of a continuous shadow. We could do this, but it'd involve several more tags and let's face it the shadow isn't _that_ necessary to the design.

So my choice here is to actually use a repeated PNG to give a nice drop-shadow effect to those who can handle it, and I'm absolutely placing it in the window so that it doesn't interfere with any existing markup:

I place <div id="shadow"><!-- --></div> right before I close out the body tag (since there is no parent container with position: relative, I can absolutely position the shadow div with relation to the window which is what I want). This will look bad in IE6 though, so in my CSS I will add a rule to hide it from IE6:

#shadow {
	position: absolute;
	top: 200px;
	left: 0;
	width: 100%;
	height: 9px;
	background: url(img/bg_shadow.png) left top repeat-x !important;
	background: none;
	}

Notice that there are two background declarations. The first one is appended with an "!important" declaration, which tells most modern browsers that this background property is more important than the other so it'll use the important one. Because IE6 doesn't acknowledge !important, we can follow that rule up with a rule that tells IE6 to display nothing at all.

This is one of those simple things where instead of trying to over-engineer the design just so it will look the same on a legacy browser, you decide that you can do without some of the eye-candy so long as the content is accessible and thoughtful. I think that's something we all should come to grips with, instead of always springing straight to complicated hacks and the like to make things look the same cross-browser.

[vtjustinb]

Layout and Floats:

Now we get to the fun part that people have so much grief over, and that's CSS-driven layout. Recently I've been advocating the use of positioned elements in layouts, but because floats are so common and people struggle with them early on I thought I'd instead use floats in this design. Besdies, because absolutely-positioned blocks cannot be cleared through CSS you'd need to add a little Javascript to the party to use a positioned layout in this case (otherwise the footer wouldn't look right), and I think that might complicate things just a bit.

To start out we want to create "faux columns" to similate two columns that stretch the entire width of the container. This simple technique was first suggested by Dan Cederholm, and it's one of those brilliant things I use all the time. From our Photoshop comp we'll create a 50px high image that we can repeat vertically, giving us the illusion of two columns:

http://just-in.org/etc/tut/img/bg_content.png

Why use 50px instead of 1px? Well, browsers tend to get a slight performance gain when rendering repeated elements of a significant width. I could have easily used 1px instead since there's no vertical variation in the design, but by making the tile a little larger we'll improve rendering performance for a couple more initial bytes.

#content {			
	width: 960px;			
	background: #fff url(img/bg_content.png) left top repeat-y;			
	margin: 0 auto;	
	margin-bottom: 20px;		
}

Just so you don't have to scroll all the way up, here is what our complete code is shaping up to look like so far:

<body id="home">
	<div id="branding">
		<h1>Cassie's Place</h1>
		<ul>
			<li id="nav-home"><a href="home.html" >Home</a></li>
			<li id="nav-about"><a href="about.html">About</a></li>
			<li id="nav-archives"><a href="arch.html">Archives</a></li>
			<li id="nav-contact"><a href="contact.html">Contact</a></li>
		</ul>
	</div>	
	<div id="content">
		<div id="main">
			Main Content
		</div>
		<div id="side">
			Side Content
		</div>
		<div id="footer">
			Footer
		</div>	
	</div>	
	<div id="shadow"><!-- --></div>	
</body>

A lot of people first look at floats and decide to make them sit exactly flush with one another. This usually causes problems however, as whenever either of the content areas grow in size (as they often do in IE6) the floats don't have enough room to sit and they bump one below the other. Because of this, for two column layouts I usually suggest floating one of them left, one of them right, and allowing the getter between them to simply be negative space. This gives you a few pixels of wiggle room and will save you some grief with tricky floats flying all over the place.

Starting with the main content, you'll remember that our comp had a 10px border all the way around the main box. Our faux column doesn't have this in it, so we'll need to add that to our #main content. The easy way I've chosen to do this is to add a top and bottom border to #main finishing the box:

http://just-in.org/etc/tut/borders.png

The CSS to get these two guys living beside each other is:

#main {
	float: left;			
	width: 600px;
	height: 400px;
	border-top: 10px solid #fff;
	border-bottom: 10px solid #fff;	
	padding: 10px 20px;			
	background: blue;
}	
#side {
	float: right;			
	width: 280px;						
	padding: 20px 20px 10px 0;
	background: red;
}

Notice the background: red and background: blue I placed in both rules. This just lets me quickly check how the layouts are arranged, and verify the gutter between the two floats:

http://just-in.org/etc/tut/floating.png

You'll notice in the width calculations that I had to account for the horizontal padding. Even though my first column is 640px, the padding on the left and right of 20px make it 600 + 20 + 20 = 640px, so I need to declare 600px for the width.

After taking out the red and blue background guides, the last thing I have to do is provide a footer. Since it uses a background gradient I extract a similar chunk of it from my Photoshop comp to repeat, and then provide the CSS to make it all happen:

#footer {
	clear: both;			
	width: 960px;
	height: 50px;
	background: url(img/bg_footer.png) left top repeat-x;
	color: #fff;			
	text-align: center;
	line-height: 50px;
	}

Notice the "clear: both." This is absolutely necessary to include, since without it the two floated elements inside of #content would not get computed into the height of #content--which would result in our faux columns disappearing completely. You'll also notice the line-height of 50px, which just allows us to vertically center the footer text without any fancy hacks.

At this point the layout is done! Check out what we have here:

http://just-in.org/etc/tut/13-done.png

In the next post we will talk about the beginning of typography in our website, as well as the oft-frustrating process of making our website accessible cross-browser (also known as the I hate IE6 whinefest :P).

[vtjustinb]

Typography and Bug-Fixing:

Up until this point we haven't thought about typography at all. All of our text has been filler, and any other text elements have been handled exclusively by images. Text on the web is a tricky thing, mainly because of the differences browser-to-browser on how to handle text declarations. There are plenty of good websites out there that will tell you when to use em's and when to use pt's, but what I want to talk about is making your type ledgible and comfortable.

There are reasons fixed layouts are popular. One is the control it gives designers, but another not as famous reason is its impact on line-length. As line-length increases your page becomes less readible, mainly because of the large distance you make your users' eyes travel from the end of one line to the beginning of the next. Most experts agree around 12 words a line is ideal, and with our font size choice and fixed content area of 600px we can come pretty close to nailing that exactly.

To begin our journey into typography I'm going to create some dummy text in the main content area, as well as a heading and subheading:

<div id="main">
	<h2>Tricks &amp; Treats</h2>
	<p>Lorem ipsum dolor sit amet, ...</p>
	<p>Lorem ipsum dolor sit amet, ...</p>
	<h3>Or are they?</h3>
	<p>Lorem ipsum dolor sit amet, ....</p>			
</div>

Which gives us this in the default rendering:

http://just-in.org/etc/tut/text1.png

Pretty ugly, but that has a lot to do with the fact that in our CSS design we zeroed out the default margins of all tags on the page (* { margin: 0; padding: 0; }), and we haven't picked any fonts or sizings yet.

The first step to typography is deciding on a font and relative sizing. I want to go with a sans-serif on the body text (Lucida Grande), with a serif font for the headings (Georgia). I also want the type to be relatively large, to make the content of the blog important and make reading it a little more comfortable.

Most people would simply say "ok then, 14px Lucida--done!" but there's one more thing to it. A very important thing that most people ignore, and that's line-height. Line-height corresponds to vertical rhythm, which is the way your page flows with respect to vertical positioning and it has a HUGE impact on how comfortable your page is to read. Richard Rutter made an excellent post on this subject during the 24ways project, and you can read more about the approach of it here: http://24ways.org/2006/compose-to-a-vertical-rhythm

A typical line-height that is comfortable is 1.5 times the font size in relative units. So for our 14px Lucida we'll want to compose to a vertical rhythm that is 21 pixels tall. To help guide this, I go back into Photoshop and create a repeated image that is 24 pixels tall with grid lines and place this on the #main div:



So now I can begin to declare my font settings. I'll start by adding the following rules to the body tag:

body { 						
	color: #666;	
	background: #d4d495 url(img/bg_header.png) left top repeat-x;
	font: 87.5% "Lucida Grande", Arial, sans-serif;
	}
html > body { font-size: 14px; }

For the font size I use 87.5%, which is 14 divided by 16 (the conventional default size of browser text). IE6 has a nasty problem where font sizes declared with pixels are unscalable, so that is why I used a percentage instead of the rule below which sets the font size to 14px for all standards-compliant browsers (which allow for pixel-sized text to be resized).

I'll start with my paragraphs, by adding a bottom margin of 1.5em (a full vertical row) and a line-height of 1.5ems (effectively 21px):

p { 
	line-height: 1.5em;
	margin-bottom: 1.5em;
	}

This already makes things look better, but it's still a little off:

http://just-in.org/etc/tut/text3.png

First we have to style the h2 to fit in our vertical rhythm, and to do that we're going to make it span two full vertical rows. To do this you need to perform a little math, but it's worth it for the end result.

Start with the font size. We want our h2 to be 28px, so that needs to be set in em's (14/28 = 2em). At this point any line-height adjustments you make will be in relation to the new font size, so a line height of 1em would actually mean 28px for this element. We need to determine how much line-spacing to give our h2 to make it span 2 rows (42px) so we perform a little math: 42/28 = 1.5, so conveniently this line height is also 1.5em:

h2 {
	font-size: 2em;
	line-height: 1.5em;		
	}

Which gives us: http://just-in.org/etc/tut/text4.png

You'll notice that lined up the first paragraphs nicely, but our subheading is throwing a kink in all of that so we'll need to figure it out too.

We'd like to use a font-size of 22px for our subheadings, so that is 22/14 = 1.571428em. We'll go ahead and be that precise with it, just to help out with browser rendering. We also want this to sit in the middle of two rows, so we'll need to calculate the line height off of the new font-size: 42/22 = 1.909em, so we set the rule and everything now lines up perfectly:

h3 {
	font-size: 1.571428em;
	line-height: 1.909em;	
	}

And what we're left with is a vertical rhythm that just "feels right" and is very easy on the eyes to read:



We want the sidebar typography to be a little smaller, to emphasize the main content, so we pick paragraph size of 12px and heading size of 18px and we do the exact same steps outlined above to make this happen in the vertical rhythm as well:

#side h2 {
	font-size: 1.2875em;
	line-height: 2.333em;
	}
#side p {
	font-size: 0.875em;
	line-height: 1.75em;
	}

So now we have the site pretty well laid-out. There's plenty of odds and ends left, and we haven't added a lot of finishing touches to the design, but everything is there and readible. Now is the part of the process most of us dread, and that's seeing how it looks in other browsers. I completely advocate that you first develop your layout entirely to a standards-compliant browser (I did Safari in this case), and then you come back and make adjustments for other browsers post-facto. I also believe strongly in the following point:

LET GO OF MAKING EVERYTHING LOOK THE SAME.

Seriously. It's a waste of money and development time to be OCD with how your page renders in other browsers. So long as it looks good and is accessible, it's a successful design. If your customer demands it look the same that's another thing, but I think we as designers need to let go of our need for pixel precision.

I always fire up the site in my mortal enemy first: IE6. When I did, everything looked surprisingly good. That's because from my experience I was able to avoid a lot of potential problems, such as when I made a negative space gutter between my floats to keep IE6 from freaking out. The main problem is that one of my navigation tabs has wrapped because it didn't have enough space:

http://just-in.org/etc/tut/debug1.png

The simple fix for that is giving IE a little bit more breathing room, let's say 2 more pixels on the width of the ul. We'll write this in its own rule to isolate it from standards-compliant browsers through a filter.

* html #branding ul { 
	width: 454px; 
	background-position: 4px top; 
	}

You'll notice I also had to reposition the background on the UL by 2 more pixels to accomodate this new width. I check back in Safari to make sure this change didn't have any regressions in my other design, and it looks good to go. I check in IE7 and everything looks good. Same goes (no brainer) for Firefox.

There's one last bit of bug-checking to tend to, and seeing what users without CSS get. By turning off all CSS in Firefox you can see the naked markup underneith, and so long as the content is still accessible and logically-ordered you're good to go.

And that's it!!

See the full version of our efforts in our working prototype here:

http://just-in.org/etc/tut/index.html

[vtjustinb]

Conclusion:

For designers with little coding experience and developers who are new to the ideas of semantic design and CSS-based layout "where to start" is a daunting query. Hopefully by providing this play-by-play you've been able to distill some insight into how I work as a web designer, and as a result will better understand the thought-process and steps necessary to create a modern CSS-based design.

The design I created is certainly not perfect--merely an early prototype. At this point you would want to go back and revisit your choices to find places to embellish and polish your design, as well as add enhancements to further your effects in accessibility. Design is always iterative, and you only truly achieve perfection when there's nothing to add and nothing to take away--so keep at it!

If you have any questions or erratta feel free to follow up in this thread and I'll try to get to them. Hopefully I didn't leave any of the vital steps out, but if there's anything that's foggy I'd be more than happy to clear it up.

[vtjustinb]

Reserved just in case.

[vtjustinb]

A final bump on this in case anyone interested missed it.

[VIPStephan]

I guess you’re better off putting this on some blog/website of yours and then link to it whenever you feel someone needs a step by step guide, or put a link to it in your signature.

[CaptainB]

Very good tutorial, you must have put a lot of time in it!
Great reading!

I suggest that this topic should be made a sticky - would be useful for many new users.

[Excavator]

Great Tutorial vtjustinb!
Definitely needs to be a sticky.
Do you have this set up on a webpage? I'd love to pass a url out to a few people.

[effpeetee]

Try these for size.

Courtesy of vtjustinb, the Author.

http://www.exitfegs.co.uk/TestDesign.html

http://www.exitfegs.co.uk/CFTutoria1.pdf

images available in the img folder. - add image to my basic url like this.

http://www.exitfegs.co.uk/img/1-blocking.png


Frank