20 Email Design Best Practices and Resources for Beginners

Matthew Kirk — Tue, 17 Nov 2009 19:39:24 +0000

Even for experience designers, building email newsletters isn’t easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn’t work as it should in every email clients. Styles don’t display, images aren’t visible, etc.

This is where these twenty best practices come in handy.

1: Keep the Design Simple

Emails are not like complex website designs; they should be nicely designed, but somewhat basic. Try basing your designs on a main header image followed by the main content.

The cleaner the design, the easier it will be to code, and the less chance of any abnormalities happening between various browsers and email clients.

2: Use Tables

Email clients live in the past, so all emails must be built using tables for layout. Some CSS styling can be used, but we will discuss this later.

Not Accepted

	
		Header 1
	
	
		Lorem ipsum dolor sit amet.
	f
	
		Sign off and footer

Accepted

	
		
			Header 1
		
		
			Lorem ipsum dolor sit amet.
		
		
			Sign off and footer

3: Have Web Browsers at the Ready

Make sure you have as many web browsers as possible available to you. Who knows who will view your email, and what he or she will be using to view it!

At the very least, use these:

Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Mozilla Firefox 3
Apple Safari 3
Google Chrome

4: Sign Up for all the Major Email Clients

Google Mail (http://mail.google.com)
Hotmail/Live Mail (http://www.hotmail.com)
Yahoo Mail (http://mail.yahoo.com)
AOL Mail (http://webmail.aol.com)

Please note that they’re are other, more convenient services that can be used instead; however, many of these charge monthly fees. For more information, review Litmusapp.

5: Use Inline Styles

If this were the website world, every developer on the planet would say, "do not use inline styles, create a class for it". Unfortunately, in an email, this is not possible, as the email clients will strip them out, and we don't want that. So if anything needs to be styled, use inline styles.

Elements like font type and size can be used within the

tag, but individual styles should be placed on

Will Work

14: Hotmail Bug Fixes

Over the past couple of years, Microsoft has vastly improved the Hotmail/Live service. But… one huge bug you will come across is the strange padding added to all images. Why do they do this? Who knows? All I know is, there is a wonderfully easy fix.

On every image tag, simply add display:block, as shown above.

15: Encode All Characters

Although we don’t technically have to encode characters, it’s best we do.

When viewing emails in various email clients, we cannot guarantee the charset every website is using, so encoding characters allows us to be certain that all characters are being displayed as they should.

May Work

	"Some sample code - with special characters"

Will Definitely Work

	"Some sample code - with special characters"

16: JavaScript = Junk Email

You cannot, unfortunately, include any type of JavaScript. So no fancy pop-ups or auto-scrolling emails please! If you do decide to include it anyway, your email may be sent to the junk folder. Email clients will see you as a threat. And this is obviously not good. So please stick to plain old HTML.

17: Give the User a Way Out

When sending general newsletters to various clients/customers, although you have a lovely designed and developed email, that user may not want your email (hard to take, I know). Always allow them a way out, by adding an unsubscribe link to the bottom of the email, like so:

If you would like to unsubscribe from this newsletter, simply click here

18: Users Want Options

Some users may be utilizing a very basic email client – maybe they’re checking there webmail at work or on their phones. Images and complex designs may not be best for these types of clients,. Consider, at the top of the email newsletter, having a link which points to the email on a web server somewhere, so the user can view the email in all its glory.

Cannot view this email? View it here

19: Use a spacer.gif

Some browsers (Internet Explorer), don't get on with empty

Will Work

20: Send Tests

This is the most important aspect of email design; sending test emails allows you to view them in all browsers and email clients, looking for any bugs and odd variations.

I have setup a way to allow me to send test, by all means, use mine!

Username: test
Password: nettuts

For more comprehensive testing, use a service like CampaignMonitor or LitmusApp.

Other Helpful Resources

General Email Marketing info:

Email Inspiration:

Services

Email Design Tools

Premium Email Templates

ThemeForest Email Templates

9 Most Common IE Bugs and How to Fix Them

Siddharth — Mon, 16 Nov 2009 10:30:14 +0000

Internet Explorer – the bane of most web developers’ existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn’t really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let’s get started.

1. Centering a Layout

Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.

Consider the Following Code:

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

The output you’d expect:

But what IE actually gives you:

This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.

The Fix

The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

2. Staircase Effect

Almost every web developer uses lists to create his navigation. Usually, you create the container element, create some links inside and then float the anchors in the direction he wants and calls it a day. Usually. IE though decides to make it a lot more complicated. Peruse through the following code:

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

A standard compliant browser renders it like so:

And the IE screen shot:

Not a particularly pleasing navigation if you ask me. Fortunately, there are 2 fixes you can try.

Fix #1

The easiest way to combat this is to float the li elements themselves instead of the anchor elements. Just add this and you should be done.

ul li {
	float: left;
}

Fix #2

The second way is to apply display: inline to the enclosing li element. In addition to fixing this bug, it also fixes the double margin bug mentioned below. Purists may not like placing block elements inside inline elements though.

ul li {
	display: inline
}

3. Double Margin on Floated Elements

This bug is probably among the first ones a web developer starting out will run into and is specific to Internet Explorer 6 and below. Triggering it is as simple as floating an element and then applying a margin in the direction it has been floated. And voila! The margin will be doubled in the rendered output. Not really something you’d look forward to while creating a pixel perfect layout.

Consider this code:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

On standards compliant browsers, this is how it looks:

But here is how IE 6 decides to render it:

The Fix

The fix for this specific bug is to apply display: inline to the floated element and everything works as it is supposed to. Our previous code now changes to:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

4. Inability to Have Elements with Small Heights

As part of creating a layout, you may need to create elements with very small heights as custom borders for elements. Usually, you’ll just have to add height: XXpx to the style’s declarations and you should be done. Or so you thought. Check the page in IE and you’ll probably do a double take.

As an example, look at the following code:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
}

And the output is just as expected: A 2 px element with a 1 px border.

And in IE:

Fix #1

The cause of this bug is pretty simple: IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	font-size: 0;
}

Fix #2

The next best way to deal with this bug is to apply overflow: hidden to the element so it collapses to the intended height.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	overflow: hidden
}

5. Auto Overflow and Relatively Positioned Items

This bug rears its ugly head when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside. Let me demonstrate. Look the following code:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

And the expected output:

And IE’s output:

The Fix

The easiest way to fix this annoying bug is to just position the parent element relatively too.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

6. Fixing the Broken Box Model

Internet Explorer’s misinterpretation of the box model is perhaps its unforgivable mistake. IE 6 in semi-standards compliant mode sidesteps this but this issue can still be triggered by quirks mode.

Two div elements. One with the fix applied and one without. The difference in the width and height is the sum of the paddings applied on each side.

The Fix

I am sure the quandary with the box model needs neither explanation nor demonstration so I’ll just give you the fix.

The trick is to set the width normally for all standards compliant browsers, target IE5/6 alone and then feed it the corrected width. This is how you’d usually go on about:

#element{
	width: 400px;
    	height: 150px;
	padding: 50px;
}

This now changes to:

#element {
    width: 400px;
    height: 150px;
   \height: 250px;
   \width: 500px
}

Essentially, you add the padding to the original width and feed it to IE 6. The fix targets IE 6 in quirks mode alone so you need not worry about IE 6 in normal mode messing things up.

7. Setting a Minimum Width and Height

Setting an minimum height to an element is absolutely imperative when trying to convert a beautiful design into a pixel perfect design. Unfortunately, IE completely ignores the min-height property instead taking the height declared as the minimum height.

Fix #1

The fix is a hack created by Dustin Diaz. It utilizes the !important declaration to make it work. The snippet looks like so:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Fix #2

The second way is to take advantage of the fact that IE can’t parse child selectors.

#element {
    min-height: 150px;
    height: 150px;
}

html>body #element {
	height: auto;
}

8. Floated Layout Misbehaving

One of the important concepts of building table-less layouts using CSS is floating elements. In most cases, IE6 handles this with aplomb but in certain cases it fumbles. When faced with unbreakable content or elements whose width exceeds its parent’s width, it causes havoc with the layouts. Let me show you.

Consider this piece of code:


	http://net.tutsplus.com/

#element, #anotherelement{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 100px;
	height: 150px;
	margin: 30px;
	padding: 10px;
	float: left;
}

#container{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: auto;
}

The expected output as viewed on a standards compliant browser:

In IE:

As you can see, the first div expands itself to fit the content which ultimately breaks the layout.

The Fix

There is no elegant fix for this bug. The only way to save the layout is to apply overflow: hidden to the element but at the cost of clipping the unbreakable content. The layout will be saved but the extra content won’t.

#element{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: hidden;
}

9. Space Between List Items

IE 6 adds vertical spacing even none is specified in specific cases. Let’s look at the code first.


 Link 1
 Link 2
 Link 3

ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

What it should look like:

What IE gives us:

Fortunately, there are a plethora of fixes you could try.

Fix #1

The easiest way out is to just define a width for the anchor tags and voila! everything renders as it should. Declaring a width triggers the element’s IE specific hasLayout property. You could instead define a height if you want to.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Fix #2

The next method is to just float the anchor left and then clearing it.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Fix #3

The third method is to add display: inline to the enclosing li element. This also fixes the double margin bug as noted above.

li {
	display: inline;
}

Conclusion

And there you have it: the nine most common IE rendering bugs, and how to squash them. Hopefully this has saved you some blood, sweat and tears while debugging your next creation. I’ll be watching the comments section frequently; so chime in here if you are having difficulties implementing the fixes noted here.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Learn how to Create a Retro Animated Flip-Down Clock

Alexandru Pitea — Wed, 21 Oct 2009 18:48:38 +0000

In this tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, I tried to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website, so let’s get started!

Tutorial Details

Program: Mootools
Difficulty: Easy
Estimated Completion Time: ~ 1 hour

Step 1: The Main Concept

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes. Here is the basic scheme.

Step 2: Photoshop

First, we must create our images.

Select the “Rounded Ractangle Tool” (U), set the radius to 10px and the color to #0a0a0a and create a 126px by 126px ractangle, you can change the dimension according to your needs, just keep them an even number. Resterize the shape by going to Layer > Rasterize > Shape or Right Click > Rasterize Layer. Now we want to create that "gap" between the two parts and make the upper background a little bit lighter. Place a guide line at the horizontal half of our pad, then select the hole pad (Ctrl + Click on the layer icon) and with the Rectangular Marquee Tool (M) select the upper half in intersect mode (hold Shift + Alt). Now we just have to fill the selection with #121212 using the Paint Bucket Tool (G). Next trace a 2px, black line using our guide line as help, on a separate layer.

Now we have to add the digits. Using the Type Tool (T) make a new layer with the digits and place it under the line we’ve created earlier.

Just add a little overlay on the numbers to make them look a bit more realistic. Create a new layer above the digits layer, select the lower part of the pad and fill with #b8b8b8, then fill the upper part with #d7d7d7. Now set the blending mode to “Multiply”.

Ok. Now that we have our completed pad, we have to split it up. The main idea is to split the right digit from the left one, so instead of having 60 images for the minutes and seconds groups, you end up with 20 images that we will use for both groups. So basicly we have to split our pad into 4 images with the same dimensions. I used the Crop Tool (C) for this job.

After you crop the pad, change the digit and save each time as a separate .png so you end up with all the files you need ( numbers from 0 – 9 ). Repeat this step for all parts of the pad. Note that for the hours pad, you don’t separate the digits, you have just the upper and lower part. In the end here is our folder structure ("Double" for minutes and seconds, "Single" for hours):

Step 3: HTML Markup

Now that we have our files ready we can start coding. First of all, we need two containers for our images, one for the "upperPart" of our clock and one for the "lowerPart".

Next we add the images. Here is a scheme with the id’s I’ve used:

I had to use a transparent spacer image that is 1px wide and the same hight as the other images in order to keep the containers from shrinking when the pads flip. Also, there must not be any space between the images from the same group (e.g. "minutesUpLeft" and "minutesUpRight").

Ok. These will be the front pads of our clock that will flip down, now we have to set up the back ones, so when the front pads flip, the new digits can be seen on the them. We will wrap what we’ve done so far in a div and just duplicate it above itself, adding to each image id the word "Back" and changing to the appropriate source file.

Here is the complete .html file with reference to the stylesheet and the javascript file "animate.js" in which we will create the animation.



Create an Animated Flip Down Clock

Step 4: CSS

The main thing we have to do now is to overlap the “front” and “back” divs. First we position the main wrapper where we need it and then give the same absolute position to both containers.

#wrapper{
	position:absolute;
	top: 100px;
	left:400px;
}

#front, #back{
	position:absolute;
	top:0px;
}

Now we need to vertically align the upper part to the bottom and the lower part to the top, so that the pads would look like they’re anchored to the middle of the clock. I added the height and visibility properties for the front parts because we need them for the animation later on.

#upperPart, #upperPartBack{
	vertical-align:bottom;
}

#lowerPart, #lowerPartBack{
	vertical-align:top;
}

#upperPart img{
	position:relative;
	height:63px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerPart img{
	position:relative;
	height:63px;
	vertical-align:top;
	visibility:visible;
}

#lowerPartBack img{
	position:relative;
	vertical-align:top;
}

#upperPartBack img{
	position:relative;
	vertical-align:bottom;
}

Finally all we have to do is to constrain the width of the pads because we want to play around only with their height. By default, if you change one of them, the hole image will be scaled.

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:126px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:63px;
}

Here it is all put together:

body{
	background:#000;
}

#wrapper{
	position:absolute;
	top: 100px;
	left:400px;
}

#front, #back{
	position:absolute;
	top:0px;
}

#upperPart, #upperPartBack{
	vertical-align:bottom;
}

#lowerPart, #lowerPartBack{
	vertical-align:top;
}

#upperPart img{
	position:relative;
	height:63px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerPart img{
	position:relative;
	height:63px;
	vertical-align:top;
	visibility:visible;
}

#lowerPartBack img{
	position:relative;
	vertical-align:top;
}

#upperPartBack img{
	position:relative;
	vertical-align:bottom;
}

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:126px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:63px;
}

Step 5: Creating the Animation

First of all we need some variables to store the time that is shown on the pads. Note: h = hours, m1 = the left minute digit, m2 = the right minute digit, s1 = the left second digit, s2 = the right second digit.

	var h_current = -1;
	var m1_current = -1;
	var m2_current = -1;
	var s1_current = -1;
	var s2_current= -1;

Now we create a function that will run every second and update our clock. First we get the current time and determine the time of day, AM or PM.

function retroClock(){

       now = new Date();
       h = now.getHours();
       m1 = now.getMinutes() / 10;
       m2 = now.getMinutes() % 10;
       s1 = now.getSeconds() / 10;
       s2 = now.getSeconds() % 10;
       if(h < 12)
          ap = "AM";
       else{
          if( h == 12 )
              ap = "PM";
          else{
              ap = "PM";
              h -= 12; }
       }

Then we compare it to the time shown on the pads and change which group is different. It uses a function called “flip” that I will describe in a minute.

       if( h != h_current){
          flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
          h_current = h;
      }

      if( m2 != m2_current){
          flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
          m2_current = m2;

          flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
          m1_current = m1;
      }

       if (s2 != s2_current){
          flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
          s2_current = s2;

          flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
          s1_current = s1;
      }
}//end retroClock

Now, the flip function. It has a few parameters: upperId, lowerId = the ids of the upper and lower pads that will flip; changeNumber = the new value that will be shown; pathUpper, pathLower = the paths to the source files for the new value. The animation is composed of the following steps:
The front upper pad takes the value of the back one and it’s made visible, overlaing it, while the lower one is also made visible but it’s height is changed to 0px.

function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "63px");
    $(upperId).setStyle("visibility", "visible");

    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");

Now we change the back upper and front lower pad to the new value.

	$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
   $(lowerId).src = pathLower+parseInt(changeNumber)+".png";

Having this setup we can start the actual animation. As I mentioned earlier it consists of reducing the height of the front upper part to 0%, 0px, and increasing the height of the front lower part to 100%, 63px in this case. After the animation is complete, the back lower pad takes the new value and the front pads are make hidden.

    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }				});
                flipLower.start('height', 64);

        }
                        });
    flipUpper.start('height', 0);
}//end flip

The final thing to do is to make our main function run every second.

	setInterval('retroClock()', 1000);;

Here it is all put together.

var h_current = -1;
var m1_current = -1;
var m2_current = -1;
var s1_current = -1;
var s2_current= -1;

function flip (upperId, lowerId, changeNumber, pathUpper, pathLower)
{
    var upperBackId = upperId+"Back";
    $(upperId).src = $(upperBackId).src;
    $(upperId).setStyle("height", "63px");
    $(upperId).setStyle("visibility", "visible");

    $(lowerId).setStyle("height", "0px");
    $(lowerId).setStyle("visibility", "visible");

	$(upperBackId).src = pathUpper+parseInt(changeNumber)+".png";
    $(lowerId).src = pathLower+parseInt(changeNumber)+".png";

    var flipUpper = new Fx.Tween(upperId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
    flipUpper.addEvents({
        'complete': function(){
            var flipLower = new Fx.Tween(lowerId, {duration: 200, transition: Fx.Transitions.Sine.easeInOut});
                flipLower.addEvents({
                    'complete': function(){
                        lowerBackId = lowerId+"Back";
                        $(lowerBackId).src = $(lowerId).src;
                        $(lowerId).setStyle("visibility", "hidden");
                        $(upperId).setStyle("visibility", "hidden");
                    }				});
                flipLower.start('height', 64);

        }
                        });
    flipUpper.start('height', 0);
}//end flip

function retroClock(){

     now = new Date();
     h = now.getHours();
     m1 = now.getMinutes() / 10;
     m2 = now.getMinutes() % 10;
     s1 = now.getSeconds() / 10;
     s2 = now.getSeconds() % 10;
     if(h < 12)
        ap = "AM";
     else{
        if( h == 12 )
            ap = "PM";
        else{
            ap = "PM";
            h -= 12; }
     }

     if( h != h_current){
        flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/');
        h_current = h;
    }

    if( m2 != m2_current){
        flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/');
        m2_current = m2;

        flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/');
        m1_current = m1;
    }

     if (s2 != s2_current){
        flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/');
        s2_current = s2;

        flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/');
        s1_current = s1;
    }
}//end retroClock

setInterval('retroClock()', 1000);

Finished

We are finished! Hope you’ve enjoyed working on this little project, it has a somewhat complex concept, but in the end it is a really neat gadget for your websites. Please do not hesitate to send any suggestions you may have!

CSS: The Very First Steps – New Plus Tutorial

Jeffrey Way — Wed, 07 Oct 2009 18:47:10 +0000

This one is for those who are hoping to take their first steps into web design. This 70 minute Plus video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you’ll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.

Don’t know what CSS stands for? Need help diving into CSS? Never created a website before? If so, this screencast was tailor-made for you! Sign up for a Plus membership!

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at Nettuts+, Psdtuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

Object-Oriented CSS: What, How, and Why

Andrew Burgess — Tue, 29 Sep 2009 11:15:56 +0000

It sounds like an oxymoron, or at least an impossibility, doesn’t it? How can a static language that’s really more like markup than programming be object-oriented? In this tutorial, I’m going to introduce you to the idea of object-oriented CSS, show you how it works, and try to convince you that you should be using it too!

What is Object-Oriented CSS?

Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It’s not a different language: still the same old CSS we all know and love. It’s just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

So why call it object-oriented? Well, according to Wikipedia,

Object-oriented programming (OOP) is a programming paradigm that uses “objects” — data structures consisting of datafields and methods — and their interactions to design applications and computer programs.

If we were to re-write that definition for object-oriented CSS, it might say something like this:

Object-oriented CSS is a coding paradigm that styles “objects” or “modules”—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

This basically means that you have a standard “object” (an HTML structure). Then, you have CSS classes that you apply to objects, which define the design and flow of the object.

Confused? Let’s look a bit of theory.

What is the Theory Behind it?

There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.

I quote Nicole Sullivan, whose brainchild object-oriented CSS is. So how do these two principles play themselves out?

Separating the structure from the skin means that your layout styling and your design styling are separate. One very practical way to do this is to use a grid system; there are many options, or you can create your own. If you’re not using a grid system, you’ll probably just define the structure on the primary object on your page; that’s what we’ll be doing today.

Separating the container from the content means that any object (the container) should be able to adapt itself to accept any content; for example, it shouldn’t need to have an h3 at the top, followed by an unordered list for it to look right. This allows flexibility and reusability, which is paramount.

Why Should I Code This Way?

There are a few good reasons why you would want to write your CSS in an object-oriented way. One of the biggest benefits—and we’ve already mentioned it—is that your CSS will be more reusable. But your stylesheets should also become much smaller. Object-oriented CSS should make it easier to change the design of a site.

Writing your styling this way can also give you peace of mind: it will be much easier to change parts of your site without breaking things. Object-oriented CSS also enables you to change your site consistently.

How do I Practice Object-Oriented CSS?

Well, if you’ve come this far, you’re interested in how exactly you write CSS with an object-oriented mindset. Here we go!

The first step is really prep for the CSS: you have to determine your HTML object. Generally, your object will have a header, a body, and a footer, although the header and footer are optional. Here’s a very basic object.

Before you scream “DIVITIS!” realize that this isn’t as bad as it looks; consider this:

Using HTML5, we now have got an object with semantic meaning and no soup-like characteristics. Actually, this is the object we’ll use today.

If we’re going to write some CSS, we’ll need something to style, so let’s whip up a very basic template: a blog home page, and a single post page. We’ll be using a few HTML5 elements and some CSS3 styling today!

index.htm

Object Oriented CSS

Object Oriented CSS
(really just a bunch of best practices and patterns; not a new language)

Home
Archives
About
Contact Us

September 10, 2009
Check out WorkAwesome!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.

On to the Sidebar

Now that we have the main content area set out, let’s look at the sidebar. We’ve got two objects in the sidebar: an archives list and a recent comments list. To begin, we’ll create a .side-box class for them:

.side-box
  { padding: 20px 80px 20px 40px;
  }
  .side-box:not(:last-child)
    { border-bottom:1px solid #ccc;
    }
    .side-box > header h3
      { margin-bottom:0;
      }
    .side-box > header p
    { text-transform:uppercase;
      font-style:italic;
      font-size:90%;
    }

Again, you should take note that we’re being careful to follow the two rules: we’ve separated the structure from the skin by not setting the height or width; the object flows to fill whatever space it needs to take. And we’ve separated container from content by not making child elements required for proper styling. Yes, I have adjusted the h3 styling, which makes that particular h3 look dependant on the class side-box; in most cases, that’s undesireable, but in this case, I haven’t done too much.

But let’s create an extension for this; however, since we want to do a large visual adjustment, we won’t extent the side-box class directly; we’ll create a new class.

.pop-out > section > *
  { display:block;
    background:#fefefe;
    border:1px solid #474747;
    padding:20px;
    position:relative;
    width: 120%;
    left:20px;
  }

So what does this do? Notice the selector: we are targeting every element directly inside the body of our object; when styling an object, you always apply the class to the object itself. This CSS will “pop” the content out to the right.

“HEY, you set a width! What about separating struture from skin?” I set a width because we are targeting the elements inside the body of our object; since the object has padding, that inner element is a bit narrow by itself. That sounds like an excuse for breaking the rule, but I don’t think I really broke the rule: I set the width as a percentage, which still depends on structure styling further up the cascade.

Here’s what that looks like.

I just told you that you should always apply classes to the top-level objects, and use child selectors to mold the inner elements. But part of object-oriented CSS is being able to mix and match styles easily. It’s quite possible you’ll want to use a similar header on two objects that aren’t really related in any way. It’s ideal to have a collection of header and footer classes that you apply directly to the header or footer of an object. This way, you aren’t adding similar code to multiple non-related classes, but abstracting that away and applying it in the relevent place. Let’s create an abstracted header.

You’ll notice that we gave the header of our recent comments object a class called ‘post-it.’ Let’s create that class now.

.post-it
  { border:1px solid #db5500;
    padding: 10px;
    font-style:italic;
    position:relative;
    background:#f2965c;
    color:#333;
    transform:rotate(356deg);
    -moz-transform:rotate(356deg);
    -webkit-transform:rotate(356deg);
    z-index:10;
    top:10px;
    box-shadow:1px 1px 0px #333;
    -moz-box-shadow:1px 1px 0px #333;
    -webkit-box-shadow:1px 1px 0px #333;
  }

A poor semblance of a post-it note!

It’s important to stress that even though we plan to use this for a header, we haven’t specified that in the selector. If this resembles a common design aspect of our site, we may end up wanting this style for something else; for example, we could extend it with classes that adjust the colour and rotation, and use them on a wall or bulliten board or something similar.

Don’t lock down your selectors; you never know when you’ll want those styles!

Often you’ll want to take it further than just header and footer classes; a component library is a huge part of object-oriented CSS; a basic rule might be this: whenever you want to apply the same style in multiple un-related places, abstract. Of course, you might find after hard coding something into an object that it would be more useful if you could use it elsewhere; don’t be afraid to refactor. It’s always to your benefit.

You’ll see these components in the page header and the recent comments box.

.meta
  { font-size:75%;
    font-style:italic;
  }
.subtitle
  { text-transform:uppercase;
    font-size:90%;
    font-weight:bold;
    letter-spacing:1px;
    text-shadow:1px 1px 0 #fff;
  }

Well, we’re done with our index page; let’s look at a bit more object-oriented-ness on a single post page. Just copy that index page, rename it ‘post.htm’ and swap out the page header and section for this code.

      
        Object Oriented CSS
        (really just a bunch of best practices and patterns; not a new language)
        
          
             Home
             Archives
             About
             Contact Us
          
        
      
      
        
          
            September 10, 2009
            Check out WorkAwesome!
          
          
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
            diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
            imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.
          
          
            
              Digg!
              Share!
              Like!
            
          
        
        
          Comments
          
            
              First-commenter
Sept 10
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
            
            
                  Reply-commenter
Sept 12
                  diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
                
            
              Second-commenter
Sept 10
              tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus 
            
            
              The author
Sept 11
              diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
            
            
              Fourth-commenter
Sept 12
              imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi

Now we can see where some reusability comes in; we can use the post class for the blog posting here; that’s the same post class we used for the home page; because we didn’t specify the structure, but let the object expand to take in whatever we give it, it can handle the whole post.

Comments

Now let’s turn our attention to the comments on this page; comments are a great place to use object-oriented CSS. We’ll start by adding this:

.comment
  { border:1px solid #ccc;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    padding:10px;
    margin:0 0 10px 0;
  }
    .comment > header > p
      { font-weight:bold;
        display:inline;
        margin:0 10px 20px 0;
      }

This alone gives us some psuedo-attractive comments; but we can do more. Our HTML has classes for replies and author comments.

.reply.comment
  { margin-left:80px;
  }
.author.comment
  { color:#ececec;
    background:#474747;
  }

Make sure you don’t have a space between the two class names. This is a bit different from what we did earlier: instead of changing the styling of the comment class, we are actually extending it (So maybe these are the real extended classes).

And the finished comments . . .

And while we’re here, let’s add a comment form to our component library.

.comments-form p
  { padding:5px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  }
.comments-form p:hover
  { background:#ececec;
  }
.comments-form label
  { display:inline-block;
    width:70px;
    vertical-align:top; }
.comments-form label:after
  { content: " : ";
  }
.comments-form input[type=text],
.comments-form button,
.comments-form textarea
  { width:200px;
    border:1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:2px;
  }
.comments-form button[type=submit]
  { margin-left:70px;
  }

This gives us a nice rounded-corner form with a soft hover effect.

I’m kind of torn here; a fundamental concept of object-oriented CSS is the ability to add a class to different elements; but what about this case? This class would basically be useless on anything but a form; should we change the selectors to form.comments-form as a kind of security? What do you think?

Well, that really covers the ideas of object-oriented CSS.

Review the Main Steps

Determine your object.
Set your reset, base elements, and base object styles.
Apply classes to objects and components for the desired look and feel.

I didn’t use the standard message example, but it’s really a great way to get into object-oriented CSS. Try creating an message class that you can apply to different elements, like a paragraph, a list item, or a complete object. Then, extend it with error, warning, and info classes. See how flexible and reuseable you can make it.

Is Object-Oriented CSS Always Useful?

I don’t think the answer to this question is a simple “yes” or “no”; that’s probably because object-oriented CSS isn’t a language, but a collection of patterns and best practices. You may not always want to apply the idea of the standard HTML object, but most of the CSS principles are always valid. If you think about it, you’ll see it’s really about where you want to optimize: you could code you’re HTML minimalistically, with a few ids for handles, and be able to style it easily; but the CSS won’t be reusable, and the site might break later when you come to change things. Or you could write a bit more HTML and optimze the CSS with the principles we’ve looked at in this tutorial.

I’m willing to expand my HTML a bit so that I can write CSS that is reusable, flexible, and DRY. What’s your opinion?

Other Resources

30 CSS Best Practices for Beginners – Basix

Glen Stansberry — Wed, 16 Sep 2009 17:46:08 +0000

CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.

1. Make it Readable

The readability of your CSS is incredibly important, though most people overlook why it’s important. Great readability of your CSS makes it much easier to maintain in the future, as you’ll be able to find elements quicker. Also, you’ll never know who might need to look at your code later on.

When writing CSS, most developers fall into one of two groups.

Group 1: All on one line

.someDiv { background: red; padding: 2em; border: 1px solid black; }

Group 2: Each style gets its own line

.someDiv {
  background: red;
  padding: 2em;
  border: 1px solid black;
}

Both practices are perfectly acceptable, though you’ll generally find that group two despises group one! Just remember – choose the method that looks best TO YOU. That’s all that matters.

2. Keep it Consistent

Along the lines of keeping your code readable is making sure that the CSS is consistent. You should start to develop your own “sub-language” of CSS that allows you to quickly name things. There are certain classes that I create in nearly every theme, and I use the same name each time. For example, I use “.caption-right” to float images which contain a caption to the right.

Think about things like whether or not you’ll use underscores or dashes in your ID’s and class names, and in what cases you’ll use them. When you start creating your own standards for CSS, you’ll become much more proficient.

3. Start with a Framework

Some design purists scoff at the thought of using a CSS framework with each design, but I believe that if someone else has taken the time to maintain a tool that speeds up production, why reinvent the wheel? I know frameworks shouldn’t be used in every instance, but most of the time they can help.

Many designers have their own framework that they have created over time, and that’s a great idea too. It helps keep consistency within the projects.

I disagree. CSS frameworks are fantastic tools…for those who know how to use them.

It’s less a matter of reinventing the wheel, and more a matter of understanding how the wheel works.

If you’re just getting started with CSS, I’d personally recommend that you stay away from these frameworks for at least a year. Otherwise, you’ll only confuse yourself. Learn CSS…then take shortcuts!

4. Use a Reset

Most CSS frameworks have a reset built-in, but if you’re not going to use one then at least consider using a reset. Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers.

The MeyerWeb is a popular reset, along with Yahoo’s developer reset. Or you could always roll your own reset, if that tickles your fancy.

5. Organize the Stylesheet with a Top-down Structure

It always makes sense to lay your stylesheet out in a way that allows you to quickly find parts of your code. I recommend a top-down format that tackles styles as they appear in the source code. So, an example stylesheet might be ordered like this:

Generic classes (body, a, p, h1, etc.)
#header
#nav-menu
#main-content

Don’t forget to comment each section!

/****** main content *********/

styles goes here...

/****** footer *********/

styles go here...

6. Combine Elements

Elements in a stylesheet sometimes share properties. Instead of re-writing previous code, why not just combine them? For example, your h1, h2, and h3 elements might all share the same font and color:

	h1, h2, h3 {font-family: tahoma, color: #333}

We could add unique characteristics to each of these header styles if we wanted (ie. h1 {size: 2.1em}) later in the stylesheet.

7. Create Your HTML First

Many designers create their CSS at the same time they create the HTML. It seems logical to create both at the same time, but actually you’ll save even more time if you create the entire HTML mockup first. The reasoning behind this method is that you know all the elements of your site layout, but you don’t know what CSS you’ll need with your design. Creating the HTML layout first allows you to visualize the entire page as a whole, and allows you to think of your CSS in a more holistic, top-down manner.

8. Use Multiple Classes

Sometimes it’s beneficial to add multiple classes to an element. Let’s say that you have a

“box” that you want to float right, and you’ve already got a class .right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so:

You can add as many classes as you’d like (space separated) to any declaration.

Be very careful when using ids and class-names like “left” and “right.” I will use them, but only for things such as blog posts. How come? Let’s imagine that, down the road, you decide that you’d rather see the box floated to the LEFT. In this case, you’d have to return to your HTML and change the class-name – all in order to adjust the presentation of the page. This is unsemantic. Remember – HTML is for markup and content. CSS is for presentation.

If you must return to your HTML to change the presentation (or styling) of the page, you’re doing it wrong!

9. Use the Right Doctype

The doctype declaration matters a whole lot on whether or not your markup and CSS will validate. In fact, the entire look and feel of your site can change greatly depending on the DOCTYPE that you declare.

Learn more about which DOCTYPE to use at A List Apart.

I use HTML5’s doctype for all of my projects.

“What’s nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode – even though they don’t implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.”

- John Resig

10. Use Shorthand

You can shrink your code considerably by using shorthand when crafting your CSS. For elements like padding, margin, font and some others, you can combine styles in one line. For example, a div might have these styles:

	#crayon {
		margin-left:	5px;
		margin-right:	7px;
		margin-top:	8px;
	}

You could combine those styles in one line, like so:

	#crayon	{
		margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
	}

If you need more help, here’s a comprehensive guide on CSS shorthand properties.

11. Comment your CSS

Just like any other language, it’s a great idea to comment your code in sections. To add a comment, simply add /* behind the comment, and */ to close it, like so:

	/* Here's how you comment CSS */

12. Understand the Difference Between Block vs. Inline Elements

Block elements are elements that naturally clear each line after they’re declared, spanning the whole width of the available space. Inline elements take only as much space as they need, and don’t force a new line after they’re used.

Here are the lists of elements that are either inline or block:

span, a, strong, em, img, br, input, abbr, acronym

And the block elements:

div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Alphabetize your Properties

While this is more of a frivolous tip, it can come in handy for quick scanning.

	#cotton-candy {
		color: #fff;
		float: left;
		font-weight:
		height: 200px;
		margin: 0;
		padding: 0;
		width: 150px;
	}

Ehh… sacrifice speed for slightly improved readability? I’d pass – but decide for yourself!

14. Use CSS Compressors

CSS compressors help shrink CSS file size by removing line breaks, white spaces, and combining elements. This combination can greatly reduce the the file size, which speeds up browser loading. CSS Optimizer and CSS Compressor are two excellent online tools that can shrink CSS.

It should be noted that shrinking your CSS can provide gains in performance, but you lose some of the readability of your CSS.

15. Make Use of Generic Classes

You’ll find that there are certain styles that you’re applying over and over. Instead of adding that particular style to each ID, you can create generic classes and add them to the IDs or other CSS classes (using tip #8).

For example, I find myself using float:right and float:left over an over in my designs. So I simply add the classes .left and .right to my stylesheet, and reference it in the elements.

	.left {float:left}
	.right {float:right}

	...

This way you don’t have to constantly add “float:left” to all the elements that need to be floated.

Please refer to editor’s notes for #8.

16. Use “Margin: 0 auto” to Center Layouts

Many beginners to CSS can’t figure out why you can’t simply use float: center to achieve that centered effect on block-level elements. If only it were that easy! Unfortunately, you’ll need to use

	margin: 0 auto; // top, bottom - and left, right values, respectively.

to center divs, paragraphs or other elements in your layout.

By declaring that both the left AND the right margins of an element must be identical, the have no choice but to center the element within its containing element.

17. Don’t Just Wrap a DIV Around It

When starting out, there’s a temptation to wrap a div with an ID or class around an element and create a style for it.

	Header Text

Sometimes it might seem easier to just create unique element styles like the above example, but you’ll start to clutter your stylesheet. This would have worked just fine:

	Header Text

Then you can easily add a style to the h1 instead of a parent div.

18. Use Firebug

If you haven’t downloaded Firebug yet, stop and go do it. Seriously. This little tool is a must have for any web developer. Among the many features that come bundled with the Firefox extension (debug JavaScript, inspect HTML, find errors), you can also visually inspect, modify, and edit CSS in real-time. You can learn more about what Firebug does on the official Firebug website.

19. Hack Less

Avoid using as little browser-specific hacks if at all possible. There is a tremendous pressure to make sure that designs look consistent across all browsers, but using hacks only makes your designs harder to maintain in the future. Plus, using a reset file (see #4) can eliminate nearly all of the rendering irregularities between browsers.

20. Use Absolute Positioning Sparingly

Absolute positioning is a handy aspect of CSS that allows you to define where exactly an element should be positioned on a page to the exact pixel. However, because of absolute positioning’s disregard for other elements on the page, the layouts can get quite hairy if there are multiple absolutely positioned elements running around the layout.

21. Use Text-transform

Text-transform is a highly-useful CSS property that allows you to “standardize” how text is formatted on your site. For example, say you’re wanting to create some headers that only have lowercase letters. Just add the text-transform property to the header style like so:

text-transform: lowercase;

Now all of the letters in the header will be lowercase by default. Text-transform allows you to modify your text (first letter capitalized, all letters capitalized, or all lowercase) with a simple property.

22. Don’t use Negative Margins to Hide Your h1

Oftentimes people will use an image for their header text, and then either use display:none or a negative margin to float the h1 off the page. Matt Cutts, the head of Google’s Webspam team, has officially said that this is a bad idea, as Google might think it’s spam.

As Mr. Cutts explicitly says, avoid hiding your logo’s text with CSS. Just use the alt tag. While many claim that you can still use CSS to hide a h1 tag as long as the h1 is the same as the logo text, I prefer to err on the safe side.

23. Validate Your CSS and XHTML

Validating your CSS and XHTML does more than give a sense of pride: it helps you quickly spot errors in your code. If you’re working on a design and for some reason things just aren’t looking right, try running the markup and CSS validator and see what errors pop up. Usually you’ll find that you forgot to close a div somewhere, or a missed semi-colon in a CSS property.

24. Ems vs. Pixels

There’s always been a strong debate as to whether it’s better to use pixels (px) or ems (em) when defining font sizes. Pixels are a more static way to define font sizes, and ems are more scalable with different browser sizes and mobile devices. With the advent of many different types of web browsing (laptop, mobile, etc.), ems are increasingly becoming the default for font size measurements as they allow the greatest form of flexibility. You can read more about why you should use ems for font sizes in this thoughtful forum thread. About.com also has a great article on the differences between the measurement sizes.

Don’t take me to the farm on this one – but I’d be willing to bet that, thanks to browser zooming, the majority of designers are defaulting to pixel based layouts. What do you think?

25. Don’t Underestimate the List

Lists are a great way to present data in a structured format that’s easy to modify the style. Thanks to the display property, you don’t have to just use the list as a text attribute. Lists are also great for creating navigation menus and things of the sort.

Many beginners use divs to make each element in the list because they don’t understand how to properly utilize them. It’s well worth the effort to use brush up on learning list elements to structure data in the future.

You’ll often see navigation links like so:

 Home
 About
 Services
 Contact

Though, technically, this will work just fine after a bit of CSS, it’s sloppy. If you’re adding a list of links, use an unordered list, silly goose!

26. Avoid Extra Selectors

It’s easy to unknowingly add extra selectors to our CSS that clutters the stylesheet. One common example of adding extra selectors is with lists.

body #container .someclass ul li {....}

In this instance, just the .someclass li would have worked just fine.

.someclass li {...}

Adding extra selectors won’t bring Armageddon or anything of the sort, but they do keep your CSS from being as simple and clean as possible.

27. Add Margins and Padding to All

Different browsers render elements differently. IE renders certain elements differently than Firefox. IE 6 renders elements differently than IE 7 and IE 8. While the browsers are starting to adhere more closely to W3C standards, they’re still not perfect (*cough IE cough*).

One of the main differences between versions of browsers is how padding and margins are rendered. If you’re not already using a reset, you might want to define the margin and padding for all elements on the page, to be on the safe side. You can do this quickly with a global reset, like so:

	* {margin:0;padding:0;}

Now all elements have a padding and margin of 0, unless defined by another style in the stylesheet.

The problem is that, because EVERYTHING is zeroed out with this method, you’ll potentially cause yourself more harm than help. Are you sure that you want every single element’s margins and padding zeroed? If so – that’s perfectly acceptable. But at least consider it.

28. When Ready, Try Object Oriented CSS

Object Oriented programming is the separation of elements in the code so that they’re easier to maintain reuse. Object Oriented CSS follows the same principle of separating different aspects of the stylesheet(s) into more logical sections, making your CSS more modular and reusable.

Here’s is a slide presentation of how Object Oriented CSS works:

From Nicole Sullivan.

If you’re new to the CSS/XHTML game, OOCSS might be a bit of a challenge in the beginning. But the principles are great to understand for object oriented programming in general.

29. Use Multiple Stylesheets

Depending on the complexity of the design and the size of the site, it’s sometimes easier to make smaller, multiple stylesheets instead of one giant stylesheet. Aside from it being easier for the designer to manage, multiple stylesheets allow you to leave out CSS on certain pages that don’t need them.

For example, I might having a polling program that would have a unique set of styles. Instead of including the poll styles to the main stylesheet, I could just create a poll.css and the stylesheet only to the pages that show the poll.

However, be sure to consider the number of HTTP requests that are being made. Many designers prefer to develop with multiple stylesheets, and then combine them into one file. This reduces the number of HTTP requests to one. Also, the entire file will be cached on the user’s computer.

30. Check for Closed Elements First When Debugging

If you’re noticing that your design looks a tad wonky, there’s a good chance it’s because you’ve left off a closing

. You can use the XHTML validator to help sniff out all sorts of errors too.

11 Classic CSS Techniques Made Simple with CSS3

Vasili — Tue, 08 Sep 2009 16:29:51 +0000

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

CSS3? What’s that?!

I’m sure you’ve heard of CSS in general. CSS3 isn’t that much different, in terms of syntax; however, the power of CSS3 is much greater. As you’ll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!

Here’s what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

What We’ll Be Covering

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember – these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.

1. Rounded Corners

Probably my favorite on of this list, rounded corners provide a developer with so many options. You can create a rounded corner button in seconds. My favorite thing to do is set a gradient background to repeat along the x-axis and then apply rounded corners to make a very nice looking Web 2.0 button.

You can simulate rounded corners by using four extra divs or by using JavaScript. Though, a user doesn’t see these smooth corners if they have JavaScript disabled, I think that’s fine as long as the website still functions as it should. You can read up on this method if you would prefer to use pure CSS in making rounded corners.

Classic Way

The classical method uses jQuery along with a JavaScript plugin called Corners.

CSS3 Way

As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.

View the demo.

2. Box Shadow

Box shadows provide you with a very powerful tool. 99% of the time when I’m desigining, I find myself using drop shadows for something. Once again, I’ll be using a jQuery plugin to take care of the classic way because honestly, trying to figure it out with just CSS is confusing. Why should I waste my time fiddling with negative margins when there’s already something written that does the job for me? As long as my design looks fine when people have JavaScript disabled, I’m perfectly content using a jQuery plugin.

Classic Way

I’m using the dropShadow plugin. Simple and what I wanted; though I would prefer to use just CSS .

CSS3 Way

The values for the box shadow properties are: x-offset y-offset blur color. Much easier than importing two JavaScript files, and A LOT easier than messing around with background images and negative margins.

View the demo.

3. Text Shadow

If you’ve ever read a tutorial about how to make the letterpress effect in Photoshop, you’ll know that the drop shadow effect is used. It’s really simple to create letterpressed text, just follow this tutorial at Line25 by Chris Spooner.

Classic Way




	The quick brown fox jumps over the lazy dog.
	The quick brown fox jumps over the lazy dog.

Instead of using a jQuery plugin this time, I just used some simple CSS tricks to absolutely position the text behind the other copy of text. The only bad thing about not using CSS3 for this situation is that you will get two copies of the text if CSS is disabled.

CSS3 Way



The quick brown fox jumps over the lazy dog.

If you’re planning on using text shadows that are blurred (the third “option” in the text-shadow property), I don’t know how you would accomplish that with pure CSS, and no images.

View the demo.

4. Fancy Font

We’ve dreamed about it for a long time now, but you can finally display “fancy fonts” on the web without relying on JavaScript. Of course this causes some issues with allowing paid fonts to be distributed over the internet. Anyhow, I present you with @font-face.

Classic Way







The quick brown fox jumps over the lazy dog.

I decided to use Cufón to replace the text. I’m not going to explain how to use it because Jeffrey has an awesome screencast already.

CSS3 Way



The quick brown fox jumps over the lazy dog.

We create a font family with @font-face and then use it as a value for font-family. Michael Owens wrote an article here about a month ago which explains @font-face quite well.

View the demo.

5. Opacity

If you’ve visited the Envato website redesign lately, you might have noticed that there are a lot of transparent elements. Though this is achieved with transparent PNGs, you can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.

Classic Way

CSS3 Way

With CSS3, we just eliminated two properties that were specific to IE, isn’t that great?!

View the demo.

6. RGBA

Everyone knows what RGB stands for (red, green, blue), but what does the A stand for? It stands for alpha, which refers to the transparency.

Other than rounded corners, RGBA is my next most used CSS3 property. Sometimes I just want to add a few light white/black background to navigation links when a user hover overs them. It’s much easier than creating a new image for each color; however, with a little PHP it makes things a lot easier.

Classic Way

Seeing as how this isn’t a PHP article, I won’t be going over the PHP. Just save this file as rgba.php and when you need a certain RGBA color, make the background “color” as url(rgba.php?r=R&g=G&b=B&a=A).

Now just apply that to a div…

CSS3 Way

View the demo.

7. Background Size

The background size property is an amazing thing to have on your tool belt when you’re creating a liquid layout. An example of this could be when you have a background image for a container that is for the sidebar. The classic way of doing this would require tweaking to have the image repeat along the y-axis, but with CSS3 it’s like adding another background property.

Classic Way

CSS3 Way

Unfortunately, this property isn’t implemented into Firefox (V3.5.2) at the time of this writing.

View the demo.

8. Multiple Backgrounds

Ah, multiple backgrounds. Now this give developers a very powerful tool. I can think of so many things that require multiple divs just to have more than one background. The most common place I can see this being helpful is in a header section of the website, but that’s just the first thing I thought of.

Classic Way

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn’t it?

CSS3 Way

The syntax is really easy to pick up on this one. All you do for the multiple backgrounds is add a comma in between each one! However, once again, this is a limited property and is only in Safari.

View the demo.

9. Columns

This is the most interesting CSS3 property I’ve come by. It’s not something you see a lot in web design. Myself, I’ve only seen newspaper-like columns once or twice; however, I love how the effect looks when done correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the columns.

Classic Way







	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.

I’ve added a little padding to the columns just so the text isn’t smashed up against each other.

CSS3 Way




	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.

There are a handful of other CSS3 column properties that you can apply, but for demonstrative purposes, I only specified the number of columns. If you’d like to learn more about these other properties, check out the multi-column page at CSS3.info.

View the demo.

10. Border Image

I had no clue about the border image property until I upgraded to Firefox 3.5 and went to Chris Spooner’s website and saw that his post images had image borders. I personally don’t have any interest in this property, but that’s not going to stop me from explaining how to achieve it.

Classic Way

Instead of spending the time creating multiple divs and repeating the background image around the div, I found a jQuery plugin that does the work for me. It’s called borderImage and works just like it should.

CSS3 Way

As you can see, the border image property is a bit odd. W3 explains how it gets calculated MUCH better.

View the demo.

11. Animations

Alright, who doesn’t love to see some element gently slide to the left or fade in when you hover over something? Animations are great to increase user interface, but make sure that you don’t go over board! The only browsers that support CSS3 animations are Webkit based browsers. The only other way to display animations is to use JavaScript. I’ll be using jQuery because it’s my favorite JavaScript library (if you haven’t guessed by now).

Classic Way

CSS3 Way

Both of these code snippets do the same thing: slide the div 20 pixels down over the course of 300 ms. Remember, the CSS3 code only works in Webkit browsers!

View the demo.

Conclusion

There you have it: 11 CSS techniques that will become much easier with CSS3 in the (hopefully near) future. Obviously, it’ll be a while before we can 100% depend on these properties across all browsers.

Don’t forget to review these other Nettuts+ tutorials that discuss CSS3:

20+ HTML Forms Best Practices for Beginners – Basix

Andrew Burgess — Thu, 03 Sep 2009 16:10:06 +0000

Working with XHTML forms can be somewhat daunting; they not only use some niche HTML elements, but also blur the line between static content and user interaction. Let’s review some things to remember when creating your next form.

Good HTML forms require attention on at least four points:

Semantics
Accessibility
Functionality
Design

Forms can be difficult and sometimes even annoying for users;
often, a form interrupts a user’s main focus and direction on a page:
they’re intent on purchasing that gift, or trying out your new web app,
not giving you their shipping address or coming up with yet another password.
These tips will make forms easier for you as a developer/designer, and
them as a user.

Semantics

1 : Use fieldsets to encapsulate similar fields

Generally, forms are made up of inputs inside form tags. When you’ve
got a lot of fields that the user must fill out, it can be easier for
both the user and you, the developer, to keep track of input by using
fieldsets. The perennial example of this is using fieldsets to separate
a billing address and a shipping address.


    Billing Address
    City
    Province
    Postal Code



    Shipping Address
    City
    Province
    Postal Code

2 : Label Fieldsets with Legends

It hardly makes sense to use a fieldset without giving it a clear name.
We can improve the code above by using the legend element to title our
fieldsets. The fieldset element has a border by default, and the legend
will lay itself over that border.


    Billing Address
    Address
    City
    Province
    Postal Code

This results in the following:

3 : Name your Inputs

If you want to pass form data to a script, each input element needs
to have a name; if you are using PHP, these names will become the keys
to a super global array, usually $_POST or $_GET.


    Billing Address
    City
    Province
    Postal Code

4 : Use the Label Element

Let’s continue improving that code; there’s nothing inherently wrong
with using a span to label the inputs, but the label tag is a born match for inputs.


    Billing Affress
    Address
    City
    Province
    Postal Code

5 : Give Labels the For Attribute

I really like the ‘for’ attribute; it provides a way to bind a label to an
input. The value of ‘for’ should be the same as the id of the input you want
to bind it to.


    Billing Affress
    Address
    City
    Province
    Postal Code

At first, this is one of those things that only seem to affect your
code’s quality, but they do a special job in the visible content: when
the for attribute is defined, the label becomes a ‘clickable’ area that will
focus the input. For example, clicking the label of a text input will focus
your cursor in the box; clicking the label of a checkbox will check (or uncheck)
the box.

6 : Use optgroup to categorize options

If you have a lot of options in a select, it’s usually better to group
them into optgroups. is a little-known element that will indent
options and give them a title. Note that the label attribute is required.

This gives us the following results:

7 : Always assign complete attributes

When working with forms particularly, it’s tempting to write like this:

Living?

Yes, this does what it’s supposed to do. No, you shouldn’t code like this!
It isn’t standards-compliant. Whenever you are adding attributes to an element,
don’t cut corners.

Living?

8 : Consider using Buttons instead of Submit Inputs

Generally, has been the universal submit
button. But HTML has a

How to Design and Code a Flexible Website

Tessa Thornton — Tue, 01 Sep 2009 16:18:05 +0000

In this tutorial, we’re going to be designing and coding a simple blog-style web-page. We’ll pay special attention to making our design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

Tutorial Details

Difficulty: Easy
Estimated Completion Time: 1.5-2hrs

Step 1

So our example web page is going to be based on a simple blog theme, with a WordPress blog-like structure similar to that of the nettuts homepage. It’s going to look something like this:

The idea here is not for you to reproduce my example, but for you to be able to follow along and apply the techniques to your own designs, hopefully learning a thing or two about the underlying concepts.

Step 2 – Photoshop

We’re going to keep the Photoshop use here to a bare minimum, Usually I mockup an entire design in Photoshop before coding, but here I’m just going to generate a basic layout, and worry about the content later. This is an example of a different workflow, it will make more sense as we go along.

Note: Some readers have asked about using the GIMP. I haven’t used it personally, but I’m sure you can accomplish the following steps in GIMP just as easily, because all we’re using is basic shapes and gradients.

Page Layout

I decided to make the page 900px wide, so my document is 1000px wide and 1200px long (don’t know why I gave myself so little room, make yours wider if you like). Place guides at 50px and 950px to get a 900px wide area. We’re going to have a content area and a sidebar, and the content area is going to be 600px wide, so place another guide at 650px.

Backgrounds

The header background is just three rectangles for the top links, main header, and navigation area. I used shape layers and added gradients to the layer styles. There are also 1px borders between the top bar and header area, and between the header and navigation area.

The footer background is another gradient, but this time with a 2px border at the top.

Next add a background for the sidebar, I chose #d8ddd1.

Type Tool

Next we Grab the type tool (T) and add in a logo and tagline, and some basic navigation links. Fonts:

Blog Title:

Font: Myriad Pro
Size: 48pt
Color: #ffffff (white)

Blog Description:

Font: Myriad Pro
Size: 24pt
Color: #ffffff

Main Navigation Links:

Font: Arial
Size: 18pt
Color: #2b2b2b

“welcome, guest” and “stay updated”:

Font: Arial
Size: 12pt
Color: #fffff

“login, Sign Up” and “subscribe via…”:

Color: #a5bf8d
Style: underline

Content

We’re only going to include one sample “post” in our Photoshop mockup, because I find working with type in Photoshop is a real pain, but we’ll get into more detail about styling the content section later. The fonts I’m using for the dummy post are:

Post Title:

Font: Arial
Size: 24pt
Color: #3c3f40
Style: Bold

Date, category and author info:

Size: 11pt

Paragraphs:

Size: 12pt

Okay, we’re pretty much done with our mockup. All we need to do now is slice it up and save for the web.

Select the slice tool (C) and cut out skinny slices of each of the background rectangles: the top bar, the header area, the navigation, and the footer. Don’t include the borders, we’re going to add those in with CSS. Try zooming in really close to make sure you get the right parts. The slices I cut are about 5px wide, but the width isn’t terribly important at this point.

Select ‘File/Save for web and devices…’ Hold down “shift” and click to select each slice. From the dropdown menu “presets” select “jpeg . Uncheck “convert to sRGB”" (I find that the conversion dulls the colors). All other settings should be left at defaults. Click “Save.” In the popup window, make sure “selected slices” is displayed in the “slices” dropdown menu, and click save.

GIMP users: I’m not sure if gimp has a tool like slice, but you just need to make rectangular selections, save them to separate documents, crop them down, and save them as optimized jpegs.

For a more in depth look at the slicing and saving process, see My previous tutorial.

Step 3 – HTML Setup

If you’re unfamiliar with the process of organizing files and folders for a webpage, again, see my other tutorial linked above.

Open up your favorite code editor, and create a new file called index.html.
We’re going to try to use as few div tags as possible to keep our markup meaningful and semantic. That being said, to maintain a flexible, resizable layout, we need to enclose some elements in multiple divs. More on that later.

All elements in our page will be contained within two divs, called “main” and “footer”. Within the “main” div, we’re going to have a divs for the top bar, the header, and the content area. The footer is going to contain an inner div for the written content.

	
	
	
		
		My Blog

Top Bar

The background of the blue bar at the top stretches the entire width of the page, but the two text areas need to be within the 900px of the page. To achieve this, we need the content to be contained within another div, which will have a class of “container”.
Within our bar at the top, we’re going to have two paragraphs, one for the login, one for the subscription options. Since they’re going to be floated, each needs to be given a unique id. Actually, if we wanted to be totally semantic, we could code these two paragraphs as an unordered list with two list items. Try it both ways, see if you can make it work.



	
		
			Welcome, Guest Login Sign Up
			 Stay Updated: Subscribe via RSS Email Updates

Step 5 – Header

We face the same issue here as we did with the last step, the background image needs to stretch out indefinitely. To contain the content, we need to place it within another div. Since the header will also be within our centered, 900px wide page, we can re-use the “container” class. The title of the blog will be wrapped in an

tag, and the description/tagline will be a paragraph with a unique id.



	
		My Blog
		Description of My Blog

Navigation

Also inside the header is the navigation menu, which will be wrapped in an unordered list with the id of “menu”, which will all be wrapped within another div with the id of “navigation”.
Because we want the navigation menu to be centered, we can add our “container” class to the ul as well.



	
		My Blog
		Description of My Blog
	


	
		
			Home
			About
			Blog
			Contact

We’re writing the navigation links in lowercase here, but in our CSS file we will transform them to uppercase. You could write them in capitals here, but my caps lock key is broken, and this way makes for cleaner markup.

Step 6 – Content

The content area doesn’t have a background image or color, so we don’t need to enclose it in an additional div. To center it, we can give the content div a class of “container” as well. Inside the content div, we have two more divs, one for the blog posts, and one for the sidebar.

When designing a blog, we need to take into account the fact that the content is going to change, and may include any number of elements, including lists, images, quotes, headings and emphasized text. To prepare, we need to style every possible element that might appear., so our sample content needs to include Everything. This is sometimes called the “Sandbox method.” To get dummy content, I suggest visiting HTML Ipsum.

We’re going to separate our sample content into a couple different posts, with titles wrapped in

tags. Each post will also have standard information about date, author, etc, contained within a tag.

Don't Cancel Chuck!
on July 01 in General tagged petitions by admin
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Read More

Alien Spacecraft found in New Mexico
on July 01 in General tagged petitions by admin
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ghostly Goo in your Kitchen Sink?
on July 01 in General tagged petitions by admin
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae,
ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet
Consectature vestiblum

Step 7 – Sidebar

In a typical blog, the sidebar holds various widgets, which display links to other pages or articles, and each widget is usually an unordered list of anchor tags. Here, we’re going to have “categories”, “recent posts” and “archives” widgets. So our sidebar div will contain three lists, each with a title wrapped in an

tag.



	Categories
    
   		General
    	Ghost Sightings
    	UFO Crashes
    	Government Coverups
    	International Conspiracies
    

    Recent Posts
	
		Ghost Sighting in Mansion
		UFO picked up by satelites
		Mutants amoung us?
		Bigfoot: Fact or Fiction?
	

	Archives
	
    	June 2008
        May 2008
        April 2008
        March 2008

Step 8 – Footer

The footer will work like the top bar, header, and navigation worked, with an outer div to hold a repeating background, and an inner div to centre the content and contain it within the 900px of our page. To do this, we just need to add the “container” class to our “footer content” div.

Our footer is going to have three columns: copyright info, links, and subscription options. Each will have to be contained within its own div.



	

		
			Copyright © 2009.
 All Rights Reserved.
		

		
			Links
			
				PSDtuts - Photosohp tutorials
				NetTtuts - Web development and design tutorials
				VectorTuts - Illustrator and vector tutorials
				FlashTuts - Adobe Flash tutorials
			
		 

		
			Follow our updates
			
				Subscribe to RSS Feed
				What is RSS?
				Email Updates

Okay, we’re done our markup! Lets take a look in the browser (I’m using Safari 4, which is awesome, by the way)

It doesn’t look like much, but it has all our content laid out in a logical, readable way. It’s important that an un-styled web page contains all the information needed for a reader to be able to understand and navigate the page easily. This ensures that anyone browsing with CSS disabled, or using a specialized browser (like a screen reader for visually impaired people), will still be able to access and understand content. Keeping this in mind will also ensure a logical layout, which will be easier to modify later.

Step 9 – CSS

Now comes the fun part: giving our page some style. Prepare yourself – to achieve the layout we want, we’re going to have to face some confusing little CSS headaches. I’m going to try to explain the underlying concepts that lead to these problems, so that you not only learn how to solve them, but also gain a better understanding of how CSS works and how to deal with any problems you might come up against. Let’s get started!

Create a new document “style.css” and link to it in the head of your html document:


		
		My Blog

Step 10 – Basic Clean-up

First off, we need to know what we’re working with, which means getting rid of default browser styles.

We’re going to use a simple css reset to get rid of those pesky margins and styles:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
    margin:0px; padding:0px; border:0px;
}

We also have the wrong font for our whole page, lets fix that:

body {font-family: Arial, helvetica, sans-serif; }

The next step is kinda neat: remember how we added the “container” class to all divs that had text content? It’s time to get that container to contain our content! Like I said before, we’re making our page 900px wide, and we need out content to be centered.

.container {width: 900px; margin: 0 auto; }

And just like that, we have a nice 900px wide, centered webpage.

Step 11 – Starting at the Top

We’re going to start at the top with the small blueish bar containing the subscription and login links. Okay, the first thing we notice about our two paragraphs at the top is that they’re supposed to be beside each other, not on top. To do this, we need to float the elements.

How floats work

When we look at our webpage in the browser, we see a bunch of elements of different widths and heights. The browser, however, sees only a bunch of boxes stacked on top of one another, with each element taking up the entire width of the container. The webpage has a very simple “flow”: each element is pushed down the page by the element above it.
To get two elements to sit next to each other, we need to take them out of the normal “flow” of the page.

When an element is floated, a few things happen: it gets stuck to the side of the page (or another element) and it is removed from the normal flow of elements – that is, instead of taking up the entire width of the page, it only takes up the space it directly occupies, allowing the elements below it to move up beside.

Lets try it with our two little paragraphs:

p#login {float: left; }

p#subscribe {float: right; }

Take a look in the browser, and we have a problem! The h1 logo has moved itself up between the two floated items. When you float elements, it’s like you’re telling them to “break the rules”, the only problem is, when you let some elements break the rules, other elements start doing it too! What we need is a way to tell the browser that these two paragraphs, and these two paragraphs ONLY, are allowed to break the rules, so after the floated elements, the normal flow is restored. To do this, we need to add a rule to the parent div of the two floated elements, which lets the two paragraphs inside it float without affecting the rest of the page.

To do this, we need to add a property to the containing div of “overflow” and set the value to “hidden”.

#top_bar {overflow: hidden; }

It’s not terribly important to understand what’s overflowing, or where it’s hiding, so long as you understand that the overflow: hidden rule controls the behavior of floats within the div. Now, I don’t want to confuse or scare anybody, but this technique doesn’t always work in all browsers. It works here, but always test in IE for your own designs. There are a number of other techniques worth noting, all of them have their advantages. Peter-Paul Koch describes a method similar to the one I use here in his article Clearing floats. Steve Smith describes his method of “Floating (Nearly) Anything” in his post Clearing Floats: The FnE Method. Also, it’s a bit more of an advanced technique, but Tony Aslett has pioneered a rather ingenious and devious technique, described in the article How To Clear Floats Without Structural Markup. Choose the method that works best for you, and remember to test your browsers!

One more important thing about floats is that you should always specify a width. Your CSS will still validate if you don’t (you will get a warning) but it’s best practice and you sometimes wind up with unexpected results in some browsers if you don’t.

Since we want our layout to be easily resizable, we’re not going to use pixel values, we’ll use percentages instead. We may as well let each element take up 50% of the width. Because we’ve given it so much space, the subscribe paragraph has moved to the left. We can get it to stick to the right again by specifying text-align: right.

p#login {float: left; width: 50%;}

p#subscribe {float: right; width: 50%; text-align: right; }

Styling the paragraphs

Before adding a background image, I like to style the fonts so that I can see how much space I have to deal with.

Font sizes using ems

We want to make our web page as accessible and flexible as possible, to reach the largest possible audience, right? That includes allowing readers to resize text to a comfortable size. Now, different browsers deal with resizing in different ways, but as usual, the problem browser is IE/Win. In Internet Explorer, if your text size is set in pixels, you can’t resize it, so your reader is stuck with whatever font size you’ve specified. That’s not very nice, especially for readers with poor vision. To correct this problem, we need to use a different unit – ems.

Ems are a relative size unit – it means the width of the “m” in whatever font-size is specified. The default size set by browsers is 16px, so 1em would equal a font-size of 16px.

To make our web page fully scalable, we can convert all our font sizes to ems. An easy way to do this is with the web application Em Calculator (works best in FireFox).

However, to avoid doing any confusing math, there’s an easier way. Since ems are relative to the default font-size of the page, if we change the default, the em values will be different.

To make the math easier, we can give ourselves a base of 10, by setting the default font to 10px instead of 16. To do this, we just specify in our CSS file that we want our fonts to be 62.5% of the default.

body {font-family: Arial, helvetica, sans-serif; font-size: 62.5%; }

Now we just need to divide each font size in pixels by 10, and we have our em value. To start, the font size for our two

tags at the top of the page is 12px, which works out to 1.2ems.

#top_bar p {font-size: 1.2em; color: #ebf0e8;}

#top_bar a {font-size: 1.2em; color: #a5bf8d;}

Expandable backgrounds

Next, we add in the repeating background image we sliced from our PSD:

#top_bar {overflow: hidden; background: url(images/bar_slice.jpg) repeat-x; }

We need to add a bit of padding to the top and bottom of the paragraphs to make the image stretch to its full height. To get the right values, we need to go back to our PSD and measure the height of the bar with the ruler tool: mine turns out to be 26px tall. Since our text is 12px tall, the total padding will be 26-12 or 14px. This means we add 7px of padding to the top, and 7px to the bottom. (These values are sometimes off by a pixel or two, but are a good place to start, just keep checking in your browser)

#top_bar {
	overflow: hidden;
	background: url(images/bar_slice.jpg) repeat-x;
	padding-top: 7px;
	padding-bottom: 7px;
}

We could also get the div to stretch to its full height by specifying a height of 26px, but you should always avoid specifying a height for your elements as much as possible, to allow for maximum flexibility. If you restrict your element to a specific height, you aren’t allowing for larger text or additional content.

Check it out, it looks just like our PSD. But here’s where things get tricky: try re-sizing the text in your browser. When we increase the size of the text, the ratios change, we lose our bottom padding, and the text eventually overflows beyond its background. To make a more “indestructible” web site, we need to get the background to stretch as the text grows or as more content is added, so that there is always 7px of padding at the top and bottom, no matter how big the text is. Since our background image is only 26px tall, we need to have something else to stretch out further. What we’re going to do is basically put a solid color behind the image, so that when the text gets bigger and the image can’t contain it, the color behind it shows through. The color at the bottom of our gradient is #08413c. So lets add that to our background. To specify that we want the image to always stick to the top of the element, so that the color stretches out from the bottom, we add a background-position value after the image url.

background: #08413c url(images/bar_slice.jpg) top repeat-x;

Now try resizing the text: the background grows with it, and it looks pretty much the same as it gets bigger. This also lets us know that if we wanted to add a second line of content later on, we wouldn’t have to change anything in our css. The ability of an element to expand for more or larger text is often overlooked in web development, and this causes pages to break down when text is resized. Just check out my University’s Homepage, try making the text one step bigger, and you lose a navigation link!

One more thing, we just need to add that 1px border to the bottom of our bar:

border-bottom: 1px solid #7ab7b7;

So here’s where we’re at so far:

Step 12 – Header

Since we’re going to be making the text of our blog name and description white, lets add in the background first. We probably won’t need this image to stretch out, but just in case, we’ll repeat the same process of adding a background color and position:

#header {
	background: #01835f url(images/header_slice2.jpg) top repeat-x;
}

Now lets do our font styles:

h1 {
	font-family: "Myriad Pro", arial, sans-serif;
	color: #fff;
	font-weight: normal;
	font-size: 4.8em;
	padding-top: 25px;
}

p.desc {
	font-family: "Myriad Pro", arial, sans-serif;
	color: #fff;
	font-size: 2.4em;
}

Alright, so now we need to get our description out beside our logo. This can be achieved by floating, but I tried it and ran into problems with specifying widths, and I managed to get a much better result using absolute positioning. Plus it gives me a chance to explain an important concept!

Absolute Positioning

If we want to position an element outside the “flow” of the page without using floats, we can use absolute positioning, which basically allows you to position an element anywhere within a div regardless of other elements within the div. This means that when you specify a position of, say, left: 10px, it will position the element 10px to the left of the side of the div, whether or not there is another element there.
First, in order to absolutely position an element, we need to set the position of the parent div to relative, because the absolute positioned element is positioned relative to the parent div.

#branding {
	overflow: hidden;
	margin-bottom: 30px;
	position: relative;
}

Now we can set the absolute position of our description. When position: absolute is used, we can specify its position in terms of left, right, top and bottom, using pixels, percentages or ems. First, the top – the description is almost exactly 50% from the top of the header, so lets specify that:

p.desc {
	font-family: "Myriad Pro", arial, sans-serif;
	color: #fff;
	font-size: 2.4em;
	position: absolute;
	top: 50%;
}

Now we need to push it out to the right, by giving it a value for left:
if we use pixels, then when the text is resized, it will get closer to the h1, and eventually overlap it, so scrap that method. We get the same problem with percentages, only not as dramatically. The best thing to do is position it with ems, which as you remember get bigger as text size gets bigger, so the space between the h1 and description will remain when the text is resized.

position: absolute;
top: 50%;  left: 8em;

And it looks great!

Step 13 – Navigation

Lets clean up this navigation menu, and get rid of the list style and text decoration, and add font styles.

ul#menu {list-style: none; }

ul#menu li a {
	font-size: 1.8em;
	text-decoration: none;
	color: #2b2b2b;
	text-transform: uppercase;
}

To get our links to line up horizontally, we’re going to set the list items to float: left, so that each list item is “stuck” to the one to its left.

ul#menu li {float: left; }

We of course wind up with the same problem as with all floats, but all we have to do is add in overflow: hidden to the navigation div, and we’re good to go.

Each list item is about 45px apart, so lets add 45px of padding to the right of each item.

ul#menu li {
	float: left;
	padding-right: 45px;
}

Note: All these padding values can be written shorthand as:

padding:  11px 45px 11px 0px;

The shorthand for padding (and margins) is the values for top-right-bottom-left all in one line. I find the best way to remember the order is to think of the compass directions: n-e-s-w.

Next, lets add the background image, employing the same technique as before to ensure our background stretches when text is resized:

#navigation {background: #8ec196 url(images/nav_slice.jpg) top repeat-x; overflow: hidden; }

To find the padding value, once again just measure the height of the bar (mine is 40px) and subtract the size of the text (18px) to get the total padding, and divide by two: 40-18=22px.

ul#menu li {float: left; padding-top: 11px; padding-bottom: 11px; }

To move our navigation menu down a bit, the easiest thing to do is just add a margin to the bottom of the branding div.

#branding {overflow: hidden; margin-bottom: 30px; }

And finally, the 1px border at the top of the bar:

border-top: 1px solid #9cebda;

That’s it! We’re done with the header! Let’s take a look:

Step 14 – Content

The first thing we need to do here is to create the two columns – one for the posts, one for the sidebar. By now this should be simple: just float one to the left, one to the right.

#posts {float: left; }

#sidebar {float: right; }

And… Nothing happened. At least it looks that way, scroll down and you’ll find your sidebar stuck to the right side beneath the posts. Before the sidebar can move in beside the posts, we need to specify how much space the posts div can take up, and specify a width for the sidebar as well. Again, we’re going to use percentages instead of pixels, so that if the text is resized, the sidebar stays at the side.

#posts {float: left; width: 67%; }

#sidebar {float: right; width: 33%; }

And we need to hide the overflow of our containing div:

#content {overflow: hidden; }

Great, we have a nice little two-column layout!

Step 15 – Styling the Posts

Since we used a CSS reset, the content of our post section has no style at all, and we need to go through the tedious task of styling every single possible element. My workflow is a bit different for this than with the rest of the page, as I don’t really refer to the Photoshop document. I find font styling in Photoshop to be a real pain, so I usually skip it. To get the styles for my posts, I go through a process of trial and error. I usually start with settings similar to default browser styles, which you can find at This Link, and tweak them to my liking. I’m not going to go through the whole process step by step, but this is what I came up with in the end:


#posts h2 {margin: 7px 0 4px 0; font-size: 2.4em; }

#posts h2, h3, h4, h5, h6 {color: #3c3f40; }

#posts p {line-height: 1.3em; padding: 7px 0; font-size: 1.2em; }

#posts small {font-size: 1.1em; }

#posts a {color: #327800; font-weight: bold; text-decoration: none; }

#posts blockquote {margin: 0.7em 3em; border-left: 2px solid #327800; padding-left: 10px; }

#posts ol, ul, dl {font-size: 1.2em; margin: 4px 0 4px 40px; }

#posts h3, h4, h5, h6 {padding: 4px 0; }

#posts strong {font-weight: bolder; }

#posts em {font-style: italic; }

#posts code {font-size: 1.2em; }

#posts h3 {font-size: 1.8em;}

#posts h4 {font-size: 1.4em; }

Which should look something like this:

Now there’s about 35px at the top of our post section, but our h2 tags already have a margin of 7px at the top, so lets add a margin of 28px to the top of the posts div.

#posts {
	float: left;
	width: 67%;
	margin-top: 28px;
}

And that’s about it for the posts section. On to the sidebar!

Step 16 – Sidebar

First off, lets add in that background color:

#sidebar {float: right; background: #d8ddd1;}

And fix the font styles:

#sidebar h3 {
	font-size: 1.6em;
	color: #3c3f40;
	margin-top: 10px
}

#sidebar ul {list-style: none; margin-left: 20px; }

#sidebar ul li {font-size: 1.2em; }

#sidebar ul li a {text-decoration: none;color: #525254; }

We also need to push the sidebar down by 25px (35px – the 10px margin at the top of the h3 tags). This time, however, we can’t use the margin-top property, because this will move the entire sidebar, including the background, down the page. We want the background to start right beneath the navigation bar, but the content to start 35px below that, so we need to use the padding-top property. We also need padding on the left, right and bottom, and 25px sounds about right, so we can declare it all in one padding value:

#sidebar {
	float: right;
	background: #d8ddd1;
	padding: 25px;
	width: 33%;
}

But oh no! Our sidebar is no longer at the side! This is because we added padding to the sides of the sidebar. When you add padding to an element, you are actually making it bigger. We just made our sidebar 50px wider, so now the widths of the floated elements add up to more than 100%. To fix this, lets first convert our 25px of padding to a percentage of 900px. It works out to about 2.7%, but I’m rounding up to 3%.

padding: 25px 3%;

Note: this is another shorthand value, it means that the top and bottom are both 25px, and that the left and right are both 3%.

Our sidebar is now 33+6% wide, so it’s still too wide, but all we need to do now is subtract the 6% from the original 33%

width:  27%;

I thought the sidebar looked a bit wide at this point, so I reduced it to 25%.

The important thing to remember is that all the padding, margin, and even border values add to the width of the element, so you need to adjust the width property to compensate every time you add padding, margins or borders.

And there we go, no matter how big you make the text, our sidebar stays at the side, and the ratio between the post area and sidebar remain the same. It’s an excessively plain sidebar, but I’m not going to bother styling it any more, just because its not really important to the goals of this tutorial.

Step 17 – Footer

First lets make the font a bit bigger and add some styles:

#footer p {color: #a5bf8d;}

#footer h4 {color:	#a5bf8d; font-size: 1.4em; padding-top: 0; }

#footer ul {list-style: none; margin-left: 0; }

#footer ul li a {text-decoration: none; color: #fff; }

Next we can add in our background image:

#footer {font-size: 1.2em; background: url(images/footer_slice.jpg) repeat-x; }

And since we want it to be able to stretch, we can add in the color at the bottom of the gradient to our background value just like we did before:

background: #093b2b url(images/footer_slice.jpg) top repeat-x;

Next add in that 2px border at the top:

border-top: 2px solid #1e956c;

Lets add a margin and some padding to the top and bottom:

#footer {
	font-size: 1.2em;
	background: #093b2b url(images/footer_slice.jpg) top repeat-x;
	margin-top: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
}

Next, we’re going to create three columns by floating. Floating three elements works pretty much the same as floating two, we’re going to float each column to the left. We need to declare the widths of each element being floated, using percentage values to allow for expansion.

#copyright {float: left; width: 20%; }

#links {float: left; width: 40%; }

#feeds {float: left; width: 40%; }

Just remember that we have to set the overflow to hidden in the parent div.

#footer {overflow: hidden;}

At this point, I decided that it would actually look better if the links and RSS divs came first, and the copyright info was at the far right, so I changed the order of the divs, and set the copyright div to float: right, and aligned the text to the right as well.

#copyright {
	float: right;
	text-align: right;
	width: 20%;
}

And there we have it, we’re done coding and styling our page!

Step 18 – Accesibility testing

Througout the tutorial, I’ve been testing my page in Safari 4. Since Safari 4 is probably the most standards-compliant and modern browser, it displays web pages the most predictably. If only everyone used a standards-compliant browser… Unfortunately, there are still people out there using outdated browsers, and we need to prepare for that.

Let’s start with the most problematic browser first: Internet Explorer 6. I use a mac, and have yet to find an effective (free) way to test my web pages in Internet Explorer. If anyone reading this knows of some sort of magical technique, please, let me know. Anyways, time to haul out the ol’ family Dell. To install multiple versions of Internet Explorer at once, google “Multiple IE” and download the .zip file.

Surprisingly, it works out just fine in IE6! IE7 is okay too. Text is resizeable! I also tested this page in Firefox, Opera and Camino. I had trouble installing Google Chrome on the PC, so I couldn’t tell you if it works, but I think it should, bceause of the simplicity of the markup and style.

Conclusion

That’s it! Hopefully you’ve learned a thing or two about coding flexible websites. Check it out in any browser, make the text bigger, make it smaller, and our layout adapts just fine. Disable CSS, and it still makes sense! I hope you can see how easy it is to make your websites less fallible! This page was very simple, without many complicated challenges. When your layouts get more complicated, it will be a bit tougher to maintain flexibility.

Using Compass and Sass for CSS in your Next Project

Alex Coomans — Mon, 31 Aug 2009 16:16:57 +0000

Sass could potentially be called CSS 2.0; it has some really nifty features that allow you to write your code in less time and with more flexibility. In today’s article, we will be working the basics!

What is Sass?

Sass is simply a different way to work with CSS. It allows you to keep your CSS code very simple and helps increase readability. It takes something like this:

And turns it into:

You can check out Sass at http://sass-lang.com/

What is Compass?

Compass makes working with Sass even easier. The author, Chris Eppstein, has also included some converted frameworks such as Blueprint, YUI, and 960.gs. It also easily integrates with Ruby based projects, but is just as easy to add to any other project. Compass is open-source and is extremely well documented. Check out the source and documentation.

Installation

Both Sass (which is part of the Haml Project) and Compass are installed through RubyGems. If you dont have any clue what I am talking about, check out "Step 1 – Installing Ruby on Rails" of my previous article Ruby on Rails for Designers, and follow the steps down until you hit the section named "Installing Rails".

To install both of these gems, we can just run a single command:

(sudo) gem install haml chriseppstein-compass

As long as it says that it successfully installed both gems, you are good to go!

Project Setup

If you are working with a Ruby-based project then check out the documentation as it will explain how to get it working with your specific framework, but I’ll assume we are working with a simple HTML or the like project.

The compass command has a lot of options, and if you run compass –help, you might see:

FYI: The next to top line that says "Loading haml-edge gem." is because I use the latest version, so you don’t need to worry about it if yours says something different.

Now we are going to start our Compass project. To create run the following command (including the trailing period, that tells compass where we want to make our project!)

compass  --sass-dir=sass .

And you should see:

Where initializing, Compass would normally default to having the Sass in a folder name src, but I wanted to change that so I added the option. If you look at the folder, you should see a file named config.rb and two other folders.

The config.rb is the configuration that Compass looks at, but most of the time you wont need to mess with this. Also, like the output from the creation command says, we have three ways of updating our CSS from our Sass:

compass – using this option, you would have to be in the correct directory, and then Compass would compile your Sass once.

compass -u path/to/project – this is about the same as the command as above, but you do not have to be in the project directory, and rather pass in it with the command.

compass --watch [path/to/project] – this command is pretty awesome in that it watches for any changes to your Sass files and will automatically recompile them whenever a change is detected.

Now that you know how to setup a project, I’ll explain some of the "rules" of working with Sass

Sass Syntax

Normally when writing CSS, you would write something like:

#header {width: 900px; background:#111;}
#header a {color:#000; text-decoration:none;}

One of the problems with that is that you are repeating the same name many times. Lets make this into Sass. I am going to be working in the screen.sass file, so delete everything and your Sass would like:

#header
  :width 900px
  :background #111
  a
    :color #000
    :text-decoration none

Personally, that it much easier to read and write this way, no curly braces or semicolons. The way that Sass understand the nesting is through indentation.

The first selector is not indented at all so the final CSS with start with that. Also, all properties, (so color, height width, etc) begin with a colon. So for the properties for #header they are indented. It does not matter if you use tabs or spaces, but you must remain consistent, otherwise you will see an error (which I’ll show in just a minute).

So now that you have your properties, we have our next selector. Since this is indented to the same as the properties, the CSS output will be #header a ...

Now that we are this far, lets try compiling: (in your project directory)

compass

And voila!

Let’s say that you didn’t indent everything the same, Compass would error:

Now, once you know CSS, Sass wont be very much of a learning curve, as the main difference when getting started is the different formatting rules. Next, we will get working with some of the more advanced (but cooler!) parts of Sass.

Features of Sass

Variables

One awesome feature of Sass is it’s ability to use variables. An example:

!link_color = #fff
#header
  :width 900px
  :background #111
  a
    :color = !link_color
    :text-decoration none

Compiling this, would give you:

Math

You may be laughing at this title, but its true, you can do math in Sass! For this demonstration, we will be using Sass’s interactive mode, so run:

sass -i

And a little messing around would give you:

Or a more visual approach:

#111 – #999 = #000

#111 + #999 = #aaa

#398191 + #111 = #4a92a2

#398191 – #111 = #287080

Apart from addition and subtraction, you can also multiply and divide:

#398191 / 2 = #1c4048

#398191 * 2 = #72ffff

To exit the Sass interactive mode, keypress Control-C, and then type "end", and press enter.

Mixins

If you have ever heard of keeping your code DRY, DRY means "don't repeat yourself." Mixins allow you to do just that. For example, with the gaining popularity of rounded corners, you may want to create a mixin to handle that, so somewhere, (not under a selector) you would add:

=rounded
  :border-radius 4px
  :-moz-border-radius 4px
  :-webkit-border-radius 4px

And to use, you would do something like:

#header
  :width 900px
  :background #111
  +rounded

And when compiled:

Lets say though, you may want the border radius to be variable – well you can have a mixin expect to be passed some values. Changing our mixin, it would look like:

=rounded(!radius = 4px)
  :border-radius = !radius
  :-moz-border-radius = !radius
  :-webkit-border-radius = !radius

And then to use you could use what we did before, and then the value would default to 4px, otherwise:

#header
  :width 900px
  :background #111
  +rounded(8px)

Importing

Sass also has the ability to import other Sass files, so lets say you wanted to import a file (in the same as this sass file), you would add:

@import reset.sass

This feature is really nice in giving you the ability the keep extraneous styles outside your main file. For example, you could also keep a mixins sass file that you copied around projects and then a simple import would add that code it – no copy and paste.

Conclusion

I hope you understand the basics of using Sass and Compass and will possibly use it in your next project! Now, if you are like I was when I found Sass, and said "I don’t need this!", give it a try. I’ve switched over to it for all of my recent projects and I really enjoy working with it.

6: Give all Images Alt Tags

This is a very important step to take, but is often forgotten by many. Styling the

for which images are in, with font types, size and color, will allow for your email to degrade gracefully when images are off by default.

No Alt Tags

Alt Tags

7: Do not Set Widths or Heights to Images

Again, this is a further step to take in order for a lovely gracefully degraded email. If images are off by default, there dimensions will be present, leaving a lot of unnecessary white space throughout.

8: Wrap the Email in a 100% Width Table

Email clients only take the code within the body tags, not the body tags themselves. In order to use a background color, you must create a 100% width table to "fake" the background effect.

	
		
			
				
					
						Lorem ipsum dolor sit amet.

9: No Wider than 600px

Many people don't actually open their email; they instead view them in the preview panel. On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don't want your full email viewable in the preview panel, of course.

10: Link Styling

Don’t forget to style the tag. This will overwrite the email client's standard link tags.

	Link

11: Try not to Nest Tables

Apart from the 100% width wrap table, you should try your best not to nest additional tables. This is easily avoidable; use the stacking system instead.

This allows for a much easier, controllable email.

Avoid

	
		
			
				
					
						Lorem ipsum dolor sit amet.
					
				
			
		
		
			
				
					
						Lorem ipsum dolor sit amet.

Use

	
		
			Lorem ipsum dolor sit amet.
		
	
	
		
			Lorem ipsum dolor sit amet.

12: Avoid Background Images

Stick to block colors rather than images for the backgrounds for your text; only use funky gradients, images, etc. when no text is involved.

13: Borders don't Work

Within emails, we don't have much room for browser or email clients specific fixes, so when we have borders that can either sit outside or inside the

or be included or excluded from the

width, there's not much we can do.

The fix? Drop two extra

's to either side of the main

, and set the background color in each one. This will again "fake" the look of a border and work in all browsers and email clients.

Won’t Work

Lorem ipsum

Lorem ipsum dolor sit amet.

's. Even if the

is set to 10px in width. IE will ignore this and set it to 0.

The fix is to add a transparent GIF, and set this to 10px wide. This then provides you with something to put within the

, thus fixing IE's issues with having empty

's.

Won’t Work

Lorem ipsum dolor sit amet

Nettuts+ » HTML & CSS

20 Email Design Best Practices and Resources for Beginners

1: Keep the Design Simple

2: Use Tables

Not Accepted

Header 1

Accepted

3: Have Web Browsers at the Ready

4: Sign Up for all the Major Email Clients

5: Use Inline Styles

6: Give all Images Alt Tags

No Alt Tags

Alt Tags

7: Do not Set Widths or Heights to Images

8: Wrap the Email in a 100% Width Table

9: No Wider than 600px

10: Link Styling

11: Try not to Nest Tables

Avoid

Use

12: Avoid Background Images

13: Borders don't Work

Won’t Work

Will Work

14: Hotmail Bug Fixes

15: Encode All Characters

May Work

Will Definitely Work

16: JavaScript = Junk Email

17: Give the User a Way Out

18: Users Want Options

19: Use a spacer.gif

Won’t Work

Will Work

20: Send Tests

Other Helpful Resources

General Email Marketing info:

Email Inspiration:

Services

Email Design Tools

Premium Email Templates

9 Most Common IE Bugs and How to Fix Them

1. Centering a Layout

The Fix

2. Staircase Effect

Fix #1

Fix #2

3. Double Margin on Floated Elements

The Fix

4. Inability to Have Elements with Small Heights

Fix #1

Fix #2

5. Auto Overflow and Relatively Positioned Items

The Fix

6. Fixing the Broken Box Model

The Fix

7. Setting a Minimum Width and Height

Fix #1

Fix #2

8. Floated Layout Misbehaving

The Fix

9. Space Between List Items

Fix #1

Fix #2

Fix #3

Conclusion

Learn how to Create a Retro Animated Flip-Down Clock

Tutorial Details

Step 1: The Main Concept

Step 2: Photoshop

Step 3: HTML Markup

Step 4: CSS

Step 5: Creating the Animation

Finished

CSS: The Very First Steps – New Plus Tutorial

Join Tuts Plus

Object-Oriented CSS: What, How, and Why

What is Object-Oriented CSS?

What is the Theory Behind it?

Why Should I Code This Way?