I hope this template can be useful for your web projects.

We have many examples of the icon sets use and in this collection we can see to work the telling power of great icons, and then a list of 10 absolutely free icon sets.

Web Design with a good use of icons

Idea Foundry

Panic, Coda Web Development

Take the Walk

Coffeenatic

Free Icons Set

Below we present 10 beautiful free icon sets you can use for your web designs to make an expressive and useful web applications.

WebDesigner Depot, Siena

Preview | Download

Xyberneticos, Icon Feed Jeans

Preview | Download

Handycons, hand drawn social media icon set

Preview | Download

Smashing Magazine, On Stage Icon Set

Preview | Download

Tutorial9, Nurture Free Social Icon Pack

Preview | Download

Ka-Booka su DeviantArt, Blue Print Icons

Preview | Download

Raindropmemory su DeviantArt, Natsu Icon Set

Preview | Download

SpoonGraphics, Free Hand Drawn Doodle Icon Set for Bloggers

Preview | Download

64 Vector Arrow Icons Set for Developers

Preview | Download

Smashing Magazine, Simplicio Free Icon Set

Preview | Download

Check our list and let us know which on is your favorite with a comment… you can also suggest a logo not in list.

Enjoy it!

Club Teams

AaB Aalborg (Denmark)

Ajax (Nederlands)

Arsenal (England)

Bohemians Dublin (Ireland)

Celtic (Scotland)

Chelsea FC (England)

Cork City (Ireland)

Cosenza Calcio (Italy)

CSKA Moscow (Russia)

Derby County (England)

Dinamo Kiev (Ukraine)

FC Bayern München (Germany)

FC Dallas (USA)

Hannover (Germany)

Hull City (England)

Juventus FC (Italy)

L.A. Galaxy (USA)

Manchester United (England)

New England (USA)

Olympiakos Piraeus (Greece)

Olympique Lyon (France)

Olympique Marseille (France)

Palmeiras (Brazil)

Porto (Portugal)

Paris Saint-Germain (France)

Real Madrid (Spagna)

Rosenberg (Norvegia)

Sampdoria (Italy)

Sporting CP Lisbon (Portugal)

Toronto (Canada)

Udinese Calcio (Italy)

US Città di Palermo (Italy)

Valencia C. de F. (Spain)

Villareal (Spain)

West Ham (England)

Zenit (Russia)

National Teams

Argentina

Australia

Bosnia and Herzegovina

Brazil

South Korea

Croatia

Denmark

Finland

France

Germany

Greece

England

Ireland

Israel

Italy

Norway

Nederlands

Portugal

Czech Republic

Russia

Senegal

Slovenia

Spain

Sweden

USA

International Federatins and Competitions

FIFA

UEFA

CONCACAF

World Cup – Germany 2006

World Cup – South Africa 2010

Euro 2008

Asian Cup 2007

UEFA Champions League

UEFA Cup

Premier League

Major League Soccer

It evolved in the late 1960s and early 1970s and in the mid-1970s had a great success in Britain and America.
Many bands shown their technical skill and ability to compose music making albums with a great expressive power and an absolutely particular structure for the songs.
This steady and almost maniacal research of an elegant artistic expression lets us stunning songs and great music, but also unique (and maybe “strange”) album covers. Below you’ll see 15 examples.

Area – Arbeit Macht Frei (Cramps – 1973 – Italian Prog Rock)

Selected Track: Arbeit Macht Frei (click to listen on YouTube)

Biglietto per l’Inferno (Trident Records – 1974 – Italian Prog Rock)

Selected Track: Confessione (click to listen on YouTube)

Genesis – Nursery Crime (Charisma, Atlantic Records – 1971)

Selected Track: The Musical Box (Belgian TV – Six Hours Live) (click to listen on YouTube)

I Giganti – Terra in Bocca (RiFi, Akarma – 1971 – Italian Prog Rock)

Selected Track: Largo iniziale (Intro) (click to listen on YouTube)

Jethro Tull – Aqualung (Chrysalis Records – 1971)

Selected Track: My God (Live) (click to listen on YouTube)

Jethro Tull – Thick as a Brick (Chrysalis Records – 1972)

Selected Track: Thick as a Brick (Live at Madison Square Garden Version, 1978) (click to listen on YouTube)

King Crimson – In The Court Of The Crimson King (Island Records – 1969)

Selected Track: Epitaph including March for no Reason and Tomorrow and Tomorrow (click to listen on YouTube)

Le Orme – Uomo di pezza (Philips – 1972 – Italian Prog Rock)

Selected Track: Figure di Cartone (click to listen on YouTube)

Pholas Dactylus – Concerto delle Menti (Magma – 1974 – Italian Prog Rock)

Selected Track: Concerto delle Menti Parte Prima (I) (click to listen on YouTube)

The Moody Blues – In Search of the Lost Chord (Deram Records – 1968)

Selected Track: Ride my See-Saw (click to listen on YouTube)

Yes – Fragile (Atlantic Records – 1971)

Selected Track: South Side Of The Sky (Live) (click to listen on YouTube)

Yes – Tormato (Atlantic Records – 1978)

Selected Track: Don’t Kill the Whale (Live at Wembley 1978) (click to listen on YouTube)

Pink Floyd – The Dark Side of the Moon (Harvest Records – 1973)

Selected Track: Money (click to listen on YouTube)

Marillion – Script for a Jester’s Tear (EMI Records, Capitol Records – 1983)

Selected Track: Ride my See-Saw (click to listen on YouTube)

Matching Mole – Matching Mole’s Little Red Record (CBS – 1972)

Selected Tracks: Flora Fidgit and Smoke Signal (click to listen on YouTube)

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

Each blog is part of a big and working ecosystem, the Blogosphere; understanding the connections among the elements of this system, it’s possible to build a good presence on-line in order to improve our activities or our business.

It’s ridicolous, now, to define a blog like a simple and personal diary (sure, it might be also a diary on-line), because a serious, well-done and updated blog is a valid source of information in any field.
If you have to share fresh and good contents with a community, the blog surely is an opportune way to do that; and if you want to get benefits from blogging, trust me, you should have an unique and distinctive blog design.
Below we will take a look at some crucial points on which we should make some considerations designing a blog, starting from an overview on the typical elements of a weblog.

Elements And Components Of The Classic Blog

In many cases it’s a good thing create a simple scheme that synthesizes the most important parts of our project and, designing a blog, we may start from the typical layout for this type of website. The weblogs, historically, tend to follow a simple two-columns scheme: header, main content, sidebar and footer.

Many blogs use also a three-columns layout with a double sidebar, this solution is used when there is a lot of information to show.

The blocks, that we’ve just seen, are the container for articles, links and other stuff that the blogger wants to share with his readers. A working blog should display to the users all elements, useful to learn more about the topics and the minds behind the website, in the best-possible place. I think that only the experience of the designer/blogger and the study of the decisions taken by famous blogs in the years can provide valid information on how to design and “fill” the blocks. However I’ll try to bring out a list of most used items for each block.

Header

The header is the top of the page where, generally, the designers love placing a nice logo and the primary navigation menu. Sometimes in this part there is the space to display, in creative way, links and clickable icons to subscribe the RSS of the blogs or to follow the updates on Twitter (or other social networking websites). Besides highly-skilled designers love creating nice, artistic headers to engage the visitors. Designing your header you may consider to add some of the following elements:

Logo: a well-designed and clever logo is essential for a website, generally it is placed on the top-left corner of the page;

Primary Navigation Menu: primary links, like “About us,” “Contact” and so on, should be clearly distinguishable from secondary page links and placing, a well-designed navigation menu in the header could be a good idea to emphasize primary links.

Subscription options: links, icons and information to subscribe RSS or to follow the updates of the editors of the blogs on the social networking website;

Search form: the search function is very important for a blog and often designers use the header to provide a ready-to-use form for looking for something into the blog;

Advertisement: do your blog has a decent traffic (visitors)? You can add an ads to monetize, but make sure that the banner doesn’t destroy your design. Bloggers generally prefer horizontal banners for the header: 468×68 px, 720×90 px and so on.

Main Content

The core of a blog, where there is the stream of the post. For the WordPress lovers this space is for the loop, in general it is the real dynamic part of the blog that changes its status depending on location (home page, single post page, etc.).
Posts and articles are the most important things for a blog, how many times have we said “content is the king?” True, but a naked king is dreadful. So, you have to design a working block container for your content in order to emphasize you article. A balanced structure and a good typography for headlines, paragraphs and meta information (comments, tags, date, author and so on) are essential to present posts – in a nice way – to the readers.
We have to divide two macro-section designing the main container for a blog: home page and single page.

Into their home page many weblogs include the stream with the last posts, and for each post details for the comments and other meta information like authors, tags and categories.
The single page presents the entire post and on the bottom of the post-page usually we can find links and buttons for sharing the article on social media and the comments of the users.

Sidebar

In two-columns layout it is usually placed on the right, but sometimes we can find also a left-sidebar. The sidebars tend to be used for statistics and to improve navigation on the blog and in fact a well-designed sidebar should include items, such as navigation, popular posts, most commented posts, external widgets from social media, blogroll, to improve interaction of the users with the website.
Take a look below to understand what kind of items you can add into your sidebar.

Advertisement: in this case to monetize the content of your blog you can add a block of banners (125×125 px, 250xX px etc.), for a better CTR the top of the sidebar is the best place for ads spots;

Search form: the sidebar could be a good place for the search form. Obvious, if you have placed the search from on the header it’s not a good idea re-place it on the sidebar;

Subscription options: you can create a nice widget for your sidebar with a list of all subscription options for your blog (RSS, Twitter and other social media);

Recent posts: a list of 10-15 last posts to presents what’s new on the blog;

Most popular posts: a list of 10-15 last posts to presents the popular entries on the blog;

Recent comments: a list of 10-15 recent comments to encourage the discussions;

Authors: for a multi-author blog you can use the sidebar to present all authors to the users;

Blogroll, resources, friends and partners: a list of links to suggest interesting resources or to present friends and partners to your readers;

Footer

The bottom of the page, the ending for your web design job, the final section. This is footer. The part of the site that, in a traditional interpretation, is only for the copyright and some links. But, as I explained in the article “Trends and Examples in Recent Web Design: Big, Informative and Creative Footers,” in modern web design, fortunately, designers and developers are saying “No!” to boring and standard footers. So, we can often find elements such as recent comments or popular posts into the footer.

Well, Now How Can I Design A Better Blog?

Hard question. But my experience suggests me to work scraping the traditional layout and the classic interpretation of the blog. We should start from a fact: “content is the king.” For this reason we have to design emphasizing the content mixing in an unique and creative way the different design elements. At this point I want to ask you: which attribute, peculiarity, of the art of blogging is ever the same since the beginning?
I’ve asked myself this question for a long time and, in my opinion, the key (to answer) is in the first definition of “Weblog”: it’s a personal, private website where sharing exclusive content for a close audience.

As said, nowadays we have several types of blog, and each of them has different characteristics, but all these modern blogs are created to provide high-quality (we hope) content for folks who are interested. So the essence of a blog is the same, today as yesterday, and the main goal is to share exclusive posts with a specific type of users, with a community who follow definite topics. It is not important if the reader is your brother and you’re writing personal things about your life or if you’re writing an interesting article about web design for your community, the main idea of blogging is not changed. For this reason the standardization of the web design for a blog could be a dangerous friend.

My suggestion is: break down the rules of the standard blog design!
Be creative, be unique, be damn special!
That doesn’t mean “build crazy layout for a blog.” I just want to say that there are many ways to be creative. You don’t need to break down all traditional rules working on a project, but only that you have to let work your fantasy to add something of special, personal and creative in your design.

The general structure (header, main content, sidebar, footer) is always a valid start, and you should keep it in your mind; but a personal touch for some elements, which deviates from the traditional interpretation, can make precious you work.

Tips For Designing An Unique Blog

How many words… but now some practical tips and examples to understand how we may be creative designing a blog.

Creative Design

The users appreciate, at a first glance, the quality of the design in web pages that they scan. The first impact with a website is very important to engage visitors and an high-quality illustration or a detailed big logo or, simply, a stunning background can make “credible” and harmonious the blog without the need of reading the content. It’s clear that’s a good thing if on the blog there are also quality and useful articles.

Web Designer Depot is one of the most important design-related blog on the web. It has a very simple layout, but its illustrations for header and footer make the blog unique and rare.

All For Design has an attractive textured design with a creative background for the header and a nice logo, which is “strangely” placed on the right side.

Lord Likely is a blog with a stunning retro look that makes the difference in the couldron of the blogosphere.

N.Design Studio, we don’t need to discuss about this web design, we only have to see this fantastic artwork of Nick La.

Small Touches To Be Unique

In her article “Small touches for great designs” on WebIsLove.com, Michela Chiucini shows us the power of high-quality, small details to create harmony in a web interface.

Below you can see some examples of detailed particular which make very precious and unique a web design.

Run Addicts use a three-columns standard layout but the designer has added some little touches that exalt, and make explicit, the purpose of the website. First of all the logo is in foreground, and the good use of transparency create a “fresh” effect (thanks to the water-splash), then we have to say that the headline of each post is genial with the background image and the custom title.

24 Ways is “the advent calendar for web geeks” and its web design is a perfect example of simplicity and effectiveness. But the real peculiarity of this blog design is the great use of transparency that becomes evident in the header, where logo, menu and search form create a great effect.

Koodoz has a nice and well-designed menu that make more dynamic the website.

Fresh01 has two gracious bubbles that change their status, providing information to user, during the scrolling of the page.

Great Use Of Typography

Typography-based blog designs are pretty rare, maybe beacuse they require a really hard work to create a balanced layout and to mix effectively headlines, text and white space. But the final reult could be really unique, below some examples.

Elysium Burns is a dark blog-portfolio design, it is elegant and highly-communicative thanks to the great use of the typography.

A List Apart don’t need presentation, we all know this great magazine and we all know that its layout is clean and beautiful thanks to the clever use of typography.

Multi-Column And Grid-Based Layout

Many blogs use a standard two-columns layout, but recently it’s frequent to find blogs with grid and multi-column layouts. They are a clear manifestation of order and precision and allow a more consistent organization of the content.

An Idea has a big well-organized multi-column layout to display the posts.

The Swish Life is a well-structured blog with a clever layout.

Creative Depart is the perfect example of grid layout for a blog.

Unconventional Layout

There’s no header, there’s no main content, there’s no sidebar, there’s no footer. There are only two goals: emphasize the content through a nice layout and create and unique and special web design. There is a blank sheet that you should fill with your innovative ideas.
Sometimes this type of approach can bring to great results.

Cold Heat has an unique, left-aligned, layout.

Weblog Cynosura has a minimal and typographic design with a clever and unconventional organization of the different elements.

Jason Santa Maria in his home page show only the last post, he use a custom design for each article on the blog. An innovative approach that makes real unique his personal website, a real pioneer.

Do You Really Need A Header?

We do not always need an header. Sometimes the header section adds only a delay between reader and content.

The Darling Tree is a blog-portfolio where the core of the layout is the “featured projects” container, it doesn’t have a real header section and the logo is placed on the top of the left sidebar.

The CSS Awards Inspired is the official thecssawards.com blog, where, to make available at a first glance the content, the designer bypasses the header section.

Do You Really Need A Sidebar?

We do not always need a sidebar. It is a section useful when we want to enhance interactions with the user, and to improve the navigation. Sometimes, in order to simplify the reading of the content and the navigation, we may avoid using the sidebar.

Elliot Jay Stocks in his blog use only a main container for the stream of the posts. A way to emphasize the content.

Big, Creative And Informative Footer

It’s becoming a massive trend, but it is a trend that works. I have explained why I love creative and highly-informative in the following article: “Trends and Examples in Recent Web Design: Big, Informative and Creative Footers”

Boag World has a big, well-designed, creative and complete footer with useful information for the readers and an awesome illustration.

Design Attractive Custom Blog Posts

As Chris Spooner says in his article on Line25, “Designers have began to inject increasing levels of creativity into their blog posts and articles, throwing out the traditional and generic style of blog posts in favour of a much more attractive layout that’s themed specifically to the content.” The art of design a custom blog post. A very recent trend, made famous by Paddy Donnelly with the article “The Death of the Boring Blog Post” on Smashing Magazine, that open a new prospective for modern bloggers, a custom design for the most important posts. Below some examples.

What The World Needs

What’s Brand

Life Below 600 px

Showcase Of Creative Blog Designs

Below a massive collection of beautiful and unique blog designs. They might be a good source of inspiration for your next works. Enjoy it!

All For Design

Fringe Focus

RunAddicts

TCA Inspired Design

Simon Collison

The Wayward Irregular

UX Booth

Workawesome

tehCpeng

Lokalisten Sprechblase

The Art of Non-Conformity

Line25 Web Design Blog

The Astonishing Adventures of Lord Likely

ANidea

Tutorial9

Boagworld

Blog.SpoonGraphics

24 ways

I primi dieci

Design Log of Ayaka ito

The Darling Tree

Douglas Menezes

Owltastic

Kupferwerk Blog

Gary Nock

Web Design Ledger

Aext.net

Elliot Jay Stocks

The Klog

Questionable Characters

Web is Love

MyInkBlog

Colorcubic

FreelanceSwitch

FRESH01

N.Design Studio

Art in My Coffee

Tyler Thompson

SimpleBits

The Swish Life Magazine

Garamiz blog

204 Beech Avenue

Ecoki

The Official Squarespace Blog

Daily Payne

Wedding Photography Resource Blog

Iubeste Clujul

Urbex photography

Crayons Life

Surfstation

CreativeDepart

Cynosura

Reform and Revolution

Jason Santa Maria

Nocturn

Elysium Burns

Christian Mucke

Branded07

45royale Inc.

Don’t forget, you are free to suggest additional resources in the comments to this post.

High-Quality Handwritten Fonts For Your Designs

Jellyka – Estrya’s Handwriting

Breakfast at Michy’s

Journal Font

Hand of Sean Font

Luna Bar Font

Pappo’s Blues Band Font

PopStar Autograph Font

Christopher Hand Font

Dear Joe 5 Casual Font

Daniel Font

Joyful Juliana Font

Arsenale White Font

Nathan’s Notations Font

Note this! Font

Dali Font

Honey I Stole Your Jumper Font

Inkburrow Font

Jacek Zieba Jasinski Font

Child’s Play Font

Salamander Font

Aberration font

Gorillaz 1 Font

Brian Cary font

Emperors Scrawl font

SickCapitalVice Font

Jenny Font

Kids First Print Font

SF Burlington Script Fon

Kingthings Font

A Theme for murder Font

Tesla Font

Fely Font

!PaulMaul Font

Barbara Font

Good Foot Font

HarabaraHand Font

Jinky Font

Krazy Nights

Rabiohead

Next Font

Vielkalahizo Font

The theme has a two-columns layout with an unique soft grunge design and a nice featured news section, it includes many mordern qualities to create a nice sports blog/magazine. Sports News PVM is free to use in private and commercial projects because we love our readers.

Download Sports News PVM Theme for free

The theme is released under GNU General Public License. You can use it for all your web projects for free, without any restrictions and you may modify the theme as you wish. So if you like this resource for WordPress lovers, spread the word with a link to this article. Below you can download the theme + PSD source (.zip, 1.6 Mb – the font for the logo is available on Dafont: Hollywood Hills). You can also see the live preview of the our first free WordPress theme.

More Screenshots

Below you’ll find more screenshots of the theme. We hope you like the final result of our work.

Header Particular

Featured News Box

Post Container

More Information

The theme is packed full of nice features to encourage the readers to explore new posts an sections. Read below to know additional information on this freebie.

Features

• 1. Modern and beautiful web design
• 2. Tableless design and 100% CSS-based layout
• 3. Two columns of fixed width
• 4. Support post thumbnail images for 2.9
• 5. Widget Ready
• 6. XHTML 1.1 Transitional valid
• 7. The package also include the PSD-source files (logo included)
• 8. Commented CSS and theme PHP files for customization
• 9. Multi-browser compatibility. Tested under modern w3c compliant browsers Firefox 3, Safari 4, IE8, IE7 and Google Chrome 3

Installation

• STEP 1. Extract the files it contains. You need to preserve the directory structure in the archive when extracting these files
• STEP 2. Upload the theme to your /wp-content/themes/ directory
• STEP 3. Now go to Appearance >> Themes and activate the “Sports News PVM” theme
• STEP 4. Go to Appearance >> Sports News PVM Options and customize the theme

Sports News PVM Theme Options

• 1. Enable/Disable Featured news box in home page and choose the tag for featured posts
• 2. Show/Hide Ads section in the sidebar and customize all necessary URLs (images and links) and the title
• 3. Add your Feedburner link and your profiles on Social networks (Facebook, Twitter, Delicious, etc…)

Post Thumbnails

• Normal post thumbnail – As said the theme supports the new post thumbnail image system of Wordpress 2.9 and to use this feature, you must be within the post editing screen of your WordPress admin. Here, you can see a new meta box labeled “Post Thumbnail”. There is a link to “Set thumbnail,” which allow you to use the media uploader to load a new image. Once uploaded the image you can click on “Use as thumbnail” to add your thumbnail.
• Featured post thumbnails – For featured posts you can upload the images (big and small) to your site using the image upload feature on the post edit screen (in your WordPress admin panel).
  Once uploaded your images, scroll to the bottom of the post edit page and look for the “Custom Field” panel. Click on “Enter new” and type the word “feat_img” (big image) into the “Name” input field in your dialog box. Paste the URL to your image in the “Value” textarea input field of your custom fields dialog box and click the “Add custom field” button. Then repeat the operation: type the word “feat_img_sm” (small image) into the “Name” input field in your dialog box and paste the URL to your image in the “Value” textarea input field.

Size For Thumbnails

• Normal post thumnail image: size 200×200 px
• Featured post big image: size 340×189 px
• Featured post small image: size 75×40 px

Agreements

• 1. You can use them on as many domain names as you wish
• 2. You may use them for your clients’ projects / websites. Number of projects is not limited
• 3. You may not claim intellectual and exclusive ownership to any of the themes
• 4. You may not sub-license the original themes and their individual files to and with anyone else, unless a specific license within the theme states otherwise
• 5. You may modify them. However, you may not modify and then resell, unless the modified versions are drastically different from the originals
• 6. We reserve the right to refuse, cancel, or suspend service at our sole discretion and the right to change or modify these terms with no prior notice

Credits
All the icons which are used in “Sports News PVM” is free for use and Designed by following references: Socialize Icon Set, version 1.0 – Functions

CSS Gallery – Inspire Yourself!

PV.M Garage Gallery is not just another CSS design gallery. We want to collect stunning designs showing the merits of each website through a complete review. Our mission is to provide a deep inspiration to our readers and promote creative works of brilliant web designers.

You can also suggest a site to be featured in our Gallery filling out the Submit-To-Gallery form, we appreciate not only suggestions for your own sites, but any site that you feel is worthy of being listed in our gallery. We accept only websites written in (X)HTML/CSS with a sexy and high-quality design. Each site is carefully examined by our staff.

We hope you’ll find interesting our work, aimed to bring inspiration to web designers across the web, providing quality content.

What Is a Drop-Down Menu

Drop-down menu is a design element that allows the user to choose a value from a list of possible options.
It seems, at a first glance, a simple navigation menu, but when your mouse arrow points an item of the menu a magical two-dimensional panel appears through a drop-down effect. The panel provides more navigation options for the users and, often, these options are organized in groups to emphasize connections among items.

Its aim is to provide a tool for digging into the sections of the website in a clever and tidy way. In order to simplify navigation, the drop-down menu has to show the list of items, contained in the panel, at once without the need of scrolling.

Drop-Down Menus in Recent Web Design

This kind of navigation menu has the great asset of displaying at once more navigation options. So it could be a great solution when the designer has to organize several categories, products, sections or to reduce the number of steps to do an action (e.g. sign-in or login forms).
It has the big task of helping users to navigate the website in a correct way, it should provide a complete view of the contents and sections of the web application… and it would seem perfect for many web applications and, in fact, it is widespread. Below we can see some examples in wich a drop-down menu might be useful.

Organize Topics for a Web Magazine or a Website for Breaking News

Websites with a large amount of information and articles, like mirror.co.uk and sportsillustrated.cnn.com, require an easy-to-use navigation menu. A well-done mega drop-down menu might be a working solution in this case.

Arrange and Organize Categories and Tags in a Articulate Blog

A brilliant blog with good posts and a fresh design needs an effective navigation menu and, when there are several topics, a fresh drop-down effect for displaying subcategories is the best solution to create an impressive menu.

Show Several Products in an E-Commerce Website

In e-commerce website design is essential a clear presentation of products and services, and a limpid organization for the categories of articles. The drop-down menu is always a working feature for the on-line stores.

Display Login and Sign-Up Forms

The registration on a website is an operation that often annoys the user. A drop-down can be a good solution to build a quick sign-up form for saving space on your layout and for creating an user-friendly, one-step, module for the registration.

When there is the need of saving space on our home-page, a drop-down box is useful also for a login form. The famous microblogging service, Twitter, adopts a drop-down effect for the sign-in button in the home page.

Multi-Level Menu

Many usability experts recommend to avoid the use of drop-down multi-level menus because they aren’t user-friendly. In my honest opinion, the key isn’t to understand if a multi-level drop-down menu is usable or not, but if it’s possible to make it usable.
Porsche.com use a well-done multi-level menu and, friends, can you say that it isn’t usable? No!

Issue Behind Drop-Down Menu

It would seem that the drop-down menus are the resolution for many navigation problems. Caution: if something shines, it doesn’t mean that is gold.

Low Visibility for the Links

A drop-down menus is very useful to save space on your layout, they take up just the area of the title (or main category) in the layout, but is this a real advantage?

It’s evident that the “secondary” links (in the panel) don’t have a great visibility, they practically are hidden and only an interaction with the mouse pointer can activate the panel. A common mistake is that of not indicating the presence of a drop-down panel, thing that can be done through a little arrow or a similar symbol.
A hasty choice, in planning your navigation menu, may be counterproductive for the usability of your website.

Difficult Organization of the Navigation Options

An hard thing to do when we plan a mega menu is to organize the options within a relatively small space. A working approach is to separate links into groups of navigation; a general rules is of not offer huge groups with numerous options that are hard to scan.
We see, often, huge panel with many options that confuse the users. You should consider other design elements, and not a drop-down navigation menu, when you have to show a lot of information for a single item (e.g. a section for showing events).

If the menu panel have a huge list it can be very high and wide and, so, there is the possibility that low-resolution screens show only a portion of the mega drop-down.

Designer vs Response Time

Building a mega drop-down navigation menu we have to deal with the mouse movement, why?
There is two ways for displaying the panel: first, hover to activate; second, click to activate.

Remember that web interface elements should render within 0.1 seconds to provide users a complete sensation of control.
In the first case the panel appears when the pointer is over the item on the navbar, and to keep it active, the mouse arrow has to be over the menu to scan all options.
Now consider the normal activity of a user on a web page: the mouse pointer is in movement and at any passage over the drop-down menu it will cause the opening of the panel (0.1 seconds), your interface will become absolutely unusable for the simultaneous scrolling of several panels. So we can’t make the response time too fast to avoid the screen flicker. A good choice could be to add a delay of 0.3 – 0.5 seconds, so the pointer has to remain stationary for 0.4 – 0.6 seconds before of displaying the complete panel (a sort of fade-in).
Besides if the user lose the focus on the menu, or the user temporarily takes the pointer outside the active area, the panel disappear. To avoid that accidental movements of the mouse out of the active area can hide the panel (diagonal problem), we should plan the same delay also to hide the box.

In the second case the users have to click twice to open and close the panel, in this case there isn’t the problem for the movement of the pointer.

Designer vs User Behavior

It is well-known that the user don’t read, they scan a web page, so the designer have to emphasize the elements that might attract the user. A well-designed navigation menu is essential to stimulate the user at visiting more sections of the website.
A drop-down menu couldn’t be direct and intuitive for the visitors. They always choose the easy way and not the best way to obtain a gratification (an interesting content) and a big (and hard-to-scan) panel might not represent the easy way for our user.

Enjoy It Responsibly!

Modern web design is influenced by some misused and abused trends. Often the designer’s choices, in building a working web interface, aren’t completely focused on the purposes of the website and on usability; but they are driven by the frenzy of using new trends and techniques and, in most cases, a simple design element works better than a complicated and new solution.

We have just seen as a drop-down menu might be really useful, but it must be perfect to work well. So the designer has to find the right balance for his navigation menu and he has to understand which is the right choice between a standard navbar and a complete mega drop-down menu.

Below we can see some simple solutions that simplify navigation without the use of drop-downs.

Smashing Magazine – A simple navigation menu with main categories and sub-categories for the most famous web design magazine.

Ugmonk – A nice and clear solution for a navigation menu.

A last thing. It has been proved that a well-designed and sexy drop-down menu has a great appeal on the clients, it is sexy and make dynamic the website, but you must describe strengths and weaknesses to your client to allow an aware choice.

Showcase of Interesting Drop-Down Menus

In this presentation, you’ll find a variety of interesting drop-down menu designs.

Guitar Hero

Second Life

Intuitive Designs

BMI

Audi

Fuel Brand Network

Fuel Your Creativity

Giraffe Restaurants

Little Kids Bedrooms

Aviary

mtvU

The White House

MTV

Food Network

EA Video Games

GoMediaZine

Porsche

Media Temple

Mac.AppStorm

Sony USA

Incase

Republic

Owl

Philadelphia

Boxee

BuySellAds.com

Tuts+ Network

Psdtuts+

Mirror.co.uk

The Ad Feed

Designmess

Minimalist Design Magazine

Consorzio Creativo

Useful Tutorials to Learn How to Build Drop-Down Menus

Below some useful resources that may help you in making stunning drop-down navigation menus for your projects.

Mega Drop Down Menu w/ CSS & jQuery

Sexy Drop Down Menu w/ jQuery & CSS

Perfect signin dropdown box likes Twitter with jQuery

Incredible Drop Down Menu Solution With CSS Only

Sliding Jquery Menu