Designing static HTML sites is different from designing dynamic sites for sure but is it really that different and that complicated? And if it is, what can one do to overcome it?

CMS are not a new field for a Web designer anymore and it is a safe bet that they will always have a hefty share on the Web design market. Although there are many similarities in designing a static site and a CMS, there are certainly differences as well. To me, designing a CMS is easier than designing a static site but I do feel that both require a different skill set.

For instance, if you want to come to friendly terms with a CMS, you need to have some knowledge of programming and databases because if you are totally unaware of the language in which the particular CMS is written and the database behind it, you will constantly stumble and fall. Probably this is the biggest difference between designing a static site and a CMS. I know many talented Web designers who have tried designing a CMS and the experience was very frustrating for them.

On the other hand, many CMS and content sites are minimalistic, so they need less design work. Because of this, even if you are not the greatest designer on Earth, with some patience and diligence, you will be able to design great CMS templates. You are not starting from scratch and, just like with static sites, a good CMS template consists of layout and a stylesheet, so even if it is difficult at first, you will soon see that actually designing CMS sites is very easy.

Before You Start

Before you start with the layout and the stylesheet, you need some preparation. Here are two important things you may want to consider:

Image Credits: clarita

• Get familiar with your CMS. If you are new to CMS design, start familiarizing yourself with CMS in general and with your CMS in particular. Getting some basic idea about CMS is not so time-consuming. However, mastering the intricacies of a given CMS is a never-ending task. Be realistic and at first try to understand what your CMS can do and what it can’t do. Leave the more complex issues for later.
• Acquire some programming skills. If you have become a designer just because you hated programming, there is some bad news for you. If you want to handle a CMS successfully, you need to have at least some knowledge of the language (PHP, Python, ASP, JSP, etc.) in which it is written. Alternatively, find a programmer to help you. In many cases a complete CMS solution for a client involves not only the graphic work but also writing or modifying some modules, so you will either need to become a developer yourself, or seek the help of one.
• Study other designers’ templates. The best way to see how things work in practice is to study what other designers have created. There are many great tutorials to read and free templates you can study to get started.

Designing the Layout

Designing the layout is one of the areas, where static sites and CMS differ. Yes, you still have menus, head at the top, variable or fixed width templates, and your own styles, and you can use your HTML layout as the basis, but some of these tasks are done differently with a CMS.

CMS offer many great modules to make design layout flexible but they also have some quite illogical (for a beginner) constraints. Very often the successful approach to dealing with layout problems is by thinking and trying – and reading the postings in the support forums. CMS have their logic and sometimes, when you come from designing static sites, it is difficult at first.

For instance, a couple of years ago when I was new to Joomla, it took me some time to figure out how to have two or three columns of articles on the front page. I tried to do it within the index file to no avail. Then I tried with the stylesheet – no success either. Finally, I read in their support forum how to do it. The solution was very simple – the number of columns in the article area of the front page is set from the Admin panel!

Later, I wanted to have more columns in the module above the content area and I tried to find such a setting but there wasn’t. Still, having multiple columns (or in my case just cells because I was still using tables and it was a single row that had to be split) in a module was easily achievable in the index file. I was already familiar with the index file and splitting a module into three cells was a matter of seconds!

CMS allow to use different layout for different pages, so similarly to a static site, you will need to have layout for the homepage and the internal pages. You may also have a different layout for the different sections of the site (news, resources, forums, etc.). If you want, you can have a different layout for every single page of your site – CMS allow this – but in practice this idea is simply absurd.

In comparison to static sites, CMS have one enormous advantage – you can always change the layout later. You just upload the new template to the Admin panel, select the pages to apply it to – and that’s it. In this aspect, a CMS certainly beats any static technology and now when I occasionally have to go back to static HTML sites, I really hate it that content and presentation are so mixed up.

Designing the Stylesheet

The second component of a CMS template is the stylesheet. As with static sites, the stylesheet defines fonts, colors, margins, alignment, etc. Your knowledge about CSS for static sites applies to CMS as well, so at least this part of the transition to a CMS is easy.

CMS do not limit your freedom. You can have a fixed or a variable width template, with tables or a table-less template (though the same cross-browser issues are valid for CMS as well), you can apply backgrounds (including background images) to whatever you like, etc. At least this part of the transition shouldn’t be painful.

In conclusion, though there are some differences between the two type of sites, this is not a completely new are. In a sense, it is more like the transition from one programming language (i.e. PHP) to another (i.e. Java) – you need time to switch and all the minor differences are very confusing in the beginning. After all, for many Web designers the transition from static to dynamic sites was not a problem at all. It is interesting to know how it was for you. Did you have similar problems or was the transition smooth and barely noticeable?

So, let’s rock!

Demo first, please

You can download or try our online demo. Please, don’t forget to come back here if you want to just go playing first :)

“Well, actually I don’t know what a Doodle is..”

Google Doodles started when Larry and Sergey played with the corporate logo to indicate their attendance at the Burning Man festival in the Nevada desert. Since that day we’ve seen a lot of funny Doodles, and Google’s homepage is used to remind us of all kind of important facts.

But they are more than just paintings, games or experiments. They are made with the best current practices (some of them, created specifically for a Doodle). And Google being as supportive as they are of open source technology, usually release the commented source code, so you can just take a look and try to understand what those amazing guys are doing.

Oh, and I don’t know if you knew about it, but today is Simon’s day according to 1stWebdesigner’s official fake holiday calendar. Seems important, right? This is why we’ll build a game for it.

So, what will we be doing?

Simon is one of my favorite games (just after Sudoku and Gammon). Can you think of an easier game to code? You know, four buttons, easy actions. I just can’t think of a better starting point to learn HTML5 gaming.

Well, first of all you need to know what this Simon thing looks like. I just found a picture of it at Mercado Livre (kind of a Brazilian e-bay) and made my own version in Photoshop.

Since we are doing it via HTML5, the colors shouldn’t be directly on image (otherwise you won’t be able to change colors, make your own console…). So I’ve used Chris Coyier‘s technique for color animation. Basically we make our non-colored elements, and leave everything else transparent. Then our HTML5 will take care of the color itself (via CSS, background-color). Our final game background will be something like this:

Ok, then. Let’s start the fun part.

Basic HTML + CSS

Since our target isn’t basic HTML itself, I just grab a copy of HTML5 Boilerplate with a few edits to make it cleaner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Google.com - Simon's day  (1stWebDesigner.com game :D)</title>

  <link rel="stylesheet" href="css/style.css?v=2">
  <script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
  <div id="container">
    <div id="main">
	<!-- Game controls and deisgn -->
    </div>
	<form id="search" action="#" method="get">
		<input type="text" name="query" id="query" />
		<input type="submit" value="search" id="submit" />
	</form>
	<div id="options">
		<!-- game options -->
	</div>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

Now we need our gaming HTML stuff. As we’ve done it ready for different colors we will need to have two layers:

• Background color- sets the color and will be animated when you activate a button
• Link – activates all actions for each colored button.
• Alerts – since they are part of the game itself, we’ll put them with all other game controls (level up, new game, game over)

Our HTML for this part will be something like this:

	<div id="main">
	<!-- lights -->
		<div id="box-0" class="box">&nbsp;</div>
		<div id="box-1" class="box">&nbsp;</div>
		<div id="box-2" class="box">&nbsp;</div>
		<div id="box-3" class="box">&nbsp;</div>
	<!-- buttons -->
		<a href="#" class="box btnTL" id="box-click-0">&nbsp;</a>
		<a href="#" class="box btnTR" id="box-click-1">&nbsp;</a>
		<a href="#" class="box btnBL" id="box-click-2">&nbsp;</a>
		<a href="#" class="box btnBR" id="box-click-3">&nbsp;</a>
	<!-- alerts -->
		<div id="letsRock" class="alert">
			<p>Ready? let's rock!</p>
		</div>
		<div id="ohYes" class="alert">
			<p>Oh Yeah!</p>
		</div>
		<div id="ohNoes" class="alert">
			<p>Oh Noes... Almost there! </p>
		</div>
	</div>

As you can see, the four “div.box” elements are the background color for each button (red, blue, green, red).

So when someone clicks #box-click-0 it will “activate” the button #box-0. We have a lot of id’s because they result in better JS performance.

Our CSS for that will be:

#main {
	position: relative;
	left: 155px;
	width: 200px;
	height: 200px;
}
	.box {
		display: block;
		float: left;
		width: 100px;
		height: 100px;
	}
	a.box {
		position: absolute;
		text-decoration: none;
		background-image: url("../img/bg_game.png");
		background-repeat: no-repeat;
	}
	a.box:focus {
		outline: none;
	}
	.btnTL { background-position: top left; }
	.btnTR { background-position: top right; }
	.btnBL { background-position: bottom left; }
	.btnBR { background-position: bottom right; }
		 .btnTL, .btnTR {
			top: 0;
		 }
		 .btnBL, .btnBR {
			bottom: 0;
		 }
		 .btnTL, .btnBL {
			left: 0;
		 }
		 .btnTR, .btnBR {
			right: 0;
		 }
	#box-0 {
		background: #c00000;
	}
	#box-1 {
		background: #1506a3;
	}
	#box-2 {
		background: #046606;
	}
	#box-3 {
		background: #ea8f0c;
	}

Here is our effect: all our links have the console background, bg_game.png (positioned according to what it should be, of course). Since they are on top of divs, what we will see is the bg_game.png AND the element’s color ( #c00000, #1506a3…).

Ok, we won’t be long on this. Maybe this is enough topic for a single article :)

Search form

Have you noticed the recent (ok, maybe not that recent) Google’s switch to real time results? That’s pretty cool, yeah, I know. But it makes a little bit harder to link directly to a search results page.

Since our demo has a search form and we want to make it work, let’s put a little JS magic on it:

	<form id="search" action="#" method="get">
		<input type="text" name="query" id="query" />
		<input type="submit" value="search" id="submit" />
	</form>

Javascript:

$(function(){
	$("#search").submit( function(event) { event.preventDefault(); googleRedirect(); } );
});
function googleRedirect() {
	var query = $("#query").attr('value');
	var url = "http://www.google.com/#q=" + query + "&fp=1";
	window.location = url;
}

This way it will work ;)

Cookies? No, no, local storage instead!

Well, Cookies are great for some things, but this time they aren’t the very best option. Here we will make use of Local Storage. This is basically the same idea as Cookies, it allows you to store data related to your site, the difference is that it’s faster and very useful in some situations.

As its name suggest it is local, so it won’t be sent to the server (you save a few kbytes and processing). Cookies are limited to 4kB and 20 Cookies per domain. With local storage you can record up to 5MB of user data.

The only downside is that it works only on real browsers and IE8+. So, forget about IE7 this time (maybe later with some jQuery data fallback).

Another huge advantage is that it is surprisingly easy to set / remove;

localStorage["level"] = 15; // create it with 15 as value
var level = localStorage["level"];  //now var level is 15
localStorage.removeItem( "level" ); //remove it!

So, this is why we will use it this time.

A few options

Then we need to have a way to start the game, see which level we’re playing, these sort of trivial things. For this, we’ll just put a simple HTML box with Google’s logo:

<div id="options">
	<ul>
		<li>Level: <span id="levelCount">1</span></li>
		<li><a href="#" onclick="newGame()" >New Game</a></li>
		<li>High Score: <span id="hs">1</span></li>
		<li><a href="http://www.1stwebdesigner.com" target="_blank" >Credits</a></li>
	</ul>
</div>

Well, what is important here is that our counters have id’s wrapping them, so we can easily change their text.

Let the game begin

Random sequence

The very first thing to do when you start this game should be to generate a random sequence. Because this sequence will be the “right path” to be followed by players. We could generate it on-the-fly as our gamer reaches new levels, but it will be easier to do this way.

So we will create a simple function that just generate a random sequence with 50 digits (levels) and only with numbers from 0 to 3 (our colors!):

function randomSequence() {
	var chars = "0123"; // four colors!
	var string_length = 50; //pretty hard, isn't it?
	var sequence = "";
	for (var i=0; i < string_length; i++) { //we'll have from sequence[0] to sequence[49]
		var rnum = Math.floor(Math.random() * chars.length);
		sequence += chars.substring(rnum,rnum+1);
	}
	return sequence;
}

Binding clicks and hovers

Now we need to prepare our all a.box elements to recognize clicks and to animate properly our div.box when you hover any of them.

This time we will need jQuery .hover() and .click() functions:

$(function(){
//caching our elements for better performance
box0 = $("#box-0");
box1 = $("#box-1");
box2 = $("#box-2");
box3 = $("#box-3");
clickbox0 = $("#box-click-0");
clickbox1 = $("#box-click-1");
clickbox2 = $("#box-click-2");
clickbox3 = $("#box-click-3");
clickbox0.click(
	function(event){
		event.preventDefault();
		clicked(0);
	}
);
clickbox1.click(
	function(event){
		event.preventDefault();
		clicked(1);
	}
);
clickbox2.click(
	function(event){
		event.preventDefault();
		clicked(2);
	}
);
clickbox3.click(
	function(event){
		event.preventDefault();
		clicked(3);
	}
);
var minHover = 0.7;
var maxHover = 1;
var timeHover = 500;
clickbox0.hover(
	function(){
		box0.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box0.stop().animate({opacity: maxHover}, timeHover);
	}
);
clickbox1.hover(
	function(){
		box1.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box1.stop().animate({opacity: maxHover}, timeHover);
	}
);
clickbox2.hover(
	function(){
		box2.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box2.stop().animate({opacity: maxHover}, timeHover);
	}
);
clickbox3.hover(
	function(){
		box3.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box3.stop().animate({opacity: maxHover}, timeHover);
	}
);
});

It is pretty important caching all our elements, since it improves a lot our performance.

Magical JS variable variables and easy error detection

At this point you have coded all the hover and click elements, but when you click them nothing happens, of course. Let’s fix it:

// yeah, someone is playing it!
function clicked( color ) {
	// refresh my memory, how long have you gone so far?
	var level = localStorage["level"]; // this is our current level
	var clicks = localStorage["clicks"]; //this is our current item INSIDE one level
	var speed = localStorage["speed"]; //to make it more fun, when you get right it goes faster
	// blink it!
	window['box' + color].stop().animate({ opacity: 0.3 }, (speed * 0.5) ).animate({ "opacity": "1" }, (speed * 0.3) ); //variable variables in js via window[varname] :)
	// well, this time you've got it right?
	if ( localStorage["sequence"][clicks] == color) {
		//oh, yeah!
		localStorage["clicks"]++;
		//have you finished this level?
		if ( level == clicks) {
			nextLevel();
		}
	} else {
		//oh, noes!
		endGame();
	}
}

Every variable in javascript can be accessed via its own name, like box1 OR as an index inside window array, just like window['box1']. With this we can easily select which is the right element to blink (when you click any button, it should blink, right?).

Ok, you are right! Let’s go to the next level

When you get it right, the game should get you to the next level and the events should accelerate a little bit.

Then when you get it right you should also know which is the right sequence at your current level + 1, so let’s do it:

function nextLevel() {
	//Oh, Yes
	showBox("#ohYes", 1000);
	// you deserve it, let's move on
	localStorage["level"]++;
	levelCount.text(localStorage["level"]);

	localStorage["clicks"] = 0;
	//let's show you how it'll be
	current = 0; //since it's used just for animation, let's leave it as global var
	if ( localStorage["speed"] > 300 && (localStorage["level"] / 5) == 0 ) { //our maximum speed, and we'll only acelerate it each 5 levels
		localStorage["speed"] = localStorage["speed"] * 0.8;
	}
	setTimeout( function() { rightPath(); } , localStorage["speed"] );
}

Function showBox just shows our div and hides it after one second.

As you can see this piece of code isn’t complete, we will need the function rightPath() to see what comes next. Let’s go:

function rightPath() {
	if ( current <= localStorage["level"] ) {
		var sel = localStorage["sequence"][current];
		window['box' + sel].stop().animate({ "opacity": "0.5" }, (localStorage["speed"] * 0.5) ).animate({ "opacity": "1" }, (localStorage["speed"] * 0.3) );
		setTimeout(
			function() {
				rightPath();
			},
			(localStorage["speed"] * (1.5) )
		);
		current++;
	}
	for (var i=0; i <= localStorage["level"] ; i++) {
		var time = 1000 * (i + 1);
	}
	i = 0;
}

This is kind of crazy, isn’t it? This is a simple recursive function. It will call itself, blink the right button for one position and then go to the next until we reach user’s current level.

What if you get it wrong?

Maybe instead of click the right button you can just click the wrong button. Then we need to punish you and ban you from the entire world wide web. Let’s see our function for that:

function endGame() {
	//let's see if you have a high score, and save it
	if ( localStorage["hs"] == undefined || localStorage["level"] > localStorage["hs"] ) {
		localStorage["hs"] = localStorage["level"];
		$("#hs").text(localStorage["hs"]);
	}

	localStorage.removeItem( "level" );
	// Oh, noes!
	showBox("#ohNoes", 2000);
}

Well, here we just check if you’ve done something better than this play and then remove your current level so you can restart a new game and try a little harder :)

By the way, did I mention how will you start a game? No? Sorry, my bad.

Sorry, NOW the game will begin

What do we have to do in order to start a match is to reset almost anything we have here and then show what is the right path.

// just like starting over!
function newGame() {
	current = 0;
	levelCount.text(1);
	//let's call our sequence and memorize it
	localStorage["sequence"] = randomSequence();
	//wow, we haven't got anything right until now :)
	localStorage["level"] = 0;
	//clicks binding
	localStorage["clicks"] = 0;
	//let's make things slow for now
	localStorage["speed"] = 1500;
	//let's show our welcome warning
	showBox("#letsRock", 2000);
	//and let's show the first color
	rightPath();
}

What is your best score?

Hope you enjoy this quick HTML5 game tutorial and that you find some easter eggs, you know, since it’s a JS game we can’t hide a lot of things on it :)

But the most important thing here is: what is your best score?

At this moment, we basically have two options: mask password field and don’t ask for any feedback, or show password field as text and potentially decrease security.

This is why I think a hover revealing password could be a really good alternative: You can increase your security, and if you are unsure about what you’ve typed just go and hover over it.

So, what we will be doing today is a jQuery plugin to do that, and additionally, we will have a behavior pretty similar to what many mobiles does, where we can see the last character for a couple of seconds. This is a good chance to learn more about plugins, dynamically generated content, and some good coding practices.

Moreover with this technique we could apply different effects and a lot of variations since all this things are based on non-obtrusive and almost only decorative javascript.

So, let’s rock!

Demo, download and preview

Let’s begin with the best part. You can see our working demo or download our files and jQuery plugin.

Usability background

Before any coding I think it’s important to know why are we doing all these things. It is all about user experience and to make things the best they can be.

The man who started discussing masked passwords (as far as I know) is Jakob Nielsen, with his extremist opinion expressed in  stop password masking article. But I really think we don’t need to stick with just two options. I think we can improve all these techniques, like what mobile developers have done, improving user experience by creating a “new” way to input password data.

Don’t get me wrong, sometimes we do need to just keep masking passwords for security reasons. You know, sometimes we are near suspicious people or jealous girlfriends just waiting for a single mistake to steal our password and make big damage to our online life. But sometimes we don’t. I mean, we don’t need to let our software ready only for the worst case.

We have to be ready for the worst and the best. From IE6 (argh!) to Chrome 14.0.803.2 beta. From jealous girlfriends to hurried surfers. This is the tricky part, trying to be the best in most cases.

This is why we can’t just let passwords to be masked by default. We have to give a better option to our loyal users.

Getting started

What we will do here is to get a common password field, change it to text and create a mask above it, which is filled as you type. With this you can do anything with the “mask” without affecting the input content itself.

Maybe this image will better explain how it works:

Well, finally, let’s get started on coding.

We will start with a pretty basic form markup. As you all know it’s quite simple, so let’s add two fields, one that should come with a default value and another in blank, for you to play with as you want.

<div id="container">
	<h1>Sign Up!</h1>
	<form action="#" method="get">
		<label>
			<span class="title">Old Password</span>
			<span class="desc">This is our awesome password field with default value. Try it out!</span>
			<input type="text" name="oldpassword" id="oldpassword" value="tHis1$myP4swrd." />
		</label>
		<label>
			<span class="title">Password</span>
			<span class="desc">This is our awesome blank password field. Try it out!</span>
			<input type="password" name="password" id="password" />
		</label>
	</form>
</div>

Ok, then we need to call our magic jQuery and plugin files. Let’s do that:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> // call jQuery from google! </script>
	<script type="text/javascript" src="jquery.hp.js"> // call plugin </script>

Well, let’s create our basic plugin file. You can see some tips about it in our jQuery Smooth Table of Contents Plugin, where we have a really simple structure.

(function($){
 $.fn.hoverpass = function(options) {
	//Our default options
	var defaults = {
		bullet: "•", //which should be the "masking" character
		font: "'Lucida Console', monospace", //please just use MONOSPACE fonts
		bg: "#fff", // background style for bullets
		free: "", // add your own additional styling here
		freeBul: "float: left; overflow: hidden;", // add your own additional styling for bullets here
		delay: 500, //how long it takes to create the bullet over the last character, in milliseconds
		delayHover: 3000, //how long it takes to hide again a hovered character
		animation: 500, //how long it takes the animation itself
		maxSize: 10 // maximum number of characters, to prevent  bullets exploding input's size
	};

	//let's extend our plugin with default or user options when defined
	var options = $.extend(defaults, options);

    return this.each(function() {
		//our action goes here
    });
 };
})(jQuery);

Above we defined our default variables, let me explain some of them a little bit:

• bullet – Is what will mask our password. You can use any character but use just one character or HTML entity.
• font – This is really important, this plugin only works with monospaced fonts. Since in other types, each character has his own width, we can’t “mask” it.
• bg - If you use any background in your input, then you should apply it to your mask too, since it will be above the input.
• free - Here you should add margins in order to compensate any padding that your input has. Furthermore you should set your input’s font-size here.
• maxSize – This is important if your password field is too short. If you don’t adjust it you may get some extra bullets exploding your input’s size.

At this point you have a basic plugin, that is called via $(elem).hoverpass(), defined by our second line $.fn.hoverpass = function(){}.
I know, this name sucks. I would be glad if you send suggestions about better names :).

Change our input type to text

I don’t know if you’ve tried this before, but let me tell you something, you just can’t change the type of inputs. This happens due to security reasons, right? Well, seems that just IE will worry about it (you can do it via old JavaScript in real browsers). Anyway, what we have to do then is create a “clone” of current input without type property.
There is several ways of doing this, I’ve done it this way:

return this.each(function() {
	//let's declare some variables, many as a "shortcut" for options
	var  bullet = options.bullet,
			font = options.font,
			bg = options.bg,
			free = options.free,
			freeBul = options.freeBul,
			delay = options.delay,
			delayHover = options.delayHover,
			animation = options.animation,
			lastBul = "";

	//since we just can't change a field's type, we'll remove it and append a brand new text input on it's place
	var oldElement = $(this); // caching element, much better performance
	var inputHTML = '<input type="text" style="font-family: '+  font +'; " />'; //this is our basic input text, with our monopace font
	var input = oldElement.after(inputHTML).next(); //appending our simple text field with our styling (font-family) AND caching it as var "input"

	/****
		we are saying here:
			define the following variables: attr , i (zero), attrs (array with all oldElement attributes), l (size of attrs)
			while our counter (i) is smaller than attributes lenght (l) increase our counter and run this code
	*/
	for ( var attr, i=0 , attrs = oldElement[0].attributes , l =attrs.length ; i < l ; i++){
		attr = attrs.item(i)
		if (attr.nodeName != "type" && attr.nodeName != "style") { //well, we defined our type as text and font-style!
			input.attr( attr.nodeName, attr.nodeValue );
		}
	}
	oldElement.remove(); // bye, bye input type="password"!
});

Create our mask and bullets

Wow, at this point, when you define $(elem).hoverpass() it will turn into a monospaced text input. Pretty cool, huh? But we want more than this.

Now we will create our bullets container. The only really interesting thing in this two lines is that jQuery element caching again. You really should be using this simple technique:

	// let the game begin
	var maskHTML = '<div class="hpMask" style="position: absolute; cursor: text; height: 1px; font-family: ' +  font + ' ; ' + free + ' " />'; //our container with his styling
	var maskContainer = input.before(maskHTML).prev(); // appending our container for bullets with styling (font-family, free)

Now we’ll prepare our bullets HTML, since it will be used several times, and add some bullets when we have a “value” attribute defined.

	var bulletHTML = "<span class='hpBullet' style='background: " + bg + "; " + freeBul + " '>"+ bullet + " </span> "; // our bullets HTML with styling (bg, freeBul)
	var countBullet = 0; // this is our counter, it is important to prevent our mask to get bigger / smaller than our input or its maximum size

	//since we use it from different places, it's better to add it via function
	function addBullet() {
		// add our last bullet, but hidden, and show anything that isn't last bullet
		lastBul = maskContainer.append(bulletHTML).find(":last-child").hide();
		maskContainer.find(":not(:last-child)").each( function(){ $(this).show();  } );
		//start timer to show  lastBul
		lastBul.delay(delay).fadeIn(animation);
		countBullet++;
	}

	//first loop adding bullets when we have a default value
	for ( i=0 ; i < input[0].value.length ; i++){
		addBullet();
	}

Well, at this point you should see again a textfield but if you have a value attribute defined, you’ll see a lot of bullets and the last one fading after one second. Although, if you type, nothing happens.

It’s time to play with keyboard

No, we won’t be taking music classes here :)

We now need to append new bullets every time something is typed in our password field, and remove one bullet if the pressed character is delete or backspace.

We could do this via keypress, keyup or keydown.

Thinking about it a little bit with keydown and keypress (they are very similar) we bind “pressing key” and with keyup we bind “releasing key”. Looking a little closer, you might notice that in our case it means that keydown/keypress is called before we have any change in our field’s value but keyup is called after any change occurs.

This is why we need to use keyup here. We have to look at our field’s value and see “hey, have you changed your size?” in order to append or remove bullets. This is because we could have several scenarios when user selects part of the password, press delete in the beginning of the field and much other things that would be too painful to bind as separated actions.

So, let’s do it:

//let's bind all keydown and create / remove our bullets ; we need do use keydown in order to detect special characters in non-gecko browsers
	input.keyup(
		function(event) {
			//check if something was really typed
			if (input[0].value.length > countBullet) {
				addBullet();
			} else { //ooops, delete or backspace?
				//then we check if something was really deleted
				while (input[0].value.length < countBullet) {
					maskContainer.find(":last-child").remove();
					countBullet--;
				}
			}
		}
	);

Finally, hover-revealing field!

Well, now we just have to hide our bullet when someone hovers it. Kind of easy, right? Well, it isn’t that easy. It is because we have to hide our bullet, but we can’t lose it’s width, because if we do, our users would see only the last character of the password (not the ones in the middle). What we can do is to fade it to an insignificant opacity (like 10%) and then change it’s height to 1px, so we still have width.

Ok, now it’s just to use elem.hover() and we’re done, right? Again, no. This is because we have dynamically generated content we should use live() or delegate() to bind it. In my tests delegate had a much better performance, so we will do it this way:

//hide bullets based on a jquery object
	function hideBullets(object) {
		object.stop().css({ "height": "auto"}).animate({ opacity: 1 }, animation).removeClass("hpHiddenBullet");
	}
	//hover function for our bullets
	maskContainer.delegate(".hpBullet",  'hover',
		function(){
			var item = $(this);
			if (  item.hasClass("hpHiddenBullet") != true ) {
				hideBullets( $(".hpHiddenBullet") );
				item.stop().addClass("hpHiddenBullet").animate( { opacity: 0.01}, animation, function() { item.css({ "height": "1px"}); } );
				setTimeout( function() {
					if (  item.hasClass("hpHiddenBullet") == true ) {
						hideBullets( item );
					}
				}, delayHover);
			}
		}
	);

Are you hungry yet?

Wow, hope you guys liked it. Maybe you’re not going to use this effect itself but I’m sure we have a lot of good snippets here that are worth using in other cases.

Talking about the final effect, what do you think about it? Have you seen a better alternative?

Show us your opinion and let’s find what could be the very best implementation to our users!

You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?

Thus, our point here is to collect some cool CSS effects that you should be using:

• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles

So, Let’s rock!

Min / Max width (IE included)

Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? But you don’t need to do it anymore. IE is not a strict standards browser and sometimes we can take advantage of this to code things that would be awful to see in standard CSS code.

You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows:

#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

RGBA (IE included)

This time we will need some IE filters to get the job done. You’ll have the standard markup, IE6 correction and IE8 correction.

IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! We have a pretty RGBA background.

The first two digits should be the opacity and the last one should be the color itself. Don’t know why, it just don’t get the opacity right… Maybe its just a bug inside a bug :)

.element {
  background-color: transparent;
  background-color: rgba(255, 255, 255,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

Opacity (IE included)

Wow, filters again! But this time we have a different syntax for IE8 and earlier versions. And again be sure to put khtml, moz and standard declarations.

.selector {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
	filter: alpha(opacity=50); /* internet explorer 5~7 */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}

Image rotation / scaling (IE included)

Another pretty cool and virtually unused feature is image rotation / scaling. There is another filter that allows you to rotate images, but unfortunately it just allows you 90º increments.

Although you can also mirror images, that makes cool image editing possible to almost every real browser and IE. For real browsers we will use the transform property with each vendor prefix.

	img {
		transform:
			rotate(180deg)
			scale(-1, 1);

		/* for firefox, safari, chrome, etc. */
		-webkit-transform:
			rotate(180deg)
			scale(-1, 1);
		-moz-transform:
			rotate(180deg)
			scale(-1, 1);

		/* for ie */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

		/* opera */
		-o-transform:
			rotate(180deg)
			scale(-1, 1);
	}

Fullscreen Background (IE included)

Sometimes we just need a quick way to get full screen backgrounds. Well, hope you don’t use JavaScript just to do this, because you can do it with a few lines of CSS.

The magic here is to set a div that goes fullscreen and inside it you can put a landscape, portrait or full sized image.

	.content {
		position: relative;
		width: 760px;
		z-index: 10;
	 }
	 .background {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index:2;
	 }
		.portrait {
			height: 100%;
		}
		.landscape {
			width: 100%;
		}
		.full {
			width: 100%;
			height: 100%;
		}

<div class="content">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="background">
	<img class="full | portrait | landscape" src="imgURL" alt="" />
</div>

Background pattern or bullet without image file

Pretty sad that IE doesn’t allows you to use base64 encoding instead of real files. The best part is to use it for mobiles, since it saves you some http requests and precious time.
I’ve used it for a custom list style image without images. I just generated the base64 from Patternfy and pasted it in my CSS, like this:

	 ul {
		list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
	 }

Text Shadow (IE included)

Again we will need some IE filters. But this time IE filters can destroy your font’s readability, so try not to use it too much and preferably, only when working with larger fonts.

	p {
		text-shadow: #000000 0 0 1px;
		zoom:1;
		filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

		-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
	}

Multiple borders (IE included)

When you want more than one border, for real browsers you’ll need to use an outline or :before and :after elements. For IE you could use filters to gain some an extra border.

	div {
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
	}
	div:before {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;
		border-top: 1px solid #212121; /* top border! */
		content: '';
	}
	div:after {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 1px;
		border-bottom: 1px solid #212121; /* bottom border! */
		content: '';
	}

Box Shadows (IE included)

The same filter we’ve used to create a second border can be used to generate box shadows. Be aware that this filter can mess up an element’s width, so if you want to use it with any grid system, prepare for the headache.

	.shadow {
	    -moz-box-shadow: 0 0 4px #000;
		-webkit-box-shadow: 0 0 4px #000;
		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
		filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
		box-shadow: 0 0 4px #000;
	}

Rounded corners

The bad part about almost-standard properties is that each browser implements its syntax differently. So for round corners we have a pretty strange behavior, where standards browsers have different ways to say same thing:

.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */

	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
 }

Screen reader only accessible content

Sometimes you want to improve the accessibility of your site, so you put some fancy links like “Jump to content” or “Jump to navigation”. So you just put “display: none” or “visibility: hidden” and hope it works, right? Well, it doesn’t. Some tests show that many screen readers just ignore the display:none or visibility: hidden part, so you don’t have any accessibility improvement.

What you can do instead is to use position absolute and hide this content above browsers visible area. But you have some risks on this technique, since it hides content, Google can consider it gray or black hat.

.hidden  {
	position: absolute;
	top: -10000px;
	left: -10000px;
 }

Don’t use negative text-indent

Since we’re talking about hidden content, take one more note, never use negative text-indent again. This is a known technique so you have a lot of SEO downsides by using it, since many bots can recognize it nowadays.
Just use alt attribute, that is much safer than hide content.

<h1><img src="myLogo" alt="My company" /></h1>

Clearfix (IE included)

Many of you know about .clearfix method for correcting heights when you use floats. Well, in many of these cases, that amount of code could be replaced by just two lines:

	.clearfix {
		zoom:1;
		overflow:hidden;
	}

@font-face (IE included)

If you’re still using cufon just because you don’t trust @font-face, think again.
Font Squirrel provides an amazing @font-face generator service, that allows you to put really good looking fonts in your site without worrying about all that JavaScript stuff.
The final code provided is something like this:

@font-face {
    font-family: 'MandatoryRegular';
    src: url('font/mandator-webfont.eot');
    src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/mandator-webfont.woff') format('woff'),
         url('font/mandator-webfont.ttf') format('truetype'),
         url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Pull quotes without image

We talked about this before, but it is possible to create curly quotes without any image. And it is not that hard. You just need a :before and blockquote:

	blockquote:before {
		display: block;
		float: left;
		margin: 10px 15px 0 0;
		font-size: 100px; /* let's make it a big quote! */
		content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
		color: #bababa;
		text-shadow: 0 1px 1px #909090;
	}

CSS for iPhone4 (higher resolution)

As time goes by we get more and more powerful mobile devices. It is a good practice to give create a mobile version, with reduced images and overall files size, but we have also to give a better experience for the ones with newer devices.
Since iPhone4 has a higher resolution, if you don’t provide a better (and larger) version of you logo, for example, your users will get a blurry version of it. This is a problem that can be solved with a very few lines:

@media handheld, only screen and (max-width: 767px) {
	.logo {
		/* common low-res and low-size, of course */
		background: url(logo.jpg) no-repeat;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}
}

CSS landscape / portrait orientation for mobiles

This is a nice starting point for correcting layout bugs in each version of each layout mode for many mobiles, provided by stuffAndNoise

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		/* Styles */
	}

	/* Smartphones (landscape) ----------- */
	@media only screen
	and (min-width : 321px) {
		/* Styles */
	}

	/* Smartphones (portrait) ----------- */
	@media only screen
	and (max-width : 320px) {
		/* Styles */
	}

	/* iPads (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px) {
		/* Styles */
	}

	/* iPads (landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : portrait) {
		/* Styles */
	}

	/* Desktops and laptops ----------- */
	@media only screen
	and (min-width : 1224px) {
		/* Styles */
	}

	/* Large screens ----------- */
	@media only screen
	and (min-width : 1824px) {
		/* Styles */
	}

	/* iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
		/* Styles */
	}

But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.

Well, let me tell you a secret: They are doing it wrong.

Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).

A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!

Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D

So, let’s rock!

Demo!

Take a look at what you will do at the end of this tutorial:

I think you should check out the demo, and download it to try out a little bit more!

So, counter?

Basically a counter is a “variable” that we can create with CSS but the only two possible operations that we can perform with it is to increase or to reset. For such operations we can use counter-reset or counter-increment CSS properties.

A basic usage is the first case mentioned in this post, the organized content. So let’s say you have a multi-step tutorial and want it organized automatically, what you have to do is just add this to your CSS:

body {
  counter-reset: first; /* our h1's counter is zero every time we have a body tag (hope only once) */
}
h1 {
  counter-increment: first; /* so, when we have one h1, our counter will increase one unit */
  counter-reset: second; /* and we will reset our h2's counter */
}
h1:before { /* wow, here we will append a pretty formated Step N - Item */
  content: "Step " counter(first) " - "; /* when you write counter(first) we will get its current value */
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
  color: #bababa;
}
h2 {
  counter-increment: second; /* so our h2's counter goes up.. */
  counter-reset: third; /* and we reset the h3's */
}
h2:before {
  content: counter(first) "." counter(second) " - "; /* we will output H1NUMBER.H2NUMBER */
}
h3 {
  counter-increment: third; /* h3 goes up, up, up */
}
h3:before {
  content: counter(first) "." counter(second) "." counter(third) " - "; /* and we output H1.H2.H3 */
}

As you can see its usage is quite simple. Our downside is that we rely on content: property and after (or before) pseudo-element so older browsers won’t see this. But it should work just fine in IE8+ and other browsers.

Multiple counters

Another great thing is that you can have a “general” counter, you just have to separate multiple counters to increase with spaces. Just like this:

body {
  counter-reset: general first;
}
h1 {
  counter-increment: general first;
  counter-reset: second;
}
h2 {
  counter-increment: general second;
  counter-reset: third;
}
h3 {
  counter-increment: general third;
}

Better Ordered lists

Using almost the same code, you can create better ordered lists, with sub-items control.  So instead of just 1 – ITEM you can have 2.5.3.1 – ITEM when you have multiple nested OL’s. This is the code I’d use:

ol {
	list-style: none;
	counter-reset: olfirst; /* our father OL must have olfirst item reseted */
	font-family: arial;
}
ol ol {
  counter-reset: olsecond; /* our sub OL's reset the olsecond, third must to be olthird and so on */
}
	ol li {
		counter-increment: olfirst; /* when we have a item that is children of first OL, it increases first counter*/
	}
	ol li ol li {
		counter-increment: olsecond; /* when the item is children of a OL that is children of another OL, so it is a sub OL */
	}
	ol li:before {
		content: counter(olfirst) " - "; /* let's output our pretty number */
	}
	ol li ol li:before {
		content: counter(olfirst) "." counter(olsecond) " - "; /* let's output our "sub-number" */
	}

Are you hungry yet?

This is a pretty tricky attribute so you must to try it out a couple of times until you are familiar with it. But we have some tutorials at W3Schools about CSS counter reset, CSS counter increment and before / after pseudo elements that can help you a lot.

So, it is time for you to talk. Did you know about this property What do you think about it?

There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

What is OO CSS?

The concept of ‘Object Oriented Programming’, is widespread among developers, and forms the basic for any modern programming language. Features like data abstraction, modularity and inheritance make it a favorite in coding large-scale applications.

Object Oriented CSS, as the name suggests, is implementing the concepts of OOP in structuring and building CSS rules, which are easy to reuse, thereby reducing the loading time and increasing the performance of web pages incredibly! The key point here is, to identify, build and style modular reusable ‘objects’ in a page, and to reuse it in multiple instances by extending them with additional features wherever needed. Here an ‘object’ refers to the basic HTML markup and its CSS rules. Apparently, here, the key challenge is going to be, identifying the ‘object’ and building rules for it.

This is neither a framework nor a technology, but an approach adopted in building the rules, so as to make the code more reusable, maintainable and scalable. You may already have been making use of this concept in coding your style-sheet for years, but may not be aware of this terminology :).

A UI engineer at Yahoo (‘Nicole Sullivan’ ) coined the term. She had made a number of presentations on the topic on various big stages (http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html) and is also included in a feature on Women in Technology.

Nicole, who has been hired by Facebook recently, for optimizing the CSS and web page performance, has been leading the way in implementing this approach in the pages for the social networking giant, and the results are to be seen. A faster loading FB, with significantly less response time! This is exactly what this approach of building CSS promises to give back. But again, like all other frameworks, this too has pitfalls and advantages which we shall discuss in detail.

Following are some key aspects in object-oriented approach to CSS building:

1. Create a component library
2. Separate container and content / Avoid Location dependent styles
3. Separate Structure and skin
4. Extend base objects using class names
5. Stick to semantic class names

Create a component library

This is the first thing to do, while building a OO CSS framework for your application, and this is the most time consuming process too. You will have to carefully study the screens of the app, and come up with the recurring reusable UI patterns, and will have to create a library consisting of HTML markup and respective CSS rules of all such components first. This may take some initial time, as you may need to filter out the components and find out the basic structure of a component, and its variations along different screens.

E.g. For a blog, ‘metadata (Refer to the marked area in the figure below)’ will be present in multiple instances of a page. After closer scrutiny, you will come to know that, all the metadata can have the same HTML markup, and the variations can be addressed using CSS (the font size, color, margin and padding are different in each of the occurrences of metadata component). Select a markup, as a base structure, in which you can accommodate majority of the elements that possibly can come in the particular component.

In our example our basic structure of the ‘metadata’ component will be:

Base Markup

<p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p>

Base rule

.metadata{font-size:1.2em; text-align:left; margin:10px 0;}

Thus, ‘metadata’ can be now independently used within any other element in the markup, and will have a consistent look and feel, irrespective of where it is used. But as we can see in the figure above, there are multiple variations of the component. This we will tackle using CSS, and will be discussing in the following points.

This way, figure out all the reusable components, and create rules and markup, and group them separately in the CSS file. (It’s even fine to create a separate CSS for the component library, and then merge it with others later during deployment.)

Separate Content from Container / Avoid location dependent styles

This is one of the primary requirements of following an OO approach to building CSS files. The core idea here is to consciously differentiate the rules of containers and the content that comes within them, so that content can be plugged into any containers irrespective of their parents.

Often while building large-scale CSS rules there will be instances where a single component will be appearing differently in various instances, when put in different containers. One of the solutions adopted by front-end engineers, for addressing this problem was to assign location dependent selectors to that particular component.

E.g. With reference to the example used in the previous point, where there are multiple variations of the same component – ‘metadata’, each instance can be given location dependent rules by combining the base class ‘metadata’ with the relevant classes/IDs for the containers. i.e.,

‘metadata’ in a blog post can be styled as: .post .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}

The OOCSS approach advocates avoiding this type of usage. Instead extend the base class by adding more classes, thereby extending the attributes of the base component to match the variation. We shall discuss the concept of extending the base class in the following points.

Separate structure and skin

In the first point ‘Creating component library’, we discussed the importance of identifying reusable components, and building base classes and base structures for them. While creating those base rules, an important thing to keep in mind is to separate the structure and skin. In other words, while defining a base class in the component library, we should not create skin-level rules, like width, height, background images, border styles, etc, that can make the component more specific to a certain container.

E.g. For our base class, ‘metadata’ with the following rule

.metadata{font-size:1.2em; margin:10px 0;},

Adding more skin-level rules as below,

.metadata{font-size:1.2em; margin:10px 0; <strong>width:500px; background-color:#efefef; color:#fff;</strong>},

can make it more of a specific component than a generic one, thereby making it difficult to reuse it in many other containers, which would need it to be rendered in a different ‘skin’. Also another danger of not separating structure and skin will be the ‘Specificity war’.

Extend base objects using class names

As discussed in the second point ‘Separate content from container’, avoiding the usage of contextual selectors will make the content independent from their parent containers and hence will be truly usable across the application. So how do we instantiate the variations of the same object in different containers? What is the solution? Well here comes the concept of extending the base ‘object’ (again another term coined by Nicole Sullivan), by adding more class names to it depending on the context, rather than tightly coupling the object with the class names of the containers in which it is to be placed.

E.g. In the first figure of the ‘metadata’ object, where the same object needs to be rendered differently in various containers,

The HTML markup of each of them will look like:

<p class=”metadata commentmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>
<p class=”metadata postmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>
<p class=”metadata authorlistmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>

The CSS rules will be:

.metadata{font-size:1.2em; margin:10px 0;}
.commentmetadata{font-size:1em; margin:0 0 10px 0; color:#063070; }
.postmetadata{ color:#063070; }
.authormetadata{ color:#fff; }

This is a very simple demonstration, to comprehend the concept of implementing OO programming. As the size of the app becomes larger, the UI patterns will become more complex, and there lies the actual challenge and advantage of using such an approach.

Stick to semantic class names

A challenge in building CSS for high-scale web applications is to logically come up with meaningful class / ID names matching with the context and moreover making sure, they are reusable and still make sense. With the concept of ‘extending’ base objects, it’s easy to fall into the practice of creating ‘presentational class names’. Some easy examples are ‘leftCol’, ‘redText’, ‘midCol’, ‘bigText’, ‘bolderText’ etc. Such class names are not reusable and are a hindrance to scalability.

Always stick to logical and semantic class names relating to the logical meaning of the component, rather than its presentational meaning. It means, instead of giving the text block with a yellow background color, the class name ‘yellowText’, ‘notification’ would be a more sensible name, as it is a notification element that pops out to notify some activities within the system.

Pros and Cons?

Following such an approach of building CSS has its own pitfalls and advantages

Here are a few cases, where adopting such a framework ‘may’ backfire:

1. OOCSS is suited to really large websites / application which are filled with reusable components. It may not give desired results in smaller websites and applications. So decide sensibly depending on the size of the work in hand
2. If not smartly used, creating the component library can turn out to be a mess, and become a maintenance nightmare for other coders
3. Documentation is a must. Each block of code should be clearly commented out with the right points for other coders to absorb the concept, which otherwise can become too tedious in case of a knowledge transition

Some obvious advantages of adopting this approach are:

1. Less lines of CSS code
2. Cleaner HTML markup, with logically sensible class names and hierarchy
3. Semantic markup, means more SEO friendly pages
4. Far better page optimization, with much faster loading times, since most of the components are reused
5. Scalable markup and CSS code, where more components can be added into the library without disturbing other components, as the base objects are independent of any other containers
6. Easily theme-able layouts, since changes to the base object can completely change almost the whole presentation layer instantly

Courtesy & Resources

http://www.webdirections.org/blog/object-oriented-css-the-video/

http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/

http://www.iconfinder.com for all the icon resources

Our task today is to improve our form, to get better conversion rates, and maybe learn something from it.

We will be talking about conversion, code, and design, in an easy and practical way.

So, let’s stop talking and rock some forms.

1. Test and track everything

Before changing anything, you need to learn how to do split tests so you can measure your improvement. Since there is no magic formula, some techniques that work for other people just don’t work for you and vice-versa. It’s kind of a trial and error process.

We have a lot of tools for this tracking job, including tracking goals and funnels with Google analytics or recording users interactions with Clicktale.

2. Increase conversion by 25%~40% with “Mad Libs”

According to Wikipedia:

Mad Libs consist of a book that has a short story on each page with many key words replaced with blanks.[...] One player asks the other players, in turn, to contribute some word for the specified type for each blank, but without revealing the context for that word. Finally, the completed story is read aloud.

It sounds funny, isn’t it? Well, it is also really good for business. LukeW wrote an article about how 2 guys (each one in his own site) have increased dramatically the conversion rates, with this technique.

We have a lot of examples that when you turn your software more friendly, you get much better results. So when you do not have a simple form, but a dialogue the user seems more open to fill it.

3. Captchas are bad guys

Unless you are a nice guy and want to help in the book digitizing business, I recommend you to remove your captchas.

I say this because we have some alternatives that are almost as efficient as captchas are, but without the downside of reducing our conversion rates.

We have two good examples, one guy who increased his conversion by 33% and other that lost 3.2% of his conversion while captcha was active, because some people couldn’t complete the process.

Both replaced captcha with honey pot fields and just kept spam at a low level.

4. Don’t put optional fields

This one is really simple. If this information will be used, you need an obligatory field. If it isn’t you don’t need this field.

If you really want to get more information about your users, I recommend you to ask for it after they have finished their current activity (buying, registering…) so you don’t waste their time with not-so-important things and keep your forms as short as possible (you know, long forms are bad, bad guys).

5. Use steps in checkout pages (avoid one page checkout)

Actually I’ve done this one wrong many times. When users see long forms they just don’t want to spend their time filling it out. But the funny part is that if you break a long form in 3 little forms, they are much more open to complete the process.

Proimpact 7 gives us 5 reasons why not to use one page checkout. Basically, it is because they can reduce your conversion rate by 60%.

6. Remove that reset button

All reset buttons should have the label “you’ve been rick rolled”. Really, 99,999% of the cases you just don’t need them, and it can make the user lose all his data. Jakob Nielsen is pretty extremist about it, he says “Reset: Don’t use“.

7. Don’t mask passwords

This is a pretty controversial thing. Sometimes it is better to mask sometimes not.

What you have to keep in mind is that sometimes it’s good to give the users the options to “unmask” the password field.

Jakob Nielsen again has a pretty extremist opinion that you must stop password masking. I don’t think it really works  this way, but you can try this alternative and measure your results. :D

8. Validate fields

Sure, you must be clear about how users must fill some form fields, but it is impossible to prevent all errors. So it is good to have some client-side form validation, like Vanadium, so users can see what is wrong while they are still typing.

9. Label above the field is better

Above is an eye tracking study that shows how users find it much easier to relate the labels to the fields while they are above them.

It is a really good study of UXMatters about label placement in forms. The only downside of labels above fields is that they need more space so the form can look bigger while it has the same number of inputs than others.

Another good alternative is sliding labels, but I think that has potential to save space and be easy to understand.

10. Auto complete is your friend

Don’t know why aren’t you using it yet.

Don’t be afraid to use some custom elements

Sometimes we need calendars, multiple selects, sliders and others elements that aren’t available in HTML or they are really bad by default.

When you have this, don’t be afraid to use jQuery enhancements to your form (non-obtrusive way, of course). We have a lot of plugins and resources to help us in this task.

One really good example is Uniform, that creates sexy forms with jQuery. It’s really worth 5 minutes of your attention.

Are you hungry yet?

I’m sure you have read something about it too. Why don’t you join this conversation and put you thoughts in comments?

However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.

Some of you may be thinking that since you don’t see anything out of place when viewing your web page, you have your HTML and CSS documents built correctly, but you may be wrong. The truth is that you should not trust everything you code. Using the same ID more than once on the same page won’t result in wrong alignments or retrieve any error (unless you try to validate), but it is in fact bad markup and a major flaw in your code.

Doctype

Not so long ago, we had to use those really long Doctypes that were almost impossible to remember. Now, since you just need to use <!DOCTYPE html> on the top of your document, we have a much cleaner and better solution. Nevertheless, some people still forgets to specify it. This is mandatory for a validated and organized HTML document.

How you should do it

Never forget your DOCTYPE.

ID vs Classes

An ID is a unique identifier which allows us to target a specific element on the page and, since it is unique, it can only be used once in a page. On the other hand, we have classes which allow us to do exactly the opposite. Classes are used when you have the same element more than once on a page.

How not to do it:

<div id="block">
   <div id="btn"></div>
   <div id="btn"></div>
</div>

How you should do it:

<div id="block">
   <div class="btn"></div>
   <div class="btn"></div>
</div>

Say no to inline styling

Inline styling is unfortunately a pretty common practice and at the same time a bad one. It has nothing to do with invalid code or bad markup, but with organized code and structure. Imagine you have 30 pages and you need to remove an inline style you have applied to the same div on every single page, it would take you forever and steal precious time.

How not to do it:

<div style="width: 100%; background: #fff;"></div>

How you should do it:

<div id="wrap"></div>

Ove use of divs and CSS Classes

So you started your own project, you know how to use divs, ids, and classes. Inline styling is not your thing (fortunately), and you love to create styles and apply them everywhere. That’s great, but don’t write more than you have to. Having a div with an unordered list inside and a class applied to each li element is unnecessary.

How not to do it:

<div id="navigation">
   <ul>
      <li class="left"></li>
      <li class="left"></li>
      <li class="left"></li>
   </ul>
</div>

How you should do it

<ul id="navigation">
   <li></li>
   <li></li>
   <li></li>
</ul>

And in your stylesheet

#navigation li { float: left; }

Browser Resolution

According to the W3c’s latest statistics (January 2011), 13.8% of internet users have a 1024×768 screen resolution, and 85.1% use a bigger screen resolution. So the question is “What resolution I should design for?” I personally use a maximum width of 960 or 980 pixels for a vertical layout and between 550 and 640 pixels in case of a horizontal layout. Besides, though 13.8% seems to be a fairly low number, it still represents millions of internet users.

How you should do it

Consider everyone’s needs, and especially your target audience.

Block vs Inline elements

Differentiating block from inline elements can be a a delicate matter for beginners. A block element is displayed on a new line taking by default 100% width of the containing element, like divs (<div>) or paragraphs (<p>). An inline element is displayed with no line breaks meaning that it starts on the same line, taking only his own width, like span (<span>) or image (<img>). You can also change the way an element is displayed, this means that you can change an inline element to be display as a block and vice versa.

How you should do it

span { display: block; }

Use comments to organize your code

When I start a project, I try to organize it through commenting as much as possible and you should do the same. This is something purely optional but I highly recommend its use. It not only helps you find the section or element your are looking for, but also makes your life easier when you need to know which div your </div> is closing.

How you should do it

<!-- Begin #header -->
<div id="header">
<!-- End #header -->
</div>

Stylesheet:

/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
#header { background: #fff; }

Cross-Browser Compatibility

When you decide to make something, you should place yourself in the role of the end-user, and imagine that, even today, some of them still use browsers like IE6. A page in renders differently in Firefox than in Chrome or Internet Explorer. There are some useful tools you can use to check how your page renders in different browsers. Charina wrote a very complete article regarding this topic which I recommend reading – 10 Useful Tools For Cross-Browser Compatibility Check

How you should do it

Do not forget to pay attention to your layout in different browsers, systematically.

Keep it short – Generic classes, properties and CSS files

When you are coding you should always have one thing in mind, plan for the future. You are already using comments and keeping your code organized, so why stop here? The first thing I do when I’m coding CSS is to specify a section of generic classes, then on my HTML I simply use them alongside with other elements.

How not to do it:

Stylesheet

#firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

<div id="firstblock"</div>
<div class="genblock"></div>

How you should do it

Stylesheet

.left { float: left; }
#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

<div id="firstblock" class="left"></div>

<div class="genblock  left"></div>

This is a simple way of declaring two classes. I like to find the most efficient way to do things, and as you can already guess, I really like keeping things organized, so when it comes down to properties, it’s the same thing. Why should we write the same property over and over again when we just need to write it once?

How not to do it:

#content { margin-top: 10px; margin-right: 12px; margin-bottom: 0; margin-left: 15px; background-color: #000; background-repeat: no-repeat; }

How you should do it:

#content { margin: 10px 12px 0 15px; background: #000 no-repeat; }

The ideal number of CSS files you should have in your project depends entirely on you and the way you work. I have been involved in projects where there was a “generic.css”, “main.css”, “global.css” among others, it took me forever to understand the purpose of each file. I usually have just two CSS files on my projects – style.css and reset.css.

How you should do it
You should make it simple and efficient to edit later on.

Don’t use heading tags randomly

Heading tags are not just there to make it pretty, they establish the importance of your content which makes them valuable for SEO. There are six Heading tags: h1, h2, h3, h4, h5, and h6. H1 is the most important, so you should use it for your web page or business name only. The rest of the tags should be used according to title or content importance. Also, you don’t need to have heading tags everywhere on your document.

How not to do it:

<h6>Post title</h6>

<h1>Text content</h1>

How you should do it:

<h2>Post title</h2>
<p>Text content</p>

Use absolute position only when you have to

When you’re starting out, you can easily become addicted to the use of absolute positioning. This is because it is an easy way of placing elements, however, this property should not be used excessively. Since elements with absolute position lose their normal flow, it is almost impossible to align them with other sections on the page. You simply can’t tell a normal element to be on the left side of an element with absolute position.

How you should do it:

Use absolute position only when you need to, and not because it is easier.

Type fonts

So is there a font you really like and you would love to use it on your page, is it a standard font? What if not? These are are questions you need to ask before you choose your typography. When you choose a font you must always have a backup plan, this means that in case the user does not have the chosen font, the second choice (or third, etc) will appear. Examples of standard fonts are Arial, Georgia, Lucida Sans Code, Times New Roman, Verdana, Tahoma, and some more. Now let’s say you would like to use a font that is non-standard, what would you do? The most obvious answer is @font-face.

How not to do it:

p { font-family: AurulentSansRegular, Arial, Helvetica, sans-serif; }

How you should do it:

@font-face {

font-family: 'AurulentSansRegular';

src: url('AurulentSans-Regular-webfont.ttf') format('truetype');

}

p { font-family: 'AurulentSansRegular', Arial, Helvetica, sans-serif; }

Always validate

The title is pretty self-explanatory, you should always validate your CSS and HTML documents. Why? The answer is why not? You have a way to know if your code has errors and it gives you solutions to fix them, so really, why not? Add CSS Validator and HTML Validator to your favourites.

How you should do it

Validate your CSS, and after that do the same for your HTML.

Conclusion

Some may consider these tips and techniques common sense and simple to understand, others not so much, but the important thing is that every coder make mistakes, and practice makes perfect.

Hope you enjoyed the article and have some fun experimenting, but keep it organized!

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

• Dezign Folio: Create A Detailed Portfolio Homepage Design In Photoshop
• 960 Grid System
• jQuery Scrollable

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

1. The layout has these sections: header, slide show, services, information and a footer.
2. You’ll also notice that we can use a single repeating image as the background for the body that covers header, slide show and services.
3. Both information and footer sections have the same horizontally repeating background image.
4. Finally, notice that header, slide show, information and footer sections have fixed heights.

Based on these points we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DezignFolio</title>
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header container_12">
        header content goes here.
    </div>

<div class="<span class=">slideshow"></div>
        slide show content goes here.
    </div>
    <div class="services container_12">
        services content goes here.
    </div>
    <div class="information">
        <div class="container_12">
            information content goes here.
        </div>
    </div>
    <div class="footer">
        <div class="container_12">
            <div class="grid_12">
                Copyright 2010 1stwebdesigner.com
            </div>
        </div>
    </div>
</body>
</html>

As you can see in this layout we added links for the CSS files in the header, created five main <div> sections each with a unique class name for styling. I added an extra class “container_12″ to header and services. I also added a <div> with a class “container_12″ inside information and footer sections, this will allow us to style the information and footer sections to take full width of the browser area and to hold the repeating background. Finally, notice that “container_12″ in the footer has a “grid_12″ division, this division will take the whole width of “container_12″ and it is styled in 960.css file. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #696969;
    background: #fff url(../images/bg.jpg) repeat-x top center;
    font-size: 12px;
    line-height: 17px;
    font-family: Verdana;
    padding: 0;
}

a {
    text-decoration: none;
}

.header {
    height: 101px;
    overflow: hidden;
}

.slideshow {
    padding: 30px 0 0 0;
    height: 475px;
    overflow: hidden;
    background: url(../images/message_bg.png) no-repeat;
    background-position: center 348px;
}

.information {
    width: 100%;
    height: 318px;
    display: block;
    overflow: hidden;
    background: url(../images/information_footer_bg.jpg) repeat-x top center;
}

.footer {
    width: 100%;
    height: 59px;
    display: block;
    overflow: hidden;
    background: url(../images/information_footer_bg.jpg) repeat-x bottom center;
    text-align: center;
    font-size: 12px;
    line-height: 59px;
    color: #fff;
}

Now notice that the body color is set to #696969 with white as the background color and a horizontally repeating background image bg.jpg font size is set to 12px, line height to 17px, font set to Verdana with zero padding. Then the links text decoration is set to none so that the links aren’t underlined in normal link state. Now the header height is set to 101px with overflow hidden to hide extra content. Now look at the header style and see that it has a top padding of 30px to maintain a space between header and slide show content, height is set to 475px, with overflow set to hidden and a background image message_bg.png aligned horizontally to center and vertically at 348px. You’ll notice that there’s no style for the services section and that’s because it doesn’t have any special styles to be that will be applied. Now let’s look at information style, notice that the width is set to 100% to fill browsers horizontal space, with a fixed height, overflow set to hidden and a horizontally repeating background image.

Finally, the footer section is going to be styled here entirely and that’s because it has only one copyright sentence. The width is set to 100% to fill browsers horizontal space, with 59px height, hidden overflow, a background image with the same settings as we used in the information section the only change is that its aligned to bottom, text is aligned to center, with 12px font size, white font color and 59px line height similar to footer height value so that the text is aligned vertically to center. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header

Now we need to add the logo and menu items, here’s the HTML for the header section.

    <div class="header container_12">
        <div class="grid_4">
            <h1>
                <a href="#" title="DesignFolio">DezignFolio</a>
            </h1>
        </div>
        <div class="grid_8">
            <a href="#" title="Home" class="home active">Home</a>
            <a href="#" title="About Us" class="about">About Us</a>
            <a href="#" title="Services" class="services">Services</a>
            <a href="#" title="Blog" class="blog">Blog</a>
            <a href="#" title="Contact" class="contact">Contact</a>
        </div>
    </div>

Notice that we added two divisions with a “grid_4″ and “grid_8″ classes, inside the “grid_4″ division I added the logo content and an <h1> with a link inside it. Next I added links for the menu items each with a unique class name which will help us in styling each menu item inside the “grid_8″ division. Now lets add the CSS for the header content.

.header {
    height: 101px;
    overflow: hidden;
}

    .header .grid_4 h1 a {
        text-indent: -10000px;
        display: block;
        width: 234px;
        height: 45px;
        background: url(../images/logo_menu_bg.png) no-repeat;
        background-position: 0 -38px;
        margin: 36px 0 0 0;
    }

    .header .grid_8 a {
        text-indent: -10000px;
        display: block;
        height: 36px;
        background: url(../images/logo_menu_bg.png) no-repeat;
        margin: 33px 30px 0 0;
        float: left;
    }

        .header .grid_8 a.home {
            background-position: -264px -11px;
            width: 35px;
            margin-left: 250px;
        }

            .header .grid_8 a.home:hover, .header .grid_8 a.home.active {
                background-position: -264px -56px;
            }

        .header .grid_8 a.about {
            background-position: -329px -11px;
            width: 63px;
        }

            .header .grid_8 a.about:hover, .header .grid_8 a.about.active {
                background-position: -329px -56px;
            }

        .header .grid_8 a.services {
            background-position: -422px -11px;
            width: 61px;
        }

            .header .grid_8 a.services:hover, .header .grid_8 a.services.active {
                background-position: -422px -56px;
            }

        .header .grid_8 a.blog {
            background-position: -513px -11px;
            width: 33px;
        }

            .header .grid_8 a.blog:hover, .header .grid_8 a.blog.active {
                background-position: -513px -56px;
            }

        .header .grid_8 a.contact {
            background-position: -572px -11px;
            width: 57px;
            margin-right: 0px;
        }

            .header .grid_8 a.contact:hover, .header .grid_8 a.contact.active {
                background-position: -572px -56px;
            }

Now in styling our header content we are going to use a single image that will contain both the logo image and menu items normal state, hover and active state images. We are using a CSS technique called CSS Sprites which allows us to choose what to show from this single image using CSS background position properties, and that’s why we added a unique class name for each menu item. The image used in the CSS Sprites is “logo_menu_bg.jpg”, now I start by styling the logo link by setting text indentation to -10000px which allows the text to be available in the HTML but it is hidden when viewed in browsers and this has some SEO benefits, a fixed height and width to match the size of the logo image, a top margin of 35px for a space above the logo, a background image with no repeat and then we set the background image position to 0px horizontally and -38px vertically.

Now we move to style the menu items by setting common styles for all menu item links with a text indentation of -10000px to hide the text, a fixed height,  a top margin to make a space above menu items, a right margin to make the space between menu items, a float to left and finally use the same background image for all menu items with no repeat. After we set the common styles for menu items we take each unique class name and style the normal, hover and active states of the link with background position, fixed width. Finally, you should only notice that the first menu item “.home” with a left margin of 250px to make the distance between the logo and the menu items. The result should be as the image below.

Step 5 – Adding Slide Show Content, Style and Javascript

Now, we are going to use an already implemented solution for the slide show script, the script is jQuery Scrollable. I modified it to match what we need here as for style and layout, unfortunately I can’t walk you through every bit of the process for modifying the script and the styles because I would need a full tutorial for this part alone. I am going to tell you what to include in order to make this work. First, here’s the HTML for the slide show content.

<div class="<span class=">slideshow"></div>
        <!-- root element for everything -->
        <div id="scroll">
            <!-- <span class="hiddenSpellError" pre="">scrollable</span> items -->

<div style="left: <span class=;">-1920px;" id="tools"></div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
            </div>
            <!-- required for IE6/IE7 -->
            <br clear="all" />
            <!-- thumbnails -->
            <div id="thumbs" class="t">
                <a id="<span class=">t0" class="active">Nunc vulputate</a>
                    <br />
                    tristique nisl quis conse
                <!-- <span class="hiddenSpellError" pre="">scrollable</span> navigator root element -->
                <div class="navi">
                    <a style="display: none;"></a><a id="<span class=">t1">Class aptent</a>
                        <br />
                        Vestibulum tempus orc <a id="<span class=">t2">Lorem ipsum</a>
                            <br />
                            Curabitur pretium vehicula <a id="t3">Cum sociis nat</a>
                                <br />
                                Aenean nec libero <a id="t4">Maecenas pulvinar dignissim</a>
                                    <br />
                                    Vestibulum posuere varius magna
                </div>
            </div>
            <div class="navigation_buttons">
                <a class="prev">Previous</a> <a class="next">Next</a>
            </div>
        </div>
        <div class="message container_12">
            <div class="grid_12">
                <div>
                    Hi we are Dezign Folio, orbi pulvinar, velit vel pulvinar vehicula, nisl purus iaculis orci, condimentum pharetra ligula libero ac sem.
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

You’ll notice a division with an ID parameter “scroll” this will hold all sliding content, inside it is three main divisions a division with ID parameter “tools”, a division with ID parameter “thumbs” and a third division with a class name “navigation_buttons”. The first division holds the slides as divisions with class name “tool” each with the content you want inside it, the thumbs division holds the thumbnails or tabs for the slides and it should equal the number of slides and the last division holds the content for the next and previous buttons or links.

After the slide show slides, I added an extra division which will hold the site welcome message with a class name “message container_12″ with a single division inside it that has the message text. Now let’s add the CSS style for the slide show content and script.

.slideshow {
    padding: 30px 0 0 0;
    height: 475px;
    overflow: hidden;
    background: url(../images/message_bg.png) no-repeat;
    background-position: center 348px;
}

    .slideshow .message {
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        text-shadow: 0px -1px 0 #000;
        margin-top: 30px;
    }

        .slideshow .message .grid_12 div {
            padding: 0 78px 0 78px;
        }

            .slideshow .message .grid_12 div span {
                color: #f3ff00;
            }

/*------ SlideShow Script Styles ------*/
#scroll {
    position: relative;
	height: 316px;
	overflow: hidden;
	border: 0px none;
    width: 960px;
	padding: 0;
    margin: 0 auto;
    background: url(../images/slideshow_bg.jpg) repeat-x top center;
}

#tools {
	width: 9999em;
	position: absolute;
	height: 258px;
}

.tool {
	float: left;
	width: 960px;
	height: 258px;
	text-align: left;
    overflow: hidden;
}

    .tool img {
        float: right;
    }

.details {
	float: left;
    color: #252525;
    width: 350px;
    margin: 33px 0 0 70px
}

    .details h2 {
        font-family: Verdana;
        font-size: 24px;
        line-height: 28px;
        font-weight: normal;
        margin: 0 0 40px 0;
    }

    .details p {
        font-family: Verdana;
        font-size: 12px;
        line-height: 18px;
        font-weight: normal;
    }

#thumbs {
	height: 60px;
	position: absolute;
	top: 258px;
	width: 960px;
	left: 0px;
    overflow: hidden;
    background: url(../images/thumbs_bg.jpg) repeat-x top center;
}

.navi {
    width: 960px;
    height: 58px;
}

.t {
	padding: 0 !important;
}

    .t a {
	    display: block;
	    float: left;
	    height: 34px;
	    cursor: pointer;
        border-left: 1px solid #b9b9b9;
        border-right: 1px solid #fff;
        border-top: 1px solid #b9b9b9;
        border-bottom: 1px solid #b9b9b9;
        font-family: Arial;
        font-size: 18px;
        line-height: 20px;
        padding: 8px 15px 14px 10px;
        color: #252525;
    }

        .t a span {
            font-size: 12px;
            line-height: 14px;
        }

    .t a.active {
	    cursor: default !important;
        background: url(../images/thumbs_bg_h.jpg) repeat-x top center;
        color: #fff;
        border-left: 1px solid #2d2d2d;
        border-right: 1px solid #2d2d2d;
        border-top: 1px solid #2d2d2d;
        border-bottom: 1px solid #2d2d2d;
    }

    t. a:hover {
        background: url(../images/thumbs_bg_h.jpg) repeat-x top center;
        color: #fff;
        border-left: 1px solid #2d2d2d;
        border-right: 1px solid #2d2d2d;
        border-top: 1px solid #2d2d2d;
        border-bottom: 1px solid #2d2d2d;
    }

#t0 	{ width: 145px; }

#t1		{ width: 145px; }

#t2		{ width: 145px; }

#t3		{ width: 145px; }

#t4		{ width: 245px; }

.navigation_buttons {
    width: 960px;
    height: 75px;
    position: absolute;
    top: 102px;
}

    .navigation_buttons .prev {
        float: left;
        background: url(../images/prev.png) no-repeat center center;
        height: 75px;
        width: 36px;
        border: 0px none;
        text-indent: -10000px;
        cursor: pointer;
    }

    .navigation_buttons .next {
        float: right;
        background: url(../images/next.png) no-repeat center center;
        height: 75px;
        width: 36px;
        border: 0px none;
        text-indent: -10000px;
        cursor: pointer;
        margin: 0 -1px 0 0;
    }
/*------ End of SlideShow Script Styles ------*/

The CSS styles included in the comments is the original styles from the slider script, I did however modify it a bit by changing some values such as width, height, padding, margin and background images to make it match our layout design. The message division style has a white text color, 18px font size, 24px line height, center aligned text, a text shadow and a top margin. The inner division has a left and right padding values with the <span> element having a yellow text color.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DezignFolio</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/tut_style.css" rel="stylesheet" media="all" />
    <script type="text/<span class="><!--mce:0--></script>
</head>

Finally, we need to add the Javascript code that will allow the slide show to work on our layout. You should add this script just before the closing tag of the body. Here’s the Javascript.

    <script type="text/javascript">
        // initialize scrollable and return the programming API
        var api = $("#scroll").scrollable({
            items: '#tools'

            // use the navigator plugin
        }).navigator().data("scrollable");

        // this callback does the special handling of our "intro page"
        api.onBeforeSeek(function (e, i) {

            // when on the first item: hide the intro
            if (i) {
                $("#intro").fadeOut("slow");

                // dirty hack for IE7-. cannot explain
                if ($.browser.msie && $.browser.version < 8) {
                    $("#intro").hide();
                }

                // otherwise show the intro
            } else {
                $("#intro").fadeIn(1000);
            }

            // toggle activity for the intro thumbnail
            $("#t0").toggleClass("active", i == 0);
        });

        // a dedicated click event for the intro thumbnail
        $("#t0").click(function () {

            // seek to the beginning (the hidden first item)
            $("#scroll").scrollable().begin();

        });

    </script>

Now our layout should look like this.

Step 6 – Adding Services Content

Now let’s add the Services section content. Here’s the HTML content.

    <div class="services container_12">
        <div class="grid_4">
            <h2>
                <img src="images/service_icon_1.png" alt="" />
                <strong>Vivamus</strong> venenatis?
                <br />
                Cras sed ipsum quis nisi pellentesque
            </h2>
            <p>
                Nulla facilisi. Vestibulum metus massa, egestas et porttitor et, venenatis sed felis. Donec elit dolor, placerat eget interdum ac, euismod sit amet tellus. Morbi sit amet hendre- rit ante.
            </p>
        </div>
        <div class="grid_4">
            <h2>
                <img src="images/service_icon_2.png" alt="" />
                <strong>Phasellus</strong> consectetur?
                <br />
                <span>Maecenas pretium diam venenatis</span>
            </h2>
            <p>
                Sed consequat, nisi nec tincidunt feugiat, turpis diam dapibus magna, eget pulvinar lorem nulla nec magna. ed fermentum massa quis nisl condimentum.
            </p>
        </div>
        <div class="grid_4">
            <h2>
                <img src="images/service_icon_3.png" alt="" />
                <strong>Lorem</strong> ipsum dolor?
                <br />
                <span>Sed fermentum massa quis commodo</span>
            </h2>
            <p>
                Vestibulum commodo aliquam condimen- tum. In a libero luctus purus ornare laoreet. Etiam libero nulla, sodales quis tempus posuere, dictum in eros. Nulla facilisi. Vivamus lacinia lacinia lacinia. Nullam vel blandit odio.
            </p>
        </div>
        <div class="clear"></div>
    </div>

Notice that we have three equal sections which means that we need to use three “grid_4″ divisions. Each division has an <h2> tag that includes an image, a title text and text included in a <span> tag and a paragraph as service description. Finally, there’s a division with “clear” class attribute to clear all floated elements. Now let’s add the CSS style for services section.

    .services h2 {
        font-family: Myriad Pro;
        font-size: 23px;
        font-weight: normal;
        line-height: 30px;
        color: #0b070b;
        margin: 0 0 30px 0;
    }

    .services h2 img {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        overflow: hidden;
        margin: 0 12px 0 0;
    }

    .services h2 span {
        font-size: 14px;
        line-height: 16px;
    }

    .services .grid_4 p {
        text-align: justify;
        text-indent: 38px;
        margin: 0 0 56px 0;
    }

We styled the header element by setting font family to Myriad Pro, font size to 23px, normal font weight, line height to 30px, font color to #0b070b and a bottom margin to 30px to make a space between the header and the paragraphs. Now we style the image inside the header or the service icon by setting float to left, a fixed height and width to match icon dimensions, overflow to hidden and a right margin of 12px for the space between image and text. Then I styled the <span> element inside the header tag to have a smaller font size and line height. Finally, I styled the paragraph and set text alignment to justify, text indent to 38px to make the first line indentation and a bottom margin of 56px to represent the space under the paragraphs. Now our layout should look like this.

Step 7 – Adding Information Content

Now let’s add the HTML content for the Information section.

    <div class="information">
        <div class="container_12">
            <div class="grid_4">

<h2>Donec posuere mi eget justo</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id auctor mauris. Pellentesque at quam non massa lobortis sagittis. Donec nisl sapien, eleifend ut bibendum nec, tristique sit amet tortor.
                </p>
                <p>
                    Etiam a quam metus. Fusce luctus adipiscing mauris, id varius metus feugiat quis. Sed mi nisl, euismod eget facilisis id, pulvinar tincidunt lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel faucibus ligula. Etiam
                </p>
            </div>
            <div class="grid_4">

<h2>Curabitur porttitor volutpat</h2>
                <p>
                    Morbi rutrum, risus et iaculis feugiat, urna est mollis nulla, ut ullamcorper lacus mauris et purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi tortor, consectetur at interdum vel, viverra eget orci. In at elementum eros.
                </p>
            </div>
            <div class="grid_4">

<h2>Maecenas luctus pharetra</h2>
                <div class="subscribe">
                    <input type="text" />
                    <input type="submit" />
                </div>
                <p>
                    Curabitur adipiscing, velit nec fermentum tempus, lorem sem aliquam ligula, id dignissim metus lectus a magna.
                </p>
            </div>
            <div class="clear"></div>
        </div>
    </div>

In the information section we are using three“grid_4″ divisions the same as we used in the services section. Now each division contains a <h2> and paragraphs with the exception of the third and last divisions which includes also division with a “subscribe” class name which includes two input tags with type “text” and “submit”. Now let’s add the CSS styles for Information section.

.information {
    width: 100%;
    height: 318px;
    display: block;
    overflow: hidden;
    background: url(../images/information_footer_bg.jpg) repeat-x top center;
}

    .information .container_12 {
        padding: 36px 0 30px 0;
    }

    .information .grid_4 h2 {
        font-family: Myriad Pro;
        font-size: 18px;
        font-weight: normal;
        line-height: 20px;
        color: #0b070b;
        margin: 0 0 30px 0;
    }

    .information .grid_4 p {
        text-align: justify;
        text-indent: 38px;
    }

    .information .grid_4 .subscribe {
        display: block;
        height: 37px;
        width: 299px;
        background: url(../images/subscribe.png) no-repeat top center;
        overflow: hidden;
        margin: 0 0 15px 0;
    }

        .information .grid_4 .subscribe input[type=text] {
            background: transparent;
            border: 0px none;
            line-height: 30px;
            height: 30px;
            width: 210px;
            margin: 5px 0 0 5px;
            float: left;
        }

        .information .grid_4 .subscribe input[type=submit] {
            background: transparent;
            border: 0px none;
            text-indent: -10000px;
            height: 31px;
            width: 60px;
            float: right;
            cursor: pointer;
            padding: 0px;
            margin: 0 11px 0 0;
        }

First we style “container_12″ to have a fixed top and bottom padding, then we style h2 with Myriad Pro as font family, 18px font size, normal font weight, 20px line height, text color of #0b070b and a bottom margin to make space between h2 and paragraphs under it. Now we style the paragraphs with a justified text alignment  and first line indentation of 38px.

Finally, we move to style the subscribe text field and button. The subscribe division has a fixed height and width, a background image with no repeat which has the image for the text field and the button, overflow set to hidden and a bottom margin of 15px. Now we style the text field by using this “.information .grid_4 .subscribe input[type=text]” and set background to transparent because all text field have a white background by default, no border, a line height equal to height so that text is aligned to center vertically, a fixed width, float to left and a top and left margin. Now we style the button by using “.information .grid_4 .subscribe input[type=submit]” and set background to transparent, no border,  and a text indentation of -10000px to hide button text, a fixed height and width, a float to the right, set cursor to pointer because submit buttons has a normal pointer by default, zero padding and a right margin of 11px.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). If there was a part of this tutorial you didn’t understand, or you have a better technique, please be kind and say something in the comments below.

I’ll be presenting free CSS/HTML templates that you want to consider in your next project but be sure to read terms.

1. Blue Jeans

Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture.

( Demo | Download )

2. Portfolio

CSS Heaven Portfolio is yet another free HTML 5 and CSS based website template suitable for businesses. This template has a jQuery slide show in the home page header for displaying your latest work, featured contents or can also be used to tell your visitor what your web site is all about. All the fonts used for the template are included in a folder.

( Demo | Download )

3. High Five

The style elements are in the CSS including styles for Blog, Comment Templates etc.

( Demo | Download )

4. RS 18

This is designed mainly for business because of the blue color that looks professional.

( Demo| Download )

5. Dandoot

DangDoot is a WordPress e-commerce theme that it is suitable mostly for major/indie music recording companies, bands, musicians, music products affiliates, music event organizers or simply online music stores.

( Demo | Download )

6. Bamboo

Bamboo is a free CSS Template suitable for small business websites and blogs.

( Demo| Download )

7. Acallia

If your into art, photography or anything related to designs it will fit on you.

( Demo | Download )

8.Reinvent

One column layout that has ac lean and cool typography with minimal image design.

( Demo | Download )

9. Alexx C

Elegant and professional looking design that match with cool icons.

( Demo | Download )

10. RealOne

Real 1 is a free CSS Template suitable for Real Estate Templates.

( Demo | Download )

11.The Radio Station

It is really for radio station website.

( Demo | Download )

12. CSS Heaven 1

A contemporary look that is suited for design and style business.

( Demo | Download )

13. Turrion

Business looking template that will lead your visitor to a right track.

( Demo | Download )

14. Zen Design

It is a good template for article, blog or site that has a every now and then updates.

( Demo | Download )

15. Urban Gear

Great free html template for on-line shop dedicated to the urban fashion industry. Easily replace the slides or just remove the slider area and use this template as a start point for your on line business.

( Demo | Download )

16. ubly

Colorful, cheek style suited for blog sites.

( Demo | Download )

17. beSMART

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

( Demo | Download )

18. CSS Heaven 2

Suitable for business site.

( Demo | Download )

19. Easy Slide

Easy Slide is a simple but cool css template based on the famous Coda Slider.

( Demo | Download )

20. StudioClick

Studio Click is a simple, well-structured portfolio theme that focuses on one thing: gorgeous photos, screenshots, and content.

( Demo | Download )

21. BizGroup

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance especially for solution business.

( Demo | Download )

22. Photo Pro css

Photo Pro is a simple css template for portfolios and photo sites and it’s very easy to edit.

( Demo | Download )

23. Treasure Hunter

This treasure hunting template is suited for photo galleries and blogs.

( Demo | Download )

24. Shop Around

Great free html template for on-line shop. Use it as a start point for your on line business. The template can be easily implemented in many open source eCommerce platforms.

( Demo | Download )

25.  Free Nova Studio

Nova Studio is a multi-purpose portfolio theme featuring a rich home page with a slider, a “From the Blog” widget, and multiple ways to beautifully display your work. A intuitive, unique design will make your site stand out from the crowd and solid markup will make it easy to edit.

( Demo | Download )

26. Mondays

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

( Demo | Download )

27. OWMX 1

Stylish and cool in the eyes. Great for professional businesses.

( Demo | Download )

28. Simple Solution

Clean and stylish that suits for businesses.

( Demo | Download )

29. Classic Luxury

Classic Luxury is great for portfolios and personal photo sites, and can be converted easily to a CMS theme as needed (such as Drupal or WordPress).

( Demo | Download )

30. Outliers

Dark corporate CSS/XHTML template ready to showcase your ideas.

( Demo | Download )

31. Portfolio Template

This is a clean and professional looking template for small portfolios or business sites. Very easy to edit if you have a basic understanding of html and css.

( Demo | Download )

32. Market  Leader

Light corporate CSS/XHTML template ready suits to showcase ideas to your clients.

( Demo | Download )

33. Clean-White

This is a simple but beautiful css template with lots of whitespace and a professional look. Perfect as a frontpage for small businesses or photographers.

( Demo | Download )

34. Ninja Assasin

Impress visitors to your site with a high-quality one-page portfolio site inspired by the Japanese ninja culture. The template is ready to use and will showcase your work in a unique fashion.

( Demo | Download )

35. Kelontong

Kelontong WordPress e-commerce theme is on board to simplify your life for our own online store now.

( Demo | Download )

36.  Small Business

This is suitable for small scale business websites that don’t need a lot of pages.

( Demo | Download )

37. RS 19

Stylish template with the combination of white and colorful taste.  It uses box shadows and text shadows techniques.

( Demo | Download )

38. Fruit Mix

As what the title suggest, good for healthy lifestyle website.

( Demo | Download )

39. School Education Template

Great for your school website. Publish school activities and announcements.

( Demo | Download )

40. Law Attorney

If you have a law firm, this is well suited for you.

( Demo | Download )

41. Film Blog

For film lover, this is a great template that will let you post your videos.

( Demo | Download )

42. Electronics

Cool coffee color that match on your electronics or appliances website.

( Demo | Download )

Free CSS/ HTML are really good to work on especially when you are about to start your new website and need to find something that will suit your business. Just try to explore more and learn about the free templates so that you can maximize the use of it.