I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website.

In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally it’s just how Adit has described.
Our brain works well, in order to solve a big problem, if we can divide the main issue in N operations that solve N little difficulties, and the total sum of these N little steps provides the solution for our big problem. Perfect, ‘Houston, we have a big problem!’ We should create a working web design. Actually the common routine requires the following main steps:

• Step 1: understand the theme and the topics of the website and decode the client’s requests
• Step 2: choose the right style and sketch your ideas
• Step 3: draw a clean and clear wireframe to summarize the structure of the website
• Step 4: design the website (in pixels) through an image editor, like Photoshop, to create a real-scale mockup
• Step 5: convert your psd mockup to HTML and CSS

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

How HTML 5 And CSS3 Can Change Web Design

If you were to ask me which is the greatest change that HTML 5 and CSS3 could bring about, I’d focalize my answer on the use of the image editors. Sure, we can talk about the power of the semantic web or about the reduction of the plugin-based rich internet applications (such as Flash or Java); but as web designer the first, big, change is just within my design process. In fact the new features of CSS3 allow us a complete control of some properties able to create nice effects without the use of jpgs, pngs or gifs. New properties of CSS3, such as box-shadow, avoid creating pixel-perfect images to make precious your web design.
For a long time I’ve thought about Photoshop (or other image editors) ‘it is an essential tool to develope a website.’ Actually I’m changing this point of view to ‘it is an useful tool to develope a website.’
From the routine described in the introduction of the article it’s evident how the psd mockup and PSD-to-HTML conversion are needful things, but, digging into new features of CSS3, a question hires my brain: ‘do you really need a psd mockup?’
The answer, in my opinion, is ’sometimes.’ When you have a clear concept and a good wireframe you may code instantly an HTML-based mockup for a browser; to save your time (and your money) avoiding an almost-absolete step.
Note: I am not saying that you don’t need Photoshop. I am just saying that, sometimes, a psd mockup could be a superflous step, however you could need an image editor to create stunning graphic details.
Megan Fisher explains in wonderful way her point of view about HTML-based mockup with her article on 24ways titled “Make Your Mockup in Markup.”

Quick Overview On HTML 5

HTML 5 borns to improve interoperability and to reduce development costs for websites and web applications. It is not a W3C recommendation yet, and for this reason you have to read information contained in the article like a simple overview on how we might work with new technologies in the (next) future.

HTML 5 is aimed to create a comprehensive and all-in-one markup language for front-end development, able to provide a qualitative information on the different elements of the page; all this introducing new media elements (and their attributes), such as <video> and <audio>, and semanthic elements (that reflect modern usage of the website), such as <article>, <header> and <footer>.
We focalize our attention on the new elements that make easier to structure a web page. Take a look to the following elements, which are all new features of HTML 5 (information from HTML 5 | Working Draft).

<section> – section element is a generic section of a document or application, a thematic grouping of content that contains a heading. The section element is not a generic container element like a <div>. If you create a section for styling purposes or as a convenience for scripting, you should use a <div>. A section element is the right choice when you want that the element’s contents are listed explicitly in the document’s outline (read “<section> is not just a “semantic <div>” to learn more).

<aside> – aside element is a section of a page that consists of content that is tangentially related to the content around the aside element. We can use aside element for sidebars, for advertising, for groups of nav elements, and for other content that we can consider separate from the main content of the page.

<article> – article element is a self-contained composition (a forum post, a magazine or newspaper article, a blog entry) in a web page or web application and that is intended to be distributable or reusable. You should use the article element, instead of the section element, when it would make sense to syndicate the contents of the element.

<footer> – footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. It can contain information about its section, links to related documents, copyright dataansd so on. Footer element used for a general site-wide footer and for a article (or section) footer.

<header> – header element represents a group of introductory or navigational aids, it is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element)

<nav> – nav element is a section with navigation links. Not all groups of links on your web page need to be within a nav element, only sections that consist of major navigation blocks are appropriate for the nav element.

<address> – address element represents the contact information for its nearest article.

<time> – it is used to represent a date and/or the time.

Quick Overview On CSS3

Like HTML 5 also Cascading Style Sheet Level 3 is under development and it is not a W3C recommendation yet. However we can start to use some new features and properties, which work in modern browser, to improve and optimize our web design projects.
There are some properties that you may experiment, such as border-radius and box-shadow, but realistically you have to fight with browsers compatibility to create a CSS3-based style sheet for a client project.
Below, at any rate, you can take a look at some new features and techniques that you may put into practice immediately.

RGBa – RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

background: rgba(196,89,30,0.65);

box-shadow – the box-shadow CSS property accepts one or more shadow effects as a comma-separated list, to attach one or more drop-shadows to a box.

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

border-radius – other great new property: border-radius, that allows us to add nice rounded corners on box-items.

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

text-shadow – the text-shadow new property accepts a comma-separated list of shadow effects to be applied to the text of the element.

text-shadow: 1px 1px 1px #2c0306;

An Elegant Web Design With HTML 5 And CSS3 – Live Preview and Download

Now, after a quick overview on the technologies that we will use, we can start to design our website. The aim is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer).
Below you can see the final resul of our efforts; don’t forget that it is coded through two new great technologies, HTML 5 and CSS3. You may see a live preview of the template and download the archive with all source files.

The template can be used and edited without any restrictions or limitations. Feel free to modify the template in private or commercial projects. It is absolutely free to use and released under GNU General Public License. We love our readers!

How To Create A Nice Blog Design Touching The Future

During the introduction I’ve described a scenario in which we don’t need Photoshop to make a good work and create a nice web design. It’s possible, but the initial steps are very important in this case. You need to focus and formalize the requests of the client and create a good plan to work directly with the code.
I suggest to use pencil and paper to sketch your ideas. You should create a working wireframe, not 100% complete, however able to synthesize the client’s necessities and explain your plan for a comfortable work with the code.

Sketch Your Ideas

After a revision of the goals (from client’s requests) I decide to create a clean layout with a simple header, a container for recent posts, a column for archive (that contains a list of posts) and a ’sidebar’ with personal info, a preview of the portfolio and contact info.
Below you can see my row wireframe.

Graphic Details

Did I say ‘you don’t need Photoshop?’ No my friend, I just said ‘you don’t need psd mockup.’ High-quality graphic details are useful to design a great website. So, start from color palette and then draw good details in order to make precious your design. Below you can take a look to the graphics, created through Photoshop, that help us in building our blog design.

Color palette

Graphics

I’ll use the square pattern to create a nice background for the main container; for the header I’ll use the red-gradient image with a soft noise-effect. I’ve create the logo using French Script MT font, a soft gradient effect and a drop-shadow, I’ve also arranged in advance the image to apply, in due course, the CSS sprite techniques. There also two nice, minimal, icons to create ’subscribe to blog’ buttons.

Code Your Website With HTML 5

As evident, we have the following elements: header, last posts container, archive with a list of posts and blocks that usually we find in the sidebar of website, such as personal information, blogroll and contact details.
You may check out complete code here: index.html – style.css.

Step 1 – Basic Structure
First of all I define the basic structure of the HTML page, including Doctype, links to stylesheets, the title of the page and charset details. The following image explains the structure and highlights the tag that I use to create the basic structure.

And now it’s time for the code.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mr. hurley | personal blog</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<header id="site_head">
		<div class="header_cont"><!--useful to create the 960px limit-->
		<!--header stuff-->
		</div>
	</header>

	<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts">
		<!--last posts here-->
		</section>

		<div class="left_cont">
		<section id="archive">
		<!--list od posts here-->
		</section>

		<aside class="friends">
		<!--blogroll-->
		</aside>
		</div>

		<aside>
		<section class="about">
		<!--personal info here-->
		</section>		

		<nav>
		<!--links for the portfolio-->
		</nav>

		<section class="contact">
		<!--contact details here-->
		</section>
		</aside>

		<footer class="bottom">
		<!--footer info here-->
		</footer>
		</footer>

	</div><!--/main_container-->

</body>
</html>

Step 2 – The Header
According to the definitions of the paragraph titled “Quick Overview On HTML 5″, we can code the header section of our page as shown below.

<header id="site_head">
		<div class="header_cont">
		<h1><a href="#">mr. hurley</a></h1>

		<nav class="head_nav">
		<ul>
			<li class="rss"><a href="#">Subscribe</a></li>
			<li class="twitter"><a href="#">Follow Me</a></li>
			<li class="home"><a href="#">Home</a></li>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		</nav>
		</div>
	</header>

Create the style.css, linked in our <head> section, and start to add the style for elements (and nested blocks) of the <header>. Note: The first couple of lines in the CSS are used to reset any default browser styling and to set-up the style for ‘general’ tag, such us a or :focus.

@charset "utf-8";
/* CSS Document */

/*  Reset for some default browser CSS - General */

body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
	margin: 0; padding: 0; border: 0; list-style: none;
}

a {
	text-decoration: none;
	color: #961b25;
}

a:hover {
	color: #6f92a7;
}

:focus {
	outline: 0;
}

h1, h2, h3 {
	font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-weight: normal;
} 

h2 {
	font-size: 22px;
	line-height: 28px;
}

.float {
		float:left;
	}

body {
	background: #f6f6ee url(images/bck.jpg);
	font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	}	

/* Header */

header#site_head {
	background: url(images/bck_head.jpg);
	-moz-box-shadow: inset 0px -2px 3px #480508;
	-khtml-box-shadow: inset 0px -2px 3px #480508;
	-webkit-box-shadow: inset 0px -2px 3px #480508;
	box-shadow: inset 0px -2px 3px #480508;
	border-bottom: 1px solid #fffffb;
	height: 70px;
	width: 100%;
	display: block;
}

	.header_cont {
		width: 960px;
		margin: 0 auto;
		padding-top: 15px;
	}

		.header_cont h1 {
			text-indent:-9999px;
			float: left;
		}

		.header_cont h1 a {
			background: url(images/logo.png) no-repeat;
			width: 143px;
			height: 45px;
			display: block;
		}

		.header_cont h1 a:hover {
			background-position: 0px -45px;
		}

		nav.head_nav {
			float: right;
			margin-top: 13px;
		}

		nav.head_nav ul li {
			display: inline;
			margin: 0px 5px;
		}	

			nav.head_nav ul li a {
				color: #f6f6ee;
				font-size: 12px;
				font-weight: normal;
				text-transform: lowercase;
				padding: 5px 8px;
			}

			nav.head_nav ul li.home a {
				background: #4f1d1e;
				-moz-border-radius: 10px;
				-khtml-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}

			nav.head_nav ul li a:hover {
				text-shadow: 1px 1px 1px #2c0306;
				background: #4f1d1e;
				-moz-border-radius: 10px;
				-khtml-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				-moz-box-shadow: inset 0px 0px 2px #2c0306;
				-khtml-box-shadow: inset 0px 0px 2px #2c0306;
				-webkit-box-shadow: inset 0px 0px 2px #2c0306;
				box-shadow: inset 0px 0px 2px #2c0306;
				color: #f6f6ee;
			}

			nav.head_nav ul li.rss, nav.head_nav ul li.twitter  {
				position: relative;
				left: -355px;
				margin: 0;
				}

			nav.head_nav ul li.rss a {
				color: #b4676c;
				border-right: 1px solid #903f43;
				margin: 0;
				padding-left: 20px;
				background: url(images/rss.png) left no-repeat;
				font-size:10px;
		}

			nav.head_nav ul li.twitter a {
				color: #b4676c;
				margin-left: 3px;
				padding-left: 20px;
				background: url(images/twitter.png) left no-repeat;
				font-size:10px;
			}

			nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover  {
				color: #f6f6ee;
				-moz-border-radius: 0;
				-khtml-border-radius: 0;
				-webkit-border-radius: 0;
				border-radius: 0;
				-moz-box-shadow: none;
				-khtml-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
			}

The result of the code.

Step 3 – Last posts container
As usual, I describe directly showing the code how to build a well-done HTML section aimed to enclose recent posts. The <section class=”last_posts”r> is within <div class=”main_container”> (which defines the 960px limit). Here we use the new tags <article>, <address> and <time> for the first time, in order to create a ’semanthic’ single post section. Note: download the archive with the source files, there you can find all used images.

<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts"><!--section for recent posts-->
		<header class="section_tit">
			<h3>Last posts</h3>
		</header>

			<div class="single_post"><!--single post container-->
				<article>
				<div class="float">
					<figure>
						<img src="images/test3.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
					</header>
					<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients. After all, they put their trust in me and gladly compensate me for my efforts. I guess I would be...</p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>

			</div>

			<div class="single_post">
				<article>
				<div class="float">
					<figure>
						<img src="images/test1.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
					</header>
					<p>For a long time purple has been the least used colour in web design. In recent months I noticed the number of websites...</p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

			<div class="single_post">
				<article>
				<div class="float">
					<figure>
						<img src="images/test4.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
					</header>
					<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. </p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

			<div class="single_post">
				<article>
				<div class="float">
					<figure>
						<img src="images/test2.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <address><a href="#">Mr. Hurley</a></address></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
					</header>
					<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

		</section>

</div>

Below the style for this section.

/* Main container */	

#main_content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
}

	/* Last posts section */	

	.section_tit {
		clear: both;
	}

		.section_tit h3 {
			background: url(images/line.png) no-repeat center center;
			text-align: center;
			font-size: 34px;
			margin: 10px 0 25px 0;
			color: #c9c9c0;
			text-shadow: 1px 1px 0px #fff;
		}

	div.single_post {
		float: left;
		width: 447px;
		height: 345px;
		margin: 0 16px 35px 16px;
	}

		img {
			border: 5px solid rgba(255,255,255,0.75);
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-box-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
		}

		div.single_post footer {
			color: #2b2b28;
			text-align:right;
			font-size: 10px;
		}

		div.single_post ul  {
			margin-top: 10px;
			border-right: 3px solid #dbdbd4;
		}

		div.single_post ul  li {
			padding: 1px 13px 1px 0px;
		}

		div.single_post ul  li a {
			font-weight: bold;
		}

		div.art {
			width: 250px;
			display: block;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(255,255,255,1);
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin-left: 15px;
			overflow: auto;
			float:left;
		}

		div.art:hover {
			background: rgba(255,255,255,1);
		}

		div.single_post header h2 {
			border-bottom: 1px solid #dbdbd4;
			margin: 20px;
			padding-bottom: 20px;
			text-align: center;
		}

		div.single_post p {
			padding: 0 20px;
			font-size: 12px;
			line-height: 20px;
		}

		span.more {
			float: right;
			margin: 30px 20px 30px 0px;
		}

		span.more a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: inset 0px 0px 2px #3f5867;
		}

		span.more a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

The result of our efforts.

Step 4 – Archive and aside sections
Now I add an archive with an ordered list of posts and other information organized in <aside> blocks. Take a look at the code to understand how I’ve built the two-columns structure.

<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts">
		<!--...-->
		</section>

		<div class="left_cont"><!--left container fo archive and blogroll-->
		<section id="archive">
		<header class="section_tit">
			<h3>Archive</h3>
		</header>

		<ol><!--list of posts-->
			<li><article>
				<figure class="float">
				<img src="images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

			<li><article>
				<figure class="float">
				<img src="images/test5.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
				</header>
				<p>For a long time purple has been the least used colour in web design.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

			<li><article>
				<figure class="float">
				<img src="images/test4.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
				</header>
				<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

		</ol>
		<span class="more_arch"><a href="#">More posts</a></span>
		</section>

		<aside class="friends"><!--blogroll-->
		<nav>
		<div class="section_tit">
			<h3>Friends</h3>
		</div>

			<ul>
				<li><a href="#">PV.M Garage</a></li>
				<li><a href="#">Web Is Love</a></li>
				<li><a href="#">Web Expedition</a></li>
			</ul>
			<ul>
				<li><a href="#">Web Blend</a></li>
				<li><a href="#">Just Test</a></li>
				<li><a href="#">Another Test</a></li>
			</ul>
			<ul>
				<li><a href="#">Random Link</a></li>
				<li><a href="#">Black Rock</a></li>
				<li><a href="#">The Hydra</a></li>
			</ul>
			<ul>
				<li><a href="#">The Orchid</a></li>
				<li><a href="#">The Pearl</a></li>
				<li><a href="#">The Flame</a></li>
			</ul>
		</nav>
		</aside>
		</div>

		<aside><!--sidebar-->
		<section class="about">
		<header class="section_tit">
			<h3>About me</h3>
		</header>
			<div class="about_left">
				<figure>
					<img src="images/test6.jpg" width="120" alt="test" />
				</figure>
				<ul>
					<li><a href="#">follow me on twitter</a></li>
					<li><a href="#">be my friend</a></li>
					<li><a href="#">my bookmarks</a></li>
				</ul>
			</div>

			<div class="about_right">
			<p>Hi, this is M. Hurley, a web designer and developer strangely based in Italy. On this blog I want to share with you my experiences and my works. I won't teach, I just want to provide useful information to learn how to deal with the wonderful world of web design.</p>
			<p>Thanks for reading,</p>
			<p><em>Mr Hurley</em></p>
			</div>
		</section>		

		<nav>
		<div class="section_tit">
			<h3>Portfolio</h3>
		</div>
		<div class="portfolio">
			<ul>
				<li><a href="#"><img src="images/test1.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test2.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test3.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test4.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test5.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test1.jpg" width="110" alt="test" /></a></li>
			</ul>
		</div>
		</nav>

		<section class="contact">
		<header class="section_tit">
			<h3>Contact</h3>
		</header>

			<p>If you are interested in advertising on this blog, you can purchase a banner directly from <a href="http://buysellads.com/buy/detail/7791">BuySellAds.com</a>, a great service to buy and sell ads.
Feel free to follow us on Twitter and to subscribe to our RSS feed. You can also contact directly Mr Hurley, the mind behind, through an email to <a href="mailto:pier.made@gmail.com">pier.made@gmail.com</a></p>
		</section>
		</aside>

	</div>

I have to style all these elements, so let’s go with CSS rules.

/* Archive - Sidebar */

	.left_cont {
		float: left;
		width: 447px;
		margin: 0 16px 16px 16px;
	}

	aside {
		float: right;
		width: 447px;
		margin: 0 16px 16px 16px;
	}

		section#archive ol li {
			width: 385px;
			min-height: 130px;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(255,255,255,1);
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin: 30px 15px 20px 15px;
			padding: 15px;
		}

		section#archive ol li:hover {
			background: rgba(255,255,255,1);
		}

		section#archive h2 {
			font-size: 16px;
			line-height: 22px;
			margin: 0 0 10px 0;
		}

		section#archive figure {
			margin-right: 15px;
		}

		section#archive footer p {
			font-size: 10px;
			margin-top: 15px;
			text-align: right;
		}

		section#archive footer p a {
			color: #6f92a7;
			font-weight: bold;
		}

		section#archive footer p a:hover{
			color: #961b25;
		}

		aside.friends ul {
			float: left;
			padding-left: 15px;
			width: 95px;
		}

		aside.friends ul li {
			margin-bottom: 10px;
			border-bottom: 1px solid #dbdbd4;
		}

		span.more_arch {
			font-size: 30px;
			margin: 15px 15px 10px 0;
		}	

		section.about, section#archive, aside.friends {
			display: block;
			overflow: auto;
			margin-bottom: 30px;
		}

		div.portfolio {
			margin-bottom: 45px;
			display: block;
		}

		.about_right {
			float: right;
			width: 265px;
			margin-right: 15px;
		}

		.about_left {
			float: left;
			margin-left: 15px;
			padding-top: 5px;
		}	

		section.about p, section.contact p  {
			font-size: 14px;
			line-height: 22px;
			margin-bottom: 18px;
		}

		section.contact p  {
			margin: 0 15px;
		}

		.about_left ul li a {
			width:130px;
			display: block;
			text-align: center;
			padding: 6px 0;
			margin: 13px 0;
		}

		div.portfolio ul {
			margin: 0 15px -8px 15px;
		}

			div.portfolio ul li  {
				display: inline-block;
				margin: 8px 8px 0 8px;
			}

To optimize, I add style for section#archive p, span.more_arch a and .about_left ul li modifying previous rules as shown below.

		div.single_post p, section#archive p {
			padding: 0 20px;
			font-size: 12px;
			line-height: 20px;
		}

		span.more, span.more_arch {
			float: right;
			margin: 30px 20px 30px 0px;
		}

		span.more a, span.more_arch a, .about_left ul li a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: inset 0px 0px 2px #3f5867;
			box-shadow: inset 0px 0px 2px #3f5867;
		}

		span.more a:hover, span.more_arch a:hover, .about_left ul li a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

Below you can see how our code appears on a web browser.

Step 7 – Finally, just a simple footer
I add a simple footer with credits and some information.

	<div id="main_content">

		<!--...-->

		<footer class="bottom">
			<p>Contents and resources released under Creative Commons License.</p>
			<p>Design and code by Piervincenzo Madeo - 2010 Mr Hurley Theme - A free HTM5 and CSS3 template.</p>
		</footer>
	</div>

The relative CSS rules for the footer.

/* Footer */

	footer.bottom  {
		clear: both;
		display:block;
		margin: 30px 15px;
		border-top: 1px solid #c9c9c0;
		padding-top: 20px;
	}

		footer.bottom p {
			text-align: center;
			color: #b6b6ab;
		}

See the following image to understand how our footer appears.

Step 8 – We have a problem: browser compatibility
HTML 5 and CSS3 are two new technologies, so the works actually are in progress. A great issue to use today the new available features is the disparate browser support. Browsers like Firefox 3.6+ and Opera 10.5+ are very promising, but there are many softwares, such as Internet Explorer and Chrome, that present bugs and an incomplete support.
“Web Designers’ Browser Support Checklist” offers a panoramical view about browser support for HTML 5 and CSS3.
I can assert, at any rate, that there are useful solutions to help us to ‘modernize’ our web projects.

First of all we need something that help us to take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. The solution? Modernizr, a small and simple JavaScript library that allow us to use new properties and elements of HTML 5 and CSS3 in clever way.
Download the library here, add the file modernizr-1.1.min.js into your template folder and activate the script adding the following line within <head> tag in index.html:

<script src="modernizr-1.1.min.js"></script>

Modernizr runs through a little loop in JavaScript to enable the various elements from HTML 5 for styling in Internet Explorer, below we can see how this allow us a complete control of HTML 5 also in IE.

It’s still evident that there are some problems. Where the background-color for div.art and div.art is? Well, IE doesn’t support RGBa. We have two possible ways.
First: we may use the Modernizr method; it allow us to filter the style rules for browsers that doesn’t support RGBa using the classes .rgba and .norgba for activating the filter (read Modernizr Docs to learn more).
Second (my method): I choose, however, of solving this problem adding a simple RGB property where necessary; below you can see how I modify some CSS classes to add the ‘correct’ (big word) background-color for IE too.

		img {
			border: 5px solid rgb(255,255,255); /*rgba ie fix*/
			border: 5px solid rgba(255,255,255,0.75);
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-box-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
		}

		/*...*/

		div.art {
			width: 250px;
			display: block;
			background: rgb(255,255,255); /*rgba ie fix*/
			background: rgba(255,255,255,0.75);
			border: 1px solid rgb(255,255,255); /*rgba ie fix*/
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin-left: 15px;
			overflow: auto;
			float:left;
		}

		div.art:hover {
			background: rgb(255,255,255); /*rgba ie fix*/
		}

		/*...*/

	section#archive ol li {
		width: 385px;
		min-height: 130px;
		background: rgb(255,255,255); /*rgba ie fix*/
		background: rgba(255,255,255,0.75);
		border: 1px solid rgb(255,255,255); /*rgba ie fix*/
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0px 0px 5px #c6c6bf;
		-khtml-box-shadow: 0px 0px 5px #c6c6bf;
		-webkit-box-shadow: 0px 0px 5px #c6c6bf;
		box-shadow: 0px 0px 5px #c6c6bf;
		margin: 30px 15px 20px 15px;
		padding: 15px;
	}

	section#archive ol li:hover {
		background: rgb(255,255,255); /*rgba ie fix*/
	}

Now we can see how IE renders our code.

Testing the template with Google Chrome I said ‘dammit!’ Why? See how Chrome destroys our efforts in creating a nice ‘read more’ button.

This bug borns when we use at the same time border-radius and inset for box-shadow. To fix I use the following trick:

	nav.head_nav ul li a:hover {
		text-shadow: 1px 1px 1px #2c0306;
		background: #4f1d1e;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: inset 0px 0px 2px #2c0306;
		-khtml-box-shadow: inset 0px 0px 2px #2c0306;
		-webkit-box-shadow: -1px -1px 2px #2c0306; /*-webkit- inset fix*/
		box-shadow: inset 0px 0px 2px #2c0306;
		color: #f6f6ee;
	}

	/* ... */

	span.more a, span.more_arch a, .about_left ul li a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: -1px -1px 2px #3f5867; /*-webkit- inset fix*/
			box-shadow: inset 0px 0px 2px #3f5867;
		}

	span.more a:hover, span.more_arch a:hover, .about_left ul li a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

Just a trick, but in this case it works fine.

Step 9 – Rendering on different browsers and validation
Finally we have just to take a look to the different renderings on some browsers and we have to validate the code.

Conclusion

Mission complete! We have a nice and elegant website.
This post is just a practical step-by-step overview on how to use new features of HTML 5 and CSS3, but to learn more about these topics I suggest to read the following articles (and more):

Useful readings and resources to learn more about HTML 5

• Yes, You Can Use HTML 5 Today!
• HTML 5 – Wikipedia
• HTML 5 Cheat Sheet (PDF)
• HTML 5 Doctor
• HTML 5 – Draft Standard
• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
• Coding A HTML 5 Layout From Scratch
• A Preview of HTML 5
• Get Ready for HTML 5

Useful readings and resources to learn more about CSS3

• Push Your Web Design Into The Future With CSS3
• CSS3.info
• CSS3 Current Work
• CSS 3 Cheat Sheet (PDF)
• Cleaner Code with CSS3 Selectors
• Working With RGBA Colour
• The Basics of CSS3