Let’s get real for a second here. As far as web languages go, CSS is arguably the simplest. I mean, really, what could be easier than a simple list of properties affecting an element? And the syntax is almost like written English. Want to change the font size? There’s a font-size CSS property. How about the color? There’s the color property.

But despite its deceptively easy exterior, CSS is one complicated system, especially when you’re doing it in a professional, high-scale, high-performance level. The sheer number of ways to select an element is amazing; not to mention the number of properties you can apply to that selected element set and then how presentation changes when you’re talking about supporting multiple browsers and layout engines.

It’s easy to get tripped up with CSS. Here are some common CSS mistakes we all make.

1. Not Using a Proper CSS Reset

Web browsers are our fickle friends. Their inconsistencies can make any developer want to tear their hair out. But at the end of the day, they’re what will present your website, so you better do what you have to do to please them.

One of the sillier things browsers do is provide default styling for HTML elements. I suppose you can’t really blame them: what if a "webmaster" chose not to style their page? There has to be a fallback mechanism for people who choose not to use CSS.

In any case, there’s rarely a case of two browsers providing identical default styling, so the only real way to make sure your styles are effective is to use a CSS reset.

What a CSS reset entails is resetting (or, rather, setting) all the styles of all the HTML elements to a predictable baseline value. The beauty of this is that once you include a CSS reset effectively, you can style all the elements on your page as if they were all the same to start with. It’s a blank slate, really.

There are many CSS reset codebases on the web that you can incorporate into your work. I personally use a modified version of the popular Eric Meyer reset and Six Revisions uses a modified version of YUI Reset CSS. You can also build your own reset if you think it would work better.

What many of us do is utilizing a simple universal selector margin/padding reset.

* { margin:0; padding:0; }

Though this works, it’s not a full reset. You also need to reset, for example, borders, underlines, and colors of elements like list items, links, and tables so that you don’t run into unexpected inconsistencies between web browsers.

Learn more about resetting your styles via this guide: Resetting Your Styles with CSS Reset.

2. Over-Qualifying Selectors

Being overly specific when selecting elements to style is not good practice. The following selector is a perfect example of what I’m talking about:

ul#navigation li a { ... }

Typically the structure of a primary navigation list is a <ul> (usually with an ID like #nav or #navigation) then a few list items (<li>) inside of it, each with its own <a> tag inside it that links to other pages. This HTML structure is perfectly correct, but the CSS selector is really what I’m worried about.

First things first: There’s no reason for the ul before #navigation as an ID is already the most specific selector. Also, you don’t have to put li in the selector syntax because all the a elements inside the navigation are inside list items, so there’s no reason for that bit of specificity.

Thus, you can condense that selector as:

#navigation a { ... }

This is an overly simplistic example because you might have nested list items that you want to style differently (i.e. #navigation li a is different from #navigation li ul li a); but if you don’t, then there’s no need for the excessive specificity.

I also want to talk about the need for an ID in this situation. Let’s assume for a minute that this navigation list is inside a header div (#header). Let us also assume that you will have no other unordered list in the header besides the navigation list. If that is the case, we can even remove the ID from the unordered list in our HTML markup, and then we can select it in CSS as such:

#header ul a { ... }

Here’s what I want you to take away from this example: Always write your CSS selectors with the very minimum level of specificity necessary for it to work. Including all that extra fluff may make it look more safe and precise, but when it comes to CSS selectors, there are only two levels of specificity: specific, and not specific enough.

3. Not Using Shorthand Properties

Take a look at the following property list:

#selector { margin-top: 50px; margin-right: 0; margin-bottom: 50px; margin-left 0; }

What is wrong with this picture? I hope that alarm bells are ringing in your head as you notice how much we’re repeating ourselves.

Fortunately, there is a solution, and it’s using CSS shorthand properties. The following has the same effect as the above style declaration, but we’ve reduced our code by three lines.

#selector { margin: 50px 0; }

Check out this list of properties that deals with font styles:

font-family: Helvetica; font-size: 14px; font-weight: bold; line-height: 1.5;

We can condense all that into one line:

font: bold 14px/1.5 Helvetica;

We can also do this for background properties. The following:

background-image: url(background.png); background-repeat: repeat-y; background-position: center top;

Can be written in shorthand CSS as such:

background: url(background.png) repeat-y center top;

Using shorthand CSS improves efficiency and makes it easier to maintain our code. For more information on CSS shorthand properties, check out this cheatsheet of CSS shorthand properties.

4. Using 0px instead of 0

Say you want to add a 20px margin to the bottom of an element. You might use something like this:

#selector { margin: 20px 0px 20px 0px; }

Don’t. This is excessive. There’s no need to include the px after 0. While this may seem like I’m nitpicking and that it may not seem like much, when you’re working with a huge file, removing all those superfluous px can reduce the size of your file (which is never a bad thing).

5. Using Color Names Instead of Hexadecimal

Declaring red for color values is the lazy man’s #FF0000. By saying:

color: red;

You’re essentially saying that the browser should display what it thinks red is. If you’ve learned anything from making stuff function correctly in all browsers — and the hours of frustration you’ve accumulated because of a stupid list-bullet misalignment that can only be seen in IE7 — it’s that you should never let the browser decide how to display your web pages.

Instead, you should go to the effort to find the actual hex value for the color you’re trying to use. That way, you can make sure it’s the same color displayed across all browsers. You can use a color cheatsheet that provides a preview and the hex value of a color.

This may seem trivial, but when it comes to CSS, it’s the tiny things that often lead to the big gotchas.

6. Redundant Selectors

My process for writing styles is to start with all the typography, and then work on the structure, and finally on styling all the colors and backgrounds. That’s what works for me. Since I don’t focus on just one element at a time, I commonly find myself accidentally typing out a redundant style declaration.

I always do a final check after I’m done so that I can make sure that I haven’t repeated any selectors; and if I have, I’ll merge them. This sort of mistake is fine to make while you’re developing, but just try to make sure they don’t make it into production.

Check out this list of CSS optimizers that can help you automate the search for inefficient and redundant selectors.

7. Redundant Properties

Similar to the one above, I often find myself having to apply the same properties to multiple selectors. This could be styling an <h5> in the header to look exactly like the <h6> in the footer, making the <pre>’s and <blockquote>’s the same size, or any number of things in between.

In the final review of my CSS, I will look to make sure that I haven’t repeated too many properties. For example, if I see two selectors doing the same thing, such as this:

#selector-1 { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px } .selector-2 { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px }

I will combine them, with the selectors separated by a comma (,):

#selector-1, .selector-2 { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px }

I hope you’re seeing the trend here: Try to be as terse and as efficient as possible. It pays dividends in maintenance time and page-load speed.

8. Not Providing Fallback Fonts

In a perfect world, every computer would always have every font you would ever want to use installed. Unfortunately, we don’t live in a perfect world. @font-face aside, web designers are pretty much limited to the few so called web-safe fonts (e.g. Arial, Georgia, serif, etc.).

There is a plus side, though. You can still use fonts like Helvetica that aren’t necessarily installed on every computer. The secret lies in font stacks.

Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

For example:

#selector { font-family: Helvetica; }

Can be expanded with fallback fonts as such:

#selector { font-family: Helvetica, Arial, sans-serif; }

Now, if the user doesn’t have Helvetica, they can see your site in Arial, and if that doesn’t work, it’ll just default to any sans-serif font installed.

By defining fallback fonts, you gain more control as to how your web pages are rendered.

9. Unnecessary Whitespace

When it comes to trying to reduce your CSS file sizes for performance, every space counts. When you’re developing, it’s OK to format your code in the way that you’re comfortable with. However, there is absolutely no reason not to take out excess characters (a process known as minification) when you actually push your project onto the web where the size of your files really counts.

Too many developers simply don’t minify their files before launching their websites, and I think that’s a huge mistake. Although it may not feel like it makes much of a difference, when you have huge CSS files, it can improve your page response times.

10. Not Organizing Your CSS in a Logical Way

When you’re writing CSS, do yourself a favor and organize your code. Through comments, you can insure that the next time you come to make a change to a file you’ll still be able to navigate it.

How you choose to organize your styles is completely up to you, whatever works. I personally like to organize my styles by how the HTML that I’m styling is structured. This means that I have comments that distinguish the header, body, sidebar, and footer.

A common CSS-authoring mistake I see is people just writing up their styles as soon as they think of them. The next time you try to change something and can’t find the style declaration, you’ll be silently cursing yourself for not organizing your CSS well enough.

11. Using Only One Stylesheet for Everything

This one’s subjective, so bear with me while I give you my perspective.

I am of the belief, as are others, that it is better to split stylesheets into a few different ones for big sites for easier maintenance and for better modularity. Maybe I’ll have one for a CSS reset, one for IE-specific fixes, and so on.

By organizing CSS into disparate stylesheets, I’ll know immediately where to find a style I want to change. You can do this by importing all the stylesheets into a stylesheet like so:

@import url("reset.css"); @import url("ie.css"); @import url("typography.css"); @import url("layout.css");

Let me stress, however, that this is what works for me and many other developers. You may prefer to squeeze them all in one file, and that’s okay; there’s nothing wrong with that. But if you’re having a hard time maintaining a single file, try splitting your CSS up.

12. Not Providing a Print Stylesheet

In order to style your site on pages that will be printed, all you have to do is utilize and include a print stylesheet.

It’s as easy as:

<link rel="stylesheet" href="print.css" media="print" />

Using a stylesheet for print allows you to hide elements you don’t want printed (such as your navigation menu), reset the background color to white, provide alternative typography for paragraphs so that it’s better suited on a piece of paper, and so forth.

The important thing is that you think about how your page will look when printed. Too many people just don’t think about it, so their sites will simply print the same way you see them on the screen.

Related Content

• Saving Bandwidth and Improving Site Speed Using CSS Sprites
• 30 Exceptional CSS Techniques and Examples
• 10 Top-Notch CSS Editors
• Related categories: CSS and Web Development

About the Author

Max Luzuriaga is a freelance web designer (see his work on his portfolio site). He’s also a design blogger at The Design Gnome. He likes web standards and loves talking in the third person. Follow him on Twitter as @designgnome.

What’s the difference between a good design and a great design?

When you sit down and start a new project, that should be one of the questions at the forefront of your concerns.

Yours is a quest to constantly outdo your own past work. To go further and genuinely become better at what you do rather than falling into complacency, stagnation, and eventually, obsolescence.

Unfortunately, the answer to the riddle of what makes a design great isn’t a simple, straightforward formula that you can apply to every design. There is no secret way of designing something that will suddenly make you a hero amongst your peers and lead to your work being featured on every CSS gallery on the web.

Instead of a quick, one-size-fits-all solution to becoming a great designer, this article will present a threefold response that arises from viewing design through three necessarily different perspectives: the designer, the client and the user.

The Designer’s Perspective

This one is my favorite. As designers, our ideal audience are those individuals who understand us the most because they are just like us.

We want to design for the kind of people that will drool over the beauty of our use of CSS3 no matter how impractical the implementation; people who will comment on the aesthetic quality of the textures, the richness of the color palette and the excellence of the typography in the design.

After all, compliments feel good and there is no niche more qualified to provide them than the design community.

As this site and many others prove on a daily basis, this is in fact a legitimate audience. There is money to be made catering to the interests of the world’s designers, and countless sites are designed specifically with this group in mind.

As an example, take the recent redesign of Inspiredology shown above. This is a site created by designers for designers. Consequently, it’s heavy on eye-candy. The header is a beautifully goofy piece of art that always grabs your attention for a few seconds no matter how many times you’ve seen it.

As you scroll around the page, you can see that the quality of the visual appeal is carried on throughout the design.

The difference between good and great design from the designer’s perspective is therefore simple: aesthetics. Put two websites in front of a professional designer, ask him to choose which is the best and chances are that you’ll see the prettier site chosen over the uglier alternative.

It’s simply the way we’re wired. Our knowledge of aesthetics isn’t something to be scoffed at — it’s what makes us valuable. If everyone could make something look beautiful on their own, we’d be out of a job. Attractive graphics have the unique ability to capture the attention of people who would otherwise be uninterested in taking the time to hear what it is you have to say.

However, possessing the ability to see past pure aesthetics is an important aspect to understanding truly great design. Which brings us to our next perspective: the client.

The Client’s Perspective

Unfortunately, not all designers can create primarily for the delight of other designers. In fact, only a tiny percentage of designers can enjoy this luxury. Most are forced to satisfy different types of people whose thought processes drastically differ from their own.

I used to spend my days working for a major marketing company designing dog food ads. Sounds fun, right? There was no one to ogle at my typography or compliment the complex layouts that I was forced to pull off in record time to meet deadlines; only a group of suits with bigger paychecks and zero design training who possessed expert knowledge of how to sell the product.

In this situation, focusing purely on aesthetics won’t garner you a single "great job" or "atta boy!" In fact, corporate advertising — be it print, web, or video — is infamous for an age old battle between creatives (the designer types) and marketers.

The creatives argue that customers will choose the product with the most attractive graphical representation.

Marketers counter by suggesting what customers really want is to have their demographic and psychographic needs addressed while forming a lasting connection with the brand (make-the-logo-bigger mentality).

This same dilemma carries out of corporate marketing offices and into the relationship between freelance designers and small business owners all over the world. The guy running the local auto shop doesn’t care if you win design awards for creating his website, he just wants it to be effective in driving customers into his store.

The difference between good design and great design from the client’s perspective is whether or not the product you’ve provided meets the goals that were originally presented. Though one of these goals is bound to be aesthetics, it is often the case that the final product is a less-attractive but more on-target version of what you originally presented.

As an example of a good client-focused design, consider the site below.

Here we see both perspectives at work. First of all, the designer has created a really great-looking site (not stunning or overly original, but attractive nonetheless). It’s bright, colorful, friendly and quite easy on the eyes. However, if you stop by the site you’ll really get a feel for how much information has been placed on the home page. This is undoubtedly a marketer at work (notice that it is in fact a marketing website).

Here the client needed to present a lot of information and the designer’s job was to do so in an attractive manner. Given complete control, the designer would’ve likely moved a lot of the text to another page — but ultimately the two sides worked together and were probably both forced to compromise a bit to create the finished product.

The User’s Perspective

This is where the ultimate goal of both marketing and design come together in either a harmonious or chaotic attempt to incite and/or facilitate a desired action. The difference between good and great design from the user’s perspective is that one paramount piece of the puzzle that trumps everything else.

When a design finally hits the real world, stereotypes go out the window. Real people don’t fit into the neat little boxes that we try to put them in. They’re complex, unpredictable and each one different than the next.

Some users will care a great deal about aesthetic appeal, others won’t give it a second thought. Some users will analyze every grammatical nuance while others will barely scan a few words.

In the realm of the web, the one thing that ties all your users together is whether or not the design is functional. From the perspective of the user, a great design is one that works. If they can jump on your site, locate the information they want and perform the actions they need to without getting confused, misdirected or frustrated — you’ve won them over.

As much as we designers love to criticize their profound lack of design, Google is the king of this category.

Whether or not you think Google’s strategy is appropriate, the fact is that they currently own 65.8% of the search market, with their competitors Yahoo! and Bing trailing behind at mere 17.1% and 11% respectively[1].

A main contributor to their rise to the top was the simplicity to which they clung to for so many years and are only just now starting to relax in response to those gaining competitors.

This example proves that most people want to use a search engine to do just that: search. And when you look at the iconic Google page, there is no mistaking how to go about this task.

Google users don’t want a bunch of superfluous art or lengthy marketing ploys to distract them, they want the search bar.

As crazy as it sounds, in the case of Google, great design can be attributed to the lack of design.

Bringing It All Together

From peering into the three unique perspectives of the major participants in the professional design world, we can create a picture of what great design really looks like.

To the designer, great design is beautiful design. A significant amount of effort must be placed into making the product attractive.

To the client, great design is effective. It must bring in customers and meet the goals put forth to the designer in the original brief.

Finally, to the user, great design is functional. It’s easy to read, easy to use and easy to get out of it what was promised.

It’s important to note that the lines between the three perspectives are not so clear-cut. Many marketers will care a great deal about aesthetics, many designers will hold effectiveness in high importance and many users will be keen enough to pay attention to all three variables.

Truly great design, then, is when these three perspectives are considered and implemented equally to create a final product that is beautiful, effective and functional.

Keep in mind that the product must be a synergistic realization of the three perspectives and not merely contain elements ideally suited for each. The design must be attractive enough to catch a user’s attention, the message strong enough to communicate effectively to the user and the functionality simple enough to cause the user to take action.

Example: Kaleidoscope

To see what great design looks like in practice, let’s look at an example of a site that’s gotten a lot of attention recently (for good reason). Below is a screenshot of a website for the Mac application, Kaleidoscope.

First, let’s think about the designer’s perspective. Is the site attractive? Absolutely! The colors and graphics are amazing, the typography is classy and the subtle animation in the logo (stop by the site to see it) is pure designer bait.

Further, the single-page site is broken up into five unique but cohesive sections, each with their own wonderfully attractive appeal (two of these sections are shown above).

Now let’s think about the design from the client’s perspective. In this case, the app developer and the site designer were probably one and the same, so the designer-client relationship has a bit of an unfair advantage!

However, if we consider the marketing interests of the creators of the app, they are in fact represented well. To effectively sell the app, the developers would’ve wanted a site that strongly conveyed what the purpose of the app is as well as the features present to get the job done. Also important is a sense of value to entice the customer to make a purchase.

One of the first things you see on the page is the headline "Compare files with Kaleidoscope." This instantly conveys what the app does (compares files) and is reaffirmed by the bolded text in the sub-copy, "spot the differences." This is of course followed by an entire section devoted to each feature of the app. Finally, the value statement is conveyed with the claim that Kaleidoscope is the "world’s most advanced" application of its kind. Even stronger is the statement that the current price is introductory, conveying a sense of urgency to the customer.

To top it all off, let’s think about the site through the eyes of the user. It is attractive so it pulls us in, it’s effective in conveying its message to us about what the app is, but is it functional?

There are three primary things that a user would want to do here:

• Download the app
• Buy the app
• Find out more information about the app

As you can see, both the "Download" and "Buy" buttons are prominently displayed near the top of the site.

Also notice that the price of the app isn’t hidden (it’s 29 euros) on another page as with many Mac application websites. This is a critical piece of information to the user and the developers aren’t making you work to discover it.

Finally, if the user is unconvinced and wants to know more, the thumbnails at the bottom are quick links to the section of the site corresponding to that feature. Here they find screenshots, video tutorials and detailed explanations so they can be fully informed before making a purchase decision.

Simply put, this is great design. Not because it’s attractive, not because it’s effective, and not because it’s functional — but because it is all three.

The Gist

The difference between good design and great design is not a simple matter of implementing all the right colors, illustrations and effects. Great design is, instead, what results when the perspectives of all of the key players are appropriately considered and reconciled in a synergistic fashion.

Aesthetics, effectiveness and functionality are equally important and together comprise your ultimate goal as a web designer.

References

1. Yahoo Swipes Search Market Share From Google

Related Content

• 10 Important Traits of a Great Blog Design
• Comic Sans: The Font Everyone Loves to Hate
• How to Stay Ahead of the Curve as a Designer
• Related categories: Web Design and User Interface

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. I’ve used no images and no scripting; everything’s done using HTML and CSS.

It goes without saying that since CSS3 is still not supported by all browsers, it might not work as intended; but I’ve coded this in such a way that it will degrade gracefully on non-CSS3 browsers, including IE (of course).

Experimenting on cutting-edge standards for the sake of innovation is an attribute that helps us learn, and perhaps by pushing the boundaries, we can improve our knowledge further.

Final Result

You can click on the preview image to see the demo. For optimum experience, use a WebKit browser like Google Chrome or Apple Safari.

View Demo

Download Source

A Primer on Innovation

If you ask any self-taught professional, motivation and willingness to experiment are the two primary skills that feed their passion to becoming better designers and developers.

While memorizing every single element, property, function and attribute for every language is an option, knowing what they can do is even better.

Whether you are working out how to fix a browser bug, achieving a complex layout, or if you simply want to play around and see what you can come up with (like this example), the ability to hone your skills to match the situation puts you in a fantastic position for whatever the world may throw at you.

Now that the inspiring speech about the justification behind this fun experiment is over, it’s time we begin examining and reconstructing this example to display how everything came together to produce the final result.

Within this experiment we will be taking advantage of some cool CSS3 code (which you can use in other projects) such as border-radius, box-shadow along with the target and checked pseudo classes.

Oh, and if that wasn’t enough, we’re even going to use a few WebKit transformations to give Chrome and Safari (they support animations) a progressively-enhanced experience.

So what I hope will happen is that by going over the process of creating these CSS3 playing cards, you’ll have fun learning about these new CSS3 capabilities.

Fragments and Fieldsets

Like with all websites, we need to begin right at the beginning with some HTML that lays down the tracks for the experiment.

For the purpose of this example, we’ll keep the CSS and JavaScript used inline inside the document so that you can easily use the View Source feature in your web browser while studying the demo. But in production, I hope you will keep your CSS and JavaScript external.

In the code block, you will find:

• An unordered list that will feature the various card suits
• A paragraph of text which simply describes the experiment on the page
• A (very complex) web form that will hold the stylistic variables which make up each of the cards

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Playing Cards with CSS3!</title> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <ul> <li><a title="Select Spades" href="#spades">♠</a></li> <li><a class="fire" title="Select Hearts" href="#hearts">♥</a></li> <li><a title="Select Clubs" href="#clubs">♣</a></li> <li><a class="fire" title="Select Diamonds" href="#diamonds">♦</a> </li> </ul> <form action=""> <fieldset id="spades"> <input class="card" id="spade" type="radio" name="spade" value="spade" /> <label class="base" for="spade" title="This is the Ace of Spades!"> <span><em>A</em>♠</span><strong>♠</strong><em>A</em>♠ </label> <input id="cancel1" type="reset" name="spade" value="cancel" checked="checked" /> <label class="close" for="cancel1">Spades</label> </fieldset> <fieldset id="hearts"> <input class="card" id="heart" type="radio" name="heart" value="heart" /> <label class="base fire" for="heart" title="This is the Ace of Hearts!"> <span><em>A</em>♥</span><strong>♥</strong><em>A</em>♥ </label> <input id="cancel2" type="reset" name="heart" value="cancel" checked="checked" /> <label class="close" for="cancel2">Hearts</label> </fieldset> <fieldset id="clubs"> <input class="card" id="club" type="radio" name="club" value="club" /> <label class="base" for="club" title="This is the Ace of Clubs!"> <span><em>A</em>♣</span><strong>♣</strong><em>A</em>♣ </label> <input id="cancel3" type="reset" name="club" value="cancel" checked="checked" /> <label class="close" for="cancel3">Clubs</label> </fieldset> <fieldset id="diamonds"> <input class="card" id="diamond" type="radio" name="diamond" value="diamond" /> <label class="base fire" for="diamond" title="This is the Ace of Diamonds!"> <span><em>A</em>♦</span><strong>♦</strong><em>A</em>♦ </label> <input id="cancel4" type="reset" name="diamond" value="cancel" checked="checked" /> <label class="close" for="cancel4">Diamonds</label> </fieldset> </form> <p>Select an option above to change the suit displayed!</p> </body>          </html> Unicode Characters for the Card Suits

While much of the HTML above is straightforward, there is something worth mentioning for its value in our discussion. Within both the list and the form, you will notice that there are a lot of strange Unicode escape characters (such as ♦) which are embedded at various points.

When you view the page in your browser, you will notice that these characters represent each suit (spades, hearts, clubs and diamonds) and therefore we can give the cards their appearance without any images.

The list has one mention for each icon, and each form has 3 for each (for the corners and centerpiece).

With the HTML finished, you should see the list, table and text (plus those cool characters).

What’s With The Web Form?

You may be curious about the monstrous HTML web form. The justification for such code is simply due to the way the CSS3 will work with the elements. While the list element uses simple fragment links (attached to the frameset container for each card), each card — when it appears — contains two input elements with associated labels.

The first label contains a mixture of span and em elements (to give the card value in the corners) and a strong element (for the big central character).

The second label simply acts as a reset mechanism for the special effects, i.e. when a WebKit browser is being used.

Laying the Foundations

Now that we have completed the HTML, it’s time to move onto the CSS. To begin, we will add in all the CSS content for the web page; and we also need to give our cards a bit of color.

The below code begins our journey into CSS3 by taking advantage of both the border-radius and box-shadow CSS properties (with a few compatibility tweaks).

IE Support

It’s worth noting that the filter property will not validate under W3C CSS standards due to it being a proprietary extension for Microsoft’s Internet Explorer; but as this is just for fun, the validation of the code is less important. This allows us to support Internet Explorer; that’s a good enough reason to break auto-validation in this case.

body { background: #DDDDDD; overflow: hidden; } body .fire { color: #FF0000; } p { background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); font-size: 25px; text-align: center; height: 30px; width: 600px; margin: -35px -300px; padding: 10px 15px; position: absolute; bottom: 50px; left: 50%; z-index: 99; }

Using the above code, you should see a lovely looking paragraph on your page!

Navigation, Simplified!

Next on the list is the navigation. For our playing card experiment, we shall be making use of anchor fragments that will show and hide each of the cards (as required).

While the code you’ll see next doesn’t contain the CSS3 that will activate the navigation (we’ll get to that later), you will notice the code that not only floats the navigation to the top-right hand side of the screen, but also adds the same cool border-radius and box-shadow effects.

When you refresh the page after plugging in this code, you should see that the links are now highly visible and make use of our awesome Unicode characters.

ul { background: #FFFFFF; border: 1px solid #CCCCCC; background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); font-size: 50px; margin: 0; padding: 0 15px; position: absolute; right: 20px; top: 15px; z-index: 99; } ul li { display: inline; list-style-type: none; } ul li a { color: #000000; display: block; float: left; padding: 0 10px; text-decoration: none; }

Now we have the list hovering and ready for action (along with that paragraph).

Styling the Aces

The most complicated part of the CSS is making the cards look like, well, like playing cards. Using the code that follows will get you the perfect and progressively enhancing design elements that make the final look possible.

Code to pay attention to includes:

• The CSS3 linear gradient that fade the cards
• The reversed gradient using the mask-image property on the center character (providing an even softer feel)
• A span label effect which rotates the bottom right reference to make it upside down (just like real cards)

All simple but very effective.

.base { background: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); height: 360px; top: 50%; margin-top: -180px; width: 260px; left: 50%; margin-left: -130px; z-index: 9; cursor: pointer; font-size: 50px; text-decoration: none; padding: 15px 0 0 25px; position: absolute; } strong { font-size: 250px; position: absolute; left: 50%; top: 50%; margin-top: -160px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); } em { font-size: 40px; font-style: normal; display: block; margin-bottom: -15px; } label span { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); position: absolute; bottom: 15px; right: 25px; } #spades strong { margin-left: -68px; } #spades em { margin-left: 0; } #hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; } #clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; } #diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; }

Note: Depending on the browser used, the effects may look different. Chrome, Safari both support all the fancy stuff, Firefox will have the background gradient (but the center character will look strong), and Opera and IE will have no "worn" effects!

With some clever coding, the playing cards should now look easy on the eyes.

Navigation and Animation

Using the code above, your cards should appear like they come from a proper deck of playing cards. Now that we have the cards, navigation, and paragraphs looking all pretty, it’s important that we get each of the cards appearing on demand. And we should also do something with the cancel and radio buttons that are hovering around behind the scenes.

What happens next is where things get really interesting for you WebKit users.

fieldset { display: none; } fieldset:target { display: block; } fieldset:target .card+label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; } fieldset:target .card:checked+label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); } .close { background: #DDDDDD; cursor: default; left: 0; top: 0; position: absolute; height: 100%; width: 100%; z-index: 1; text-indent: -999em; } @-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } } @-webkit-keyframes effectx { from { -webkit-transform: rotateX(0deg); } to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(500px) rotate(180deg); -webkit-animation-duration: 30s; } }

Explaining the above code is very simple. With the anchor links, we are using fragment URLs to navigate between cards in the deck and therefore the target pseudo class hide and show the fieldset as its ID appears.

The .close class takes its place behind the card covering the full browser viewport so that upon clicking the page (once the card is hidden), you can restore the item back to its original position.

This is relative to the usage of radio buttons as we shall be using the CSS3 :checked pseudo to animate the content for WebKit browsers depending on the check state.

The animation and effects may not show, depending on your browser.

The main features that WebKit users will be excited about are the two card classes that trigger either the scaler keyframes which will make the card zoom in (from nowhere) or the effectx keyframes that will rotate and flip the card which makes it appear as if it’s being pushed over (and falling off the page).

We can also add some simple effects that work alongside the checked property to give some lovely experimental fun stuff that you can interact with (if you use Chrome or Safari). Other browsers will simply ignore the actions.

Note: With most WebKit animations, once the effect has run its course, it will be reset to a default point. Because this example required the effect to remain permanent (until directed by the user otherwise), I made use of the checked state pseudo and radio buttons to ensure the effects were held firmly in place.

Dealing with Internet Explorer

OK, so remember in the beginning when I said I’ve used no scripting? Well that’s only partially true.

Because IE doesn’t yet support all these things, we need to use JavaScript so that at least our IE users will have a decent experience.

Of course, if you don’t care about IE — after all, this is an experiment for cutting-edge browsers that support CSS3 — then, yes, this CSS3 experiment uses no scripting whatsoever.

Luckily, because IE — like other non-WebKit browsers — don’t support the CSS3 animated effects, the need to deal with the checked state (in CSS3) is moot since the effect will be non-functional anyway.

However, one thing that should be available is the target pseudo so that IE users can change the suit of the playing card.

Using a small bit of conditional JavaScript, we can replicate the effect with little impact on the browser. There’s also a fragment redirect in the script to help browsers load the first card.

function bootup(){ if (location.hash == "") { location.hash="#spades"; } var tds = document.getElementsByTagName("a"); direct(); for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(direct, 1);};} } function direct(){ /*@cc_on @if (@_jscript_version > 5.6) var counted = document.getElementsByTagName("fieldset"); for( var x=0; x < counted.length; x++ ){ counted[x].style.display = "none" } document.getElementById(location.hash.substr(1)).style.display = "block"; @end @*/ } window.onload=bootup;

The example should now be complete and have some neat special effects!

While the above code should be enough to get the basic effect working on the latest version of IE, its worth highlighting that I didn’t spend much time attempting to get the effect functional on really old browsers like IE6.

Because this is a proof-of-concept demonstration — and because it exists just to play with what’s available in up and coming standards — there was no incentive to try and fire the effects onto every browser.

It’s worth saying, however, that if you do intend on using any of this in a production site, you should support the browsers your visitors use.

Playful Innovation

Just a few years ago, the ability to produce such a textured playing card that looks like an image would not have been possible without the use of images. The animation effects, without scripting or Flash, would have been beyond most people’s dreams.

Our proof-of-concept shows the benefits of modern standards, and what the future is for us web designers and web developers.

The need to keep innovating and pushing our browsers to the limit is an important part of the web’s evolution.

As a web professional, I always try to spend time learning and examining my own abilities to see what unique solutions I can produce. Ideally, after reading this, you will be inspired to experiment on your own. Good luck and share your own experiments in the comments!

Related Content

• 10 Interesting CSS3 Experiments and Demos
• Semantic CSS3 Lightboxes
• 3 Advanced CSS3 Techniques You Should Learn
• Related categories: CSS and Web Development

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Sensational Jobs, a slick job board for web professionals that’s taking the industry by storm, teamed up with Six Revisions last week to give Apple Trackpads to 3 winners. In this post, we’re announcing the 3 lucky Six Revisions readers who’ve won.

The Winners of Apple Trackpads from Sensational Jobs

The 3 winners are:

• James Rasmussen
• Jonelle
• Drew Watkins

Congratulations! The awesome folks at Sensational Jobs should have already contacted you about your prize.

Please Send a Quick Tweet!

Please send a tweet congratulating your fellow Six Revisions readers. Also, stay tuned for more Six Revisions giveaways by subscribing to our RSS feed.

About Sensational Jobs

Sensational Jobs is a brand new job board for web designers and developers that’s easy to use. Unlike most general job boards, Sensational Jobs focuses purely on web professionals in order to generate targeted and quality results in these fields.

Check out their generous and easy-to-use affiliate program for your blog, and follow them on Twitter as @sensationaljobs to get real-time job posting alerts.

Related Content

• Win an Apple Magic Trackpad from Sensational Jobs
• Getting Started with the iPhone SDK
• How to Make an HTML5 iPhone App
• Related categories: Web Design and Web Development

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter as @sixrevisions.

Personal outsourcing isn’t quite the hot topic that it was two years ago. With virtual assistant firms available left and right, could-be assistants have become less of a unique work accessory and much more of a sustainable, ubiquitous business addition.

What was once a quirky but useful tool for the digital age has become standard — nowadays it’s rare to find a small design firm without a personal outsourcing strategy.

But while personal outsourcing has become popular, it’s certainly not a process that’s loaded with security and simplicity. Virtual assistants are notorious for packing up at random and leaving employers with projects in a state of limbo.

While thousands turn to personal outsourcing as a way of simplifying their workday, many find it achieves the exact opposite.

Managing your online assistant(s) doesn’t need to be a painful exercise, particularly with the right staffing strategy on your side. Apply these eight tips and you’ll see a noticeable increase in how efficient, effective, and worthwhile your outsourcing endeavors are, no matter how small or large your team is.

1. Never Rely on Just One Service Provider

For most people, one full-time outsourced employee is enough to complete basic tasks and manage extra work. Regardless, it’s important to keep a backup planned, especially if your work is subject to deadlines and urgent "complete by" dates.

Online assistants are known for disappearing at the worst possible times, particularly when they’re contacted through a semi-anonymous contract bidding website. So keep a backup provider ready, whether through a loose email connection or by switching through providers for different tasks and projects.

By splitting your workload across multiple assistants, you’ll end up less exposed to fallout from failed projects and mystery disappearances.

Use Elance or another outsourcing service to build a database of prospective full-time assistants.

2. Increase the Duties of Your Assistants Gradually

Three years ago, 43 Folders carried an excellent article on the psychological barriers surrounding personal outsourcing. Not surprisingly, one of the most common objections to outsourcing basic tasks is the trust factor — people are largely skeptical that a low-cost employee can manage their workload effectively.

The obvious solution to this is rarely taken, largely because people are opposed to outsourcing entirely out of fear. Guide your assistants into the position slowly by gradually increasing the importance of submitted tasks and you’ll end up with a small stable of effective, trustworthy remote employees.

For example, you could start with simple tasks such as booking an appointment, searching for a hotel, or tracking down a piece of software.

Assign the same job to multiple employees and you’ll gain an understanding of who among them are proficient enough for the position — and who aren’t.

With just a week of testing and a small budget, you can put together a team of assistants that are stress-tested and capable of taking on the work you need completed.

3. Sort Your Tasks by Importance

It’s tempting to send your assistants a hundred-item list of tasks to complete, asking them to report back at the end of the month for the next chapter in a project. While this strategy can work well on long-term employees and experienced providers, it’s unlikely to mesh well with new hires.

Mistakes become more apparent without direction, and when communication is cut down, it’s much harder to eliminate errors and refine the type of work you need completed.

Work on a day-by-day basis with new employees, offering new tasks and providing feedback after they’re completed.

By cutting your major projects into smaller action-related groups, you’ll be able to focus on efficiency and eliminate mistakes before they become a liability. Start by requesting a daily progress report from assistants, and expand the reporting period as mistakes are ironed out.

4. Be Specific and Detailed with the Tasks You Assign

Ask an assistant to rent a car in New York and you could end up with a two-seat compact car conveniently located fifty miles away in New Jersey. Of course, that’s no use to you — what you wanted was a family van available for pickup from the airport.

The damage is obviously greater when applied to offline tasks, but online projects can easily go just wrong when essential details are overlooked.

Instead of asking your assistants to complete a task, ask to have a task completed according to a detailed set of instructions. Offer unspecific instructions and you’ll be met with work that’s equally inaccurate.

It may seem like an anti-productivity move at first, but offering more detailed instructions will lead to more accurate and effective output from your assistants and outsourced staff.

5. Separate Emails for Outsourced Tasks

Using your regular email address to manage staff will lead to disaster. With just a few remote assistants, messages will quickly pile up and make it near impossible to read correspondence from other contacts, let alone respond to them.

Collaborating on work requires a surprising amount of back-and-forth communication, giving you a good reason to separate outsourcing-related emails from other email.

We recommend communicating with assistants via email; the vast majority of collaboration suites out there are too bloated and ineffective to work for small, one-off tasks.

Set up a secondary email address or have your current email account automatically sort messages from assistants into a new folder or label; not only will this lead to a better ability to focus on important tasks without distraction, but you’ll also be able to automate task recording and build a separate history of communications with your staff.

6. Shop Around and Be Patient

Post an advertisement on any leading assistant website and you’ll be inundated with applications, most of which just aren’t very good. From spelling mistakes to nonsensical sentences, it’s far from uncommon to find that your first attempts at personal outsourcing are met with a questionable set of replies.

Resist the temptation to pack in the towel and stick at it — finding good assistants takes time.

Allow for at least a month when searching for a long-term online assistant, just as you would when hiring offline staff.

Cutting the process short may lead to short-term productivity gains and a quick search, but it’ll inevitably result in long-term losses due to missed opportunities and rash choices.

Spend the first few weeks trialing several different assistants and you’ll end up with a high quality hire — someone who is likely to generate long-term results and reduce your outsourcing stresses.

7. Be Nice and Professional

The employer/virtual assistant relationship is similar to the client/freelancer relationship. Whether you opt for a long-term hire or simply choose to outsource to assistants on a per-project basis, remember that you’re working on the other side of the transaction this time.

In essence, be the type of client that you like working with — your assistants will appreciate it, especially if they work with other people too.

If you plan on working with an assistant for an extended period, go out of your way to keep work efficient for them too. The goal of personal outsourcing is to increase your efficiency, and as unusual as it may sound, the greatest way to increase your efficiency is to ensure that your staff are able to work efficiently too.

Put the hours in and work out a strategy with your assistant(s); it’ll save you time and increase the amount of work they can complete for you.

8. Use Productivity Tools and Resources to Help You

Have you experimented with personal outsourcing? Before you take the plunge and hire your own online assistant, use these resources and productivity tools to ensure you go about it the right way.

The International Virtual Assistants Association has its own code of ethics, information for freelancers, and a directory of qualified virtual assistants – the perfect hiring resource.

Elance and oDesk claim thousands of virtual assistants and task-specific freelancers. Indian outsourcing firm GetFriday has a staff of over 150 personal assistants from $15 hourly.

A.J. Jacob’s piece on personal outsourcing from Esquire offers a humorous look at the possibilities of personal outsourcing.

Productivity expert Tim Ferriss compares fourteen different personal outsourcing companies and virtual assistant providers.

Related Content

• Website Features That You Can Easily Offload
• How to Start a Freelance Company
• 10 Ways Designers Can Earn More from Projects
• Related categories: Project Management and Productivity

About the Author

Mathew Carpenter is an 18-year-old business owner and entrepreneur from Sydney, Australia. Mathew is the owner of AddToDesign, a website which provides value added design buzz, along with Design-Newz, the premier source for aggregated design news. Follow Mathew on Twitter: @matcarpenter.

Want to increase your website’s conversion rate? Want more subscribers, opt-ins, members, customers? How about doing less work while you’re at it?

Too good to be true? Nope.

It’s possible if you apply the 80-20 rule: focus on the 20% that will bring you 80% of the results.

By doing an 80-20 optimization of your website — whittling your pages down to the 20% of things that produces 80% of the results — you’ll not only have a simpler site that’ll convert better, but you’ll have less work in developing and managing it since there’ll be fewer elements to think about.

Okay, so the above claim about less work was only partly true — you’ll have to do a bit more work upfront, but the benefit is less work and more rewards afterwards.

80-20 Whut?

The 80-20 rule is another term for the Pareto principle.

While dropping the term "Pareto principle" will make you sound smart and hip to your friends — not to mention increasing your conversion factor with the opposite sex — we’ll go with the simple and self-explanatory "80-20 rule."

So what the heck is this 80-20 rule? It means that 80% of all outcomes come from 20% of the causes.

Business management thinker Joseph M. Juran suggested the principle and named it after the Italian economist Vilfredo Pareto who observed in 1906 that 80% of the land in Italy was owned by 20% of the population. Juran developed the principle after observing that 20% of the pea pods in his garden contained 80% of the peas.

The 80-20 rule is also a common rule of thumb in business, i.e. 80% of your sales come from 20% of your clients.

The 80-20 Rule Can be Applied to Your Website

The 80-20 rule applies to anything. Personal tasks, business, software, whatever.

The 80-20 rule can even be applied your website.

Hey, websites — that’s the topic of this article. What a coincidence!

Applied in designing and running a website, we can interpret the 80-20 rule to say that 20% of things on your site would give you 80% of your desired results. What this means is that you should focus on that 20% and really perfect it, instead of spreading yourself thin.

Ruthlessly get rid of the other 80% of things as they’re non-essential details that only give you 20% of the results (the return of investment for that other 80% is low).

Some examples:

• Sidebar widgets that aren’t being used
• Social media buttons (how many users do you think click on the Digg button on the article out of the thousands that visit it?)
• A list of the latest blog posts on the sidebar (users can go to the front page, it’s redundant)
• Main menu links that aren’t being viewed much such as FAQ and Help pages (move them somewhere else)

After taking things out, perfect and focus on what’s left.

Why Care About 80-20?

Yeah, yeah, so the 80-20 rule is all fine and dandy, you might say.

"But what’s in it for me?" you might ask. "Why should I care about 80-20-ing my website? What are the benefits?"

All valid questions.

First, here’s how it benefits your website visitors:

• Your visitors experience a lean, mean and simple site
• Less distraction and clicking away from the main goal or call-to-action
• Faster page response times
• The stuff that’s left will be higher quality because you can concentrate on them and perfect them

And, even better, here’s how it benefits you:

• Higher conversion rate: more subscribers, opt-ins, members, customers
• A higher percentage will go to your primary call-to-action
• Less work to do and more time to do it since you’re only doing that 20% which actually matters
• Easier design and management work — less elements to deal with

5 Steps to 80-20 Your Website

1. Figure out what’s your main goal and/or call-to-action (the 20%).
2. Round up all the rest of the things and elements on your site that don’t pertain to your main goal/call-to-action (the 80%).
3. Toss out the unneeded elements from your site; easier said than done, but it’s a critical step.
4. Determine if your changes are effective; use split testing.
5. Tweak and perfect your site’s design and interface so that the remaining 20% are prominent and emphasized.

Think 80-20 Is Bullshitake? Here’s Proof It Works

80-20 rule proponent and analytics wizard Tim Ferriss has a website optimization case study of how an 80-20-optimized website received a 20%+ higher conversion rate.

The best part? Only a few simple changes were needed to be made.

It was just a matter of reducing the homepage such that it only contained 20% of the elements that produced 80% of the results. The rest were tossed out.

These are the essential 20%:

• Clean call-to-action button
• Simple value statement
• Clear media credibility indicators

The Case Study: Daily Burn

The homepage originally looked like this.

Not bad, right? Nice, simple design.

But can you tell why it wasn’t optimized?

Go ahead, look. I’ll wait.

Back? Okay, so there’s actually a bunch of unnecessary elements on that homepage that didn’t fit with the main objective of the page; the 80%.

The things that don’t relate to the main call-to-action, which converts visitors by getting them to register:

• A number tracker of how many calories burned
• User activity list
• Latest blog posts
• A bunch of junk in the footer
• Menu navigation at the top

So the website was 80-20-optimized by trimming the unimportant 80% of the elements from the homepage.

The simplified homepage now looks like this.

What a huge improvement.

80% of the items were removed, leaving only the 20% of items that function to increase the conversion rate:

• The value statement and description
• The call-to-action button
• Media credibility indicators

So how did they know that the conversion rate increased? Two separate tests were done, split testing the simplified home page against the original (50% of visitors were sent to one design, 50% to the other).

In the first test, there was a 21.1% increase in the conversion rate. In the second test, a 19.8% increase.

So, there was a 20% increase in the conversion rate just from 80-20-ing their website. As you’ve seen, pretty simple stuff was done — no heavy overhaul needed.

But they didn’t stop there — they freakin’ 80-20′ed even more. It’s how it should be done.

They came up with 2 more variations of a new design that was even simpler.

Variation B

Variation C

And sure enough, both were an improvement over the new simplified design, with variation B being the clear winner.

Why?

There are 2 big changes:

• Value statement was made even more clear
• Much more noteworthy: one signup button instead of both the signup and tour button (so now instead of 2 options, a visitor has only one option)

By using the 80-20 rule to simplify their homepage, these folks optimized their site and increased the conversion rate.

So yeah. The 80-20 rule. It really works in improving a website’s effectiveness.

80-20 Your Website to Increase Conversions

If you want to increase your website’s conversion rate — and set yourself up to do less work while you’re at it — then you absolutely need to 80-20 your website.

You’ve now hopefully seen that the 80-20 rule applied to your website isn’t bullshitake but something that’ll actually help you.

Look at what 20% of things on your site would give you 80% of your desired results: more subscribers, opt-ins, members, customers. Then only have those elements on your site, while getting rid of the rest of the 80% of elements.

By using the 80-20 rule to optimize your website, you’ll be well on your way to increasing your site’s effectiveness.

Now go out there and destroy that unnecessary 80% from your website, soldier.

Related Content

• Creating a Timeless User Experience
• Reductionism in Web Design
• Five Reasons Why You Shouldn’t Expand Your Design Business
• Related categories: Web Design and Content Strategy

About the Author

Oleg Mokhov is the world’s most mobile electronic musician and co-founder of the royalty free music store Soundtrackster. He was born in Russia, but raised in the US. Follow him on Twitter as @olegmokhov.

There are a lot of free icon sets out there for you to use. In this collection, we rounded up a few icon sets from all over the web that you can use in your design projects.

The hundreds of featured icons here are diverse in their styles: glossy, hand-drawn, realistic, textured are among the design themes you’ll find. I hope you find a handful of icon sets that you’ll bookmark, download, and use!

Note: You should read the license of each icon set before using them. Some of the icon sets featured here are available only for personal use.

If you want to discover more free icons, check out our other collections:

• 40 Beautiful Free Icon Sets
• 30 High-Quality Icon Sets for E-Commerce Designs
• 40+ Stylish and Trendy Icon Sets
• Freebie Icons category on Six Revisions

In addition, here our our collections of icon design tutorials in case you want to learn how to make icons yourself:

• 50 Excellent Icon Design Tutorials
• 50 Wonderful Icon Design Tutorials

1. Icons Pack "Web Cartoon"

40 icons – 48×48px – PNG format.

2. Near

15 icons – 170×130px – PNG format.

3. Adobe icons

5 icons – 32×32–512×512px – PNG format.

4. Blue icons

5 icons – 256×256px – PNG format.

5. So sweet

6 icons – 100×100px – ICO format.

6. Project Icons

165 icons – 32×32px (some 48px) – PNG, ICO, ICNS formats.

7. Toolbar Icon Set

35 icons – 32×32px – PNG, ICO, ICNS formats.

8. Sport balls set

6 icons -500×500px – PNG format.

9. Fruit Pack

8 icons – 16×16–48×48px – PNG, ICO, and ICNS formats.

10. 32px Mantra v2

39 icons – 32×32px – PNG format.

11. PixeloPhilia2

44 icons – 32×32px – PNG format.

12. Drinks

8 icons – 64×64-128×128px – PNG format.

13. Classy Folder Icons

29 icons (and 6 color themes) – 16×16-512×512px – PNG and ICO formats.

14. Gifts icons pack 2

3 icons – 64×64-128×128px – PNG, ICO, and ICNS format.

15. Falcon 32px

21 icons – 32×32px – PNG format.

16. Abobe CS5 Master Collection Icons

24 icons - 128×128px – PNG format.

17. Icecream icon set

6 icons – 64×64–256×256px – PNG, ICO, and ICNS formats.

18. 12 Creative Wooden Social Networking Icons

12 icons – 16×16–256×256px – PNG format.

19. Kitchen icons

34 icons – 128×128px – PNG format.

20. Folders: A Free Icon Set

9 icons - 256×256-512×512px – PNG format.

21. Gifts icons pack 1

3 icons - 64×64-128×128px – PNG and ICO formats.

22. Social and Web Icons

57 icons – 64×64px – PNG format.

23. Lovely website icons pack 1

8 icons – various dimensions – PNG format.

24. Lovely website icons pack 2

8 icons – various dimensions – PNG format.

25. Currency Stock Icons

4 icons – 64×64-512×512px – PNG format.

26. Artcore Icons Nr. 1

9 icons – 512×512px – PNG format.

27. Artcore Icons Nr. 2

7 icons – 512×512px – PNG format.

28. Mini Icon Set

22 icons – 16×16-48×48px – ICO, ICNS, and iContainer format.

29. General Vector Icons

8 icons – 32×32px – PNG and AI formats.

30. Sinem Final Version

26 icons – 512×512px – PNG, ICNS, and iContainer formats.

31. Burnt Wood: A Social Media Icon Set

12 icons – 420×420px – PNG format.

32. Gentle Romantic icons

5 icons – 512×512px – PNG format.

33. Very Emotional Emoticons

40 icons - 32×32-128×128px – PNG format.

34. Incredibly Detailed 3D Icon Set

30 icons – 128×128px – PNG format.

35. 60+ Detailed Vector Icons

60+ icons – 32×32-96×96px – PNG format.

36. “Where Are My Money” Icon Set

6 icons – 256×256px – PNG format.

37. Twitter Icons TweetMyWeb

10 icons – various dimensions – PNG format.

38. Fliraneo icon pack

5 icons – various sizes – PNG format.

39. WooFunction: 178 Amazing Web Design Icons

178 icons – 32×32px – PNG format.

40. Free Set of 25 Icons from TurboMilk

25 icons – 16×16-64×64px – PNG format.

41. Basic set

42 icons – 16×16-64×64 – PNG format.

42. Basic Set 2

42 icons – 16×16-64×64 – PNG format.

43. Office Supplies

9 icons -512×512px – PNG format.

44. Morning Pleasure

16 icons – 256×256px – PNG, ICO, and ICNS format.

45. Social Buzz Icon Pack

12 icons – various dimensions – PNG format.

46. 3D Social Media Icon Pack

20 icons – 64×64px – PNG format.

47. NIXUS Icon Pack

60 icons – 32×32-64×64px – PNG format.

48. Vibrant Stickers Web Icon Pack

15 icons – 256×256px – PNG format.

49. Browsers – Navigateurs

10 icons – 256×256px – PNG, ICO, and ICNS format.

50. Mobile Icon Set

10 icons – 32×32-128×128px – PNG format.

Related Content

• 35 Professional Clean Fonts For Your Designs
• 30 Creative and Unique Free Fonts
• Social Sketches: Exclusive Free Hand-Sketched Icon Set
• Related categories: Resources and Web Design

About the Author

Tomas Laurinavičius is interested in web design, graphic design and web development, based in Lithuania. He’s also the founder of Iniwoo, a site about photoshop, web design, wordpress and inspiration. If you’d like to connect with him, you can follow him on Twitter.

It takes plenty of resources to bring you articles about design and development free of charge. Without our sponsors, we wouldn’t be able to bring you top-notch content that you can enjoy and learn from.

Thankfully, we’re able to do all of this with the help of our sponsors who support our community — companies that also create amazing products and provide excellent services to web professionals like us.

We’d like to thank our site sponsors between July 1, 2010 – August 30, 2010 and talk a little bit about what they do.

As readers, you can support Six Revisions by checking them out and seeing if they have products and services that you can take advantage of.

1. Site5 Web Hosting

Site5 is a web hosting provider catering to the needs of web designers. They have several plans starting from shared hosting at $4.95 a month to dedicated servers at $165 a month. If you are on another web host and would like to move to Site5, they offer a free website migration service handled by their expert migration admins. Only a few hosts can reconcile excellent uptime, features, and support with dirt-cheap prices — Site5 is one of them.

2. FreshBooks

FreshBooks is a web-based application for sending, managing, and tracking your invoices. It has a wonderful interface that makes it a cinch to produce invoices that you send to your clients. They have over 1 million users and were able to conduct $1 billion woorth of transactions in just 4 months — a testament to the excellence of the app.

3. Stackable.com

Stackable is a relatively new VPS provider aimed at web application developers. For only $35 a month, you get 1TB of bandwidth, 256MB RAM, a DNS manager, and more. What’s great about Stackable is their 1-click scalability: At no cost, you can scale your VPS up if you’re expecting a lot of traffic (bursting it up to 16GB), or scale it down during idle times. Stackable can be your development and staging server to test new features before deployment, or it can be your production server. Stackable has a nice knowledge base filled with helpful tutorials and reference for VPS administration.

4. MailChimp

MailChimp is a web application for dealing with email marketing campaigns. Used by over 400,000 people, the application is loaded with useful features such as social media integration, a slick backend for managing your email campaigns, and even mobile apps for when you’re on the go. Developers get access to their robust API for creating apps and tools that leverage MailChimp’s web service.

5. Bigstock

Bigstock is a user-friendly marketplace for high-quality stock images. Started in 2004, they quickly grew to become one of the Web’s leading stock photo sites. Bigstock has over 5 million royalty-free photos organized in 27 intuitive categories. You can purchase stock photos for as low as $1 each. The way it works is you buy Bigstock credits to download only the stock photos you need, which starts from $15 for 5 credits.

6. Verio

Used by over 250,000 companies in 146 countries, Verio is one of the largest hosting providers for sites, applications and SaaS. They were named the Best Hosting Company of 2008 by HostingReviews.com. They have many hosting services such as small business website hosting, Microsoft Exchange email hosting, domain name registration and management services, dedicated servers on Linux or Windows, and more.

7. Shutterstock

Shutterstock is one of the biggest stock image sites with over 12 million royalty-free photos. They have monthly subscription plans or the option for on-demand subscriptions to their images (such as 5 high-resolution photos for $49). They have over 240,000 photographers contributing stock photos to their marketplace, and they add close to 80,000 new photos per week!

8. Top 25 Web Hosts

TopHosts.com is a complete web hosting resource, providing site owners tools and information about the hosting industry. Founded in 1997, TopHosts.com has been around for a quite a while! They provide a forum as a venue to bring people together to discuss web hosting, as well as a Top 25 Web Hosts list that highlights top-notch hosting providers in various categories (such as Best Customer Support and Best Shared Host).

9. SiteGrinder 3

SiteGrinder 3 is a website development platform plugin for Photoshop. For web designers that have difficultly in coding and deploying websites, SiteGrinder 3 is a tool you may want to check out. You can expand SiteGrinder 3 through addons, including a Commerce add-on for building e-commerce-enabled websites.

10. PSD to HTML

PSD to HTML offers Photoshop file to HTML/CSS template conversions for web designers wanting to focus on just design and have someone else deal with all the coding. Their packages are reasonably priced, starting from $149. And we all know how much of a pain making HTML email templates are. Why subject yourself to all that frustration when you can have PSD to HTML code it up for you?

11. Formstack

Formstack is a hosted web form app for developing contact forms, surveys, and more. What’s so great about Formstack is that they have integrated solutions for accepting payments, which makes the service awesome for receiving online payments, donations and managing event registrations. They have a slick form builder that can get you up and running in minutes, theming and embedding features so that you can seamlessly integrate your web forms into your existing site, the ability to brand the app so that you can provide it as a service to your own clients, and more.

12. ThemeForest

ThemeForest is one of the web’s leading marketplaces for site templates and CMS themes. They offer close to 3,000 site templates and themes (starting from $1 each) for static HTML sites, HTML emails, WordPress, Joomla, Magento, and more. They also have a tumblr blog that covers topics in web design and web development.

13. Site24×7

Site24×7 is an application for monitoring your website and web servers. It logs, records, and watches out for website uptime issues, website performance issues, DNS records, and much more. Site24×7 has an iPhone version so that you can keep yourself clued in to the status of your web properties even when you’re located remotely. Developers will gain access to their API for creating custom tools and apps that utilize Site24×7’s service.

14. WORKetc

Worketc is an all-in-one app solution for project-based work. It’s a customer relationship management (CRM) system, it can handle your billings, sales, support, and can manage your project and timelines. If you’re sick and tired of juggling a myriad of apps to run your business, Worketc gives you an integrated solution.

15. eConnect

eConnect is a web-based application for creating, managing, and sending email campaigns. It has an intuitive interface that gives you features such as reporting and analytics, the ability to create subscription web forms, and an API for making your own tools and apps. It has possible integration with other applications and services such as Salesforce. To get started, you can request for a personalized live demo of their product.

16. Concept Feedback

Concept Feedback is a community for getting and providing professional feedback for your designs. Filled with excellent and engaging game mechanics, Concept Feedback makes gathering constructive and useful critiques on your work really fun. It’s free to sign up and participate, and if you want a bit more than the average user, there are premium services available.

17. Intervals

Intervals aims to simplify and streamline project management by creating an all-in-one web-based solution for management duties that have traditionally required multiple apps. Intervals have plans starting at a reasonably priced $20/month and signing up and trying out the service doesn’t need a credit card, making it convenient and risk-free to give them a whirl.

18. SkyLedger

SkyLedger is a user-friendly bookkeeping web app geared towards small and medium-sized businesses. SkyLedger takes pride in its "dead simple" user interface, which makes signing up and immediately getting started literally a 1-minute affair. Take a tour of the app or sign up for free.

19. B2Bee

B2Bee is a web-based app for invoicing, expense tracking, and profit reporting built with freelancers, contractors, entrepreneurs, and other service providers in mind. The company is colorful — they contribute a part of your subscription fee to research aimed at saving the bees and post interesting videos and informative blog posts. Sign up for your 30-day free trial.

20. Sensational Jobs

Sensational Jobs is a new job board for web professionals that’s quickly shaping up to becoming an industry leader. It has great features such as live search and an easy-to-use interface that job seekers and employers will love. Don’t forget to check out their Six Revisions giveaway for a chance to win an Apple Trackpad as well as to learn more about them.

21. CU3ER

CU3ER is a slick Flash 3D image slider that’s sure to impress your viewers. It has loads of features such as unique slide transitions, a JavaScript API for developers to be able to customize CU3ER, various user interface options for the end-user, and more. What’s more is that you can use CU3ER for free (and they have premium versions for those that need more features).

Related Content

• Website Features That You Can Easily Offload
• 10 Android Apps Every Web Designer Should Know About
• 10 iPhone Apps Every Web Designer Should Know About
• Related categories: Site News and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Judging what’s best for an audience is never far from the web designer’s mind. The ability to predict whether a web design will soar like an eagle or sink like the Titanic is among the most subjective and complex measurements you will encounter.

While resources that explain best practices exist, and your visitors contacting you about serious issues and offering you feedback relating to your site will occur if you have the proper mechanisms in place — it’s ultimately your responsibility to be proactive and research, investigate, and determine the what, why and how to ensure widespread usability.

Designing by Numbers

Before we examine the types of statistical information you should be looking at — and the relevance they have to your web design projects — we first need to go over the 3 single-word questions that relate directly to all the design decisions you will make.

These 3 questions are ultimately at the heart of your research, analytics and motivation behind designing by the numbers.

What, why, and how is a simple design process that:

1. Defines what the issue is
2. Proves why it is an issue
3. Determines how to fix the issue with the optimal solution (if it is an issue)

What?

Of all the questions that may enter the mind of a web designer, "What?" is probably the word that relates to the task at hand. The process of understanding relevance and the usefulness of information explicitly relates to the decisions we undertake.

• What do site users need?
• What things frustrate site users?
• What can I do in this design to accomplish the site’s objectives?
• What’s wrong with the site?
• What’s right about the site?
• What can be made better?

Asking "What?" will yield to a lot of information that will help you make optimal design decisions.

What your audience requires is a fundamental principle of designing by numbers. Get Satisfaction is a feedback tool you can use to help you design by the numbers.

Why?

Next on the list of list of determining factors is the question of "Why?"

Because making changes or implementations beyond what you initially set out to achieve may cost time, money or resources — the ability to back up your ideas with hard data and facts will be enough to even make the bean-counting bosses go weak at the knees and take your professional guidance and ideas more seriously.

• Why are people not using the comments?
• Why is the community participation on the site low?
• Why are users having trouble finding what they need?
• Why do we need to support Internet Explorer 6?

Knowing what needs to be done is one thing — knowing the justification to why it needs to be done is another.

Reasons for why cross-browser support should be implemented can easily be seen when you calculate the percentages of users that use certain browsers.

How?

The last single-word question is "How?" which makes sense in that once you know what needs doing and why it’s required, the method of actualizing the "What" is important.

• How should I go about increasing user engagement?
• How can this design improve community participation?
• How can I fix the issue of users not finding the product they need?
• How can I create a design that works in Internet Explorer 6?

Statistical/Gathering Methods

When determining the best course of action for your visitors, there are 3 essential statistic types that will come into play in helping to answer the "what" question. (We shall come to the "how" and the "why" later on, so don’t worry!)

Each of these data gathering techniques have their own benefits and pitfalls so there isn’t ultimately a perfect solution.

However, designers wanting a well-rounded experience would be better off using a mixture of all 3 as they not only give you a range of quantitative results (raw numbers) but also qualitative research (such as open-ended responses and feedback).

On-Site Data

On-site data are the kind of information you obtain from website analytics software and monitoring user activity on your website.

While this type of data is often ideal in that they relate directly to your visitors, it often takes a while for activity on a new website to build up — and as such, depending on these alone may leave you in the dark as to your visitor’s basic primary needs upon launching the service.

In sites with limited or no traffic, or sites that are still in development — analytics software fails because there is no (or limited) data sources; you’re pretty much in the dark.

Most websites have some kind of visitor tracking mechanism installed, such as Google Analytics.

Third-Party/Generalized Data

Independent data are often the most useful to new websites, usually produced by large firms who provide demographic services like Net Applications or W3Counter.

These third-party data-gathering sites offer a glimpse at the general population, and by that, it will include useful details such as the browsers and devices they use, their country of origin, and so forth.

On-Site data gathering methods is going to be more accurate and will reflect your particular situation much better — for example, a web development blog will have a different audience than a cooking blog) — but accounting for independent statistics can aid you by providing a baseline to work from, especially if you have no user base.

There are plenty of statistics on the web, you just need to look! The figure above shows statistics from A List Apart’s survey of web designers.

Social Data

Socially-sourced data are a relatively new concept that has come out of the rise of networking sites like Facebook or Twitter, where people can promote or discuss your creation through an external site.

While there are still a large number of people who aren’t interested in the "social" aspect of social networking, the importance of leveraging these statistics of what visitors like, dislike and their comments attributing to such information can actually be more useful (in different ways) to the conventional number-based statistics from analytics packages.

Social networking can provide you with useful feedback to work with.

Designers Demographics

Now that we have covered the "what", we need to examine the "why" (and by association) the need to focus our attention on all the pretty percentages, pie charts and graphics that appear everywhere.

Ensuring your visitors can use and enjoy their experience with your web design is important and determining how we can provide that experience will all be down to using the statistics methods above and then narrowing the focus down onto what is most relevant for your audience.

While pretty numbers may seem impressive on their own, they’re not worth anything if they don’t speak to your niche, so successful sourcing of your data is critical.

Review websites are notorious for having subjective criteria of questionable validity.

If you’ve exhausted local statistics and have a general idea of the visitors you’re getting (and perhaps where they found you), and if you’ve gone further afield to seek out related demographics relating to research on an area which affects your niche, its worth going beyond the number crunching and seeking out "intelligent hits" that may help guide your decision making. Asking your community (or perhaps your competitions if you don’t have one!) what would enhance the experience can be great, just don’t try to please (or annoy) everyone and only implement what will benefit your users!

Getting to know your visitors can simply be a matter of knowing how to communicate.

With all of this information in regards to what you’re investigating the "why" (as in why changes need to be made) will become quite apparent. While it may seem natural, it’s quite easy to become so fixated on the number of visitors or re-tweets we get, that we actually ignore the most important thing a statistics package (or some solid research) can tell us – that our visitors will have their own specific set of needs and requirements that need addressing. As a final point on the matter of "why", if we don’t actively seek out ways to improve ourselves, we can’t hope to gain new customers.

Visitors may have JavaScript disabled which could leave them excluded from statistics.

A Quick Measurement

The next thing to take into account is how to filter the information once you’ve collected it (which meets the "how" element). Having lots of statistics and ideas may help, but filtering the stream of data will be critical to making sense of the best route to take in fixing a common problem or deciding the next step. The simplest way to prioritize your data is to follow the below, the higher up on the list the item is, the better and more potentially useful and reliable your research will be. Once the best information is extracted, you can refer to the numbers when making decisions for the design.

Determining the quality of your information is a mission critical part of the process.

Importance of Location:

• Local
• Independent
• Social

Importance of Type:

• Statistics
• Research

Importance of Reliability:

• Proven
• Trends
• Unproven

Importance of Margin:

• Significant
• Proportionate
• Insignificant

Note: Using the above, a locally sourced bunch of statistics that are proven (by a significant margin) to be the best course of action would ultimately be the peak of what you can gather. Though as your research will lead to talking with customers, individual needs should be accounted for as well.

Variable Considerations

Before rounding up this article, it’s important that we consider the variables which may impact your statistics. While it’s great that there are plenty of studies that may assist you in decision making (like how to build a perfect font stack or what browsers you should support), it’s very important that we highlight the issues that will break down the cold harsh numbers and give you a little more to work with. Without making this article particularly heavy going (which isn’t the intention), the two types of variables you want to consider are mechanical and personal, and both relative to the visitor.

The first of these (mechanical) will directly affect the way in which your visitor interacts with your site, this isn’t as a result of their physical being, but more of their circumstances and equipment. In web design it’s obvious that the device used, the OS installed, the browser used, the scripting or plug-ins available or something else will affect their experience. While these are usually listed as independent statistics in packages, they are often related to each other in that a single user will contribute to a number of these breakdown listings, thereby it may directly affect the results.

Nothing forces greater demands on a website than the range of browsers that exist.

The second and probably one of the more important factors are the personal variables. The reason why these variables are so important is because they will often not appear in statistics packages and require you to undertake independent research to get the numbers or determine the viability of catering to their needs. Such factors include the accessibility level being required, the usability of a site (which won’t be a number) and the findability of information. While harder to pin down, it still makes sense to account for such variables as they directly and quite dramatically affect visitors.

Note: Error Margins also play a part in statistics, research made by a human rather than a computer can be subject to biases, errors and omissions – some of which may go unnoticed. The significance of information can also fluctuate depending on the audience who visit the site at any given time.

Research Matters

While this article is not a comprehensive guide to research and statistics (there are entire books on the subject), the importance of knowing your visitors is showcased. When you come to build a site or implement a new feature, it’s important that you do your homework to avoid falling into a pitfall that could have otherwise been foreseen earlier. Taking the time to understand how products like Google Analytics work, what their weaknesses are and how to get a well rounded overview and an intimate knowledge of your visitors gives you the best possible chance of hosting a great experience.

It’s also worth noting that while this article does indeed focus on the numbers and opinions that lead to decision making, it’s very important not to forget the individual as a person who visits your realm (no person should be directly treated as a statistic, they are all just as important to the full equation as each other) and while numbers are great for measurements, opinions often lead to the most amount of innovation. With this article highlighting the benefits of research and accounting for more than a personalised view of a site, hopefully you will go on to target a loyal audience in the future!

Related Content

• How to Increase Conversions on any Website in 45 Minutes
• 15 Tools for Monitoring a Website’s Popularity
• How to Navigate Design by Committee
• Related categories: Web Design and User Interface

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

With high pressure from clients and crazy development schedules for web designers, it is easy to forget to spend the proper amount of time crafting a design.

In the interest of speeding things up, it’s tempting to skip over small details. This is an easy pitfall to which to succumb, but in the end, it can hurt your overall career.

This article will share methods and simple tools for building better portfolio pieces, having happier clients, and imbuing your work with more value.

Professional Pride and Value

If you do not take pride in your job, strive to build better value, and feel rewarded in your work, this article is not for you. The first step to being a better craftsman is care for your work no matter what it is.

Regardless of whether or not the subject is close to your heart, as a designer you should always be proud of your work. It is true that clients, deadlines, and projects will occasionally force you to make decisions that you do not agree with, but part of being a valuable and effective professional is genuine care for your work and your clients.

Love your craft and it will pay off. Real value starts at the core of how you handle your work in your practices, presentation, and approach.

Naming and Organization

Many designers do not think of file naming, organization, or conventions as a craftsmanship issue.

A common practice among particularly zealous designers is to jump right in and start designing, throwing caution and a naming structure to the wind.

This may seem fine at first, especially for small projects, but this approach will quickly turn your files and presentation into an inescapable rabble of confusing lists and vague labels. Clearly, this is not the beginning of a world-class design.

Properly labeled files and organized project structures will not only make you more efficient, they will also make you appear more professional.

You may be thinking that naming and organization is an internal issue. Think again. If you are working for a larger client, you will eventually have to send the files off to the client, a developer, or another party. People are always pleasantly surprised to find clearly named and organized files, a sensible layer structure and easy-to-understand internal documentation. This can be a brilliant opportunity to make a strong and distinct impression on your clients. Every little bit counts.

Sweat the Small Stuff

It is easy to tell yourself that the little details and meticulous little changes are lower priority and the overall layout or function is all that is important.

Before you go any further, think of any product that is successful; especially products designed to last: large appliances, cars, computers, clothing, etc. Chances are that the difference between a top-notch version and a cheap one are not in one dramatically different aspect, but rather in the sum of their parts.

Quality is in the Details

You have probably heard the old adage, "You get what you pay for." There are really no exceptions to this.

For instance, think of something pretty simple like jeans. Some cost $10.00 and some can get into the hundreds of dollars.

What are the differences? A good pair of jeans will have better fabric, more solid stitching, finely tuned details, durability, and an overall better fit.

These are subtle differences, but they add up to a substantially different experience. You might save a few bucks by going with a cheap pair of jeans, but at the end of the day, they will fade quicker, rip easier, wear out faster, and probably look more baggy and unkempt. Quality counts.

Do you want to be a premium developer or a discount outlet?

My point is simple: Sometimes the smallest differences are the most important.

I know you aren’t designing jeans, but a website is still important to design with purpose.

A website should achieve an objective, speak subtle cues, offer better conversion, help the client be more professional, and last long enough to be a worthwhile investment.

This kind of value is not achieved by rushing through a layout, cutting corners, leaving elements unlabeled, or leaving open ends.

What Details You Should Sweat

The benefit of paying attention to small details is clear, but what does this mean for a website designer? Here are a couple of common elements that have a high probability of being overlooked in most web design.

Using Guides and Purposeful Alignment

First, don’t eyeball it. Guides are an essential tool for carefully calculating alignment, flushing text and images, and checking your measurements.

Use guides to make alignments and ensure that your elements are cleanly and evenly laid out. Ctrl/Cmd + R to bring up the ruler in Photoshop, then click and drag from the top or side rulers to create the guide, then drag to place.

Alternatively, you can use View > New Guide from the Photoshop’s application menu for even more pixel-perfect accuracy.

Now that you have guides in place, make sure to use them correctly.

Symmetry is one of the only standards of beauty that is agreed upon across all cultures. Symmetry can also mean consistency. When your design is planned, consistent and not arbitrary — it will feel more complete and solid.

When you start designing, be sure to create gutters, margins, and spacing setups to lay out elements clearly.

Take the extra time to find a relative unit of measurement (such as the X-height of the logo’s typeface) and make sure that the spacings and alignments consistently use that unit.

Great alignment doesn’t happen by accident; it’s well-thought out and purposeful.

Another advantage of spending time on alignment and using sensible guides is that you will have less discrepancies from the mock-up stage to when it is handed off to the developer.

Don’t expect your web developers to fill in your blanks. Many developers use the site mock-up to create exact spacing and styles.

Send it off with all the right alignments, placements, and layout elements. Your client, your developer, and your budget will thank you.

Render and Identify Browser Type

It doesn’t matter if you are using @font-face, Typekit, or good ol’ fashioned browser-safe typefaces. Your designs should reflect which elements are to be rendered from the browser and which will need to be converted to images as CSS background text image replacement.

It is true that Photoshop cannot render type exactly how it appears in the browser, but it can get close enough.

Also, keep in mind that various browsers and operating systems will anti-alias text in slightly different ways. In the example below, I am using Windows 7 with Firefox 3.6.

Remember, your clients are not artists and will usually take a mock-up at face value, so it is important to effectively communicate what fonts will actually look like and how they will work within the context of the web medium.

Further, your designs should act as a guide for the developer. A good practice is to place the size, color hex-value, weight, and font in the placeholder copy. This helps the developer know exactly what colors and fonts to use at a glance, without having to check the PSD file or ask the designer.

What does this mean? Simply put, if you intend for an element to render from HTML/CSS, turn off the anti-aliasing.

If you change the kern or leading, make sure you use values that are easily measurable to CSS letter-spacing and line-height.

Use solid round font sizes when designing. A font rendered at, for example, 13.73px will not translate as cleanly as it could for the web.

Bottom line: don’t create any guesswork for the developer and the client.

Design with Real Content

Design is about problem-solving.

Designing without content is like trying to come up with a solution without knowing what the problem is.

You should begin every web design with as much information as possible. You can’t begin a project unless you know your client’s goals and intended points of conversion.

When in doubt, always push for more information.

Ideally, your client will supply you with a final draft of the content that needs to go online. Unfortunately, this isn’t always the case. You may find yourself working with no assets from your client.

So what should you do when you have no imagery or copy? Make it up!

If you haven’t been provided with any images to work off of, don’t just use any old placeholder. Instead, find a free stock image that supports your design.

If you don’t have any official copy, do your best to emulate it. As a rule of thumb, you should have enough information to fill out all the main headers.

Never use Lorem Ipsum for headers. It is a design element, not a replacement for copy. Lorem Ipsum is useful for conveying the size and shape of a block of text or a long list, but it does not say anything of the content that will eventually be there.

Having real content empowers you to create the best approximation of the final site possible, saving you countless days of revisions.

In the absence of real content, an educated approximation will make it easier for your client to give you useful and constructive feedback rather than frustrating, time-consuming revisions.

Your website design means nothing without relevant content and copy.

Designs that can live without their content are called templates because they are generally designed to give generic results and fit a wide range of simple needs.

Your clients probably aren’t hiring you for a template. They want a custom design, which means they want relevant content and copy.

Gradients and Texture

I can’t tell you if the website you are working on calls for texture or gradients, but they are essential techniques that the pros use to convey important elements such as dimension and personality.

Texture

Texture is by definition a subtle feature, but it is instrumental in conveying personality. Personality is critical in custom website design.

This is clear for a simple reason: your client chooses to hire you instead of buying a generic solution. A major point you need to communicate to their users is their unique nature or personality. If a user cannot gain a basic understanding of who your client is, then you have failed on some level.

Every business, no matter the size, has culture and interest that they exude via their products, branding, customer support, and other related services.

In general, a texture is a subtle but extremely detailed way to communicate these ideas.

Think of how you feel when you walk into a store. Recall the smell, the cleanliness, the staff’s helpfulness, etc. These are important sensations and associations. Unfortunately, we can’t put all of this onto the web, but we have a number of tools to communicate some key parts of it.

For example, when you walk into a Longhorn Steakhouse (recently re-branded), you see a clean slightly classy atmosphere, decor that is reminiscent of ranches, smoothly polished wood, and the faint aroma of leather.

If you were designing their website, you would start with these cues. For instance, you might use polished and worn wood textures, touches of leather texture with imagery like cowboy boots, ranch clips, and branding irons.

Texture can be a pattern, imagery, an actual tactile texture, or even consistent usage of color, but it is key to starting a conversation with the user.

Here are some fantastic examples of textures in website design.

Wearable Print

KELT

Converse

Le 28Thiers

Creative Spaces

Think Up

Here are a few more excellent examples of using textures in web design.

Gradients

A gradient is basically a subtle shift in color from one value to another. It is a fundamental method of conveying volume and form. In other words, gradients can make elements feel more three dimensional and active so they pop off the screen a bit.

While sometimes flat color is appropriate, most times designers are being lazy instead of being thoughtful.

Keep in mind that gradients should be used to highlight items or create visual hierarchy.

Not everything in your design requires a gradient. Ideal candidates for usage of this technique are call-to-action buttons, action copy or navigation bars.

A good exercise when you have 20 minutes or so is to visit a few CSS gallery websites and pay careful attention to where designers are using gradients or shifts in color to highlight items, make them pop-out more, or convey more depth.

Once you have a few in front of you, sketch them on paper. Keep your eye on how subtle the shift in color or values are, if they go from left to right, or top to bottom, and even where the designer has placed a highlight to communicate light or a reflection.

This will really help you grasp what a gradient is actually achieving when you use it.

Here are some great examples of effective gradients in website design.

Blinksale

relogik.com

FOX Classics

Rockstar Business

Kaleidoscope

Fully Illustrated

Here are a few more sites that use gradients well.

Design with Purpose

You have probably heard this before, but it bears repeating: design details should never be random details. You should always apply design elements, highlights, gradients, and careful alignments to assist the content and build a visual conversation with the user.

That’s easy to say, I know, but what does this mean for a designer in a real situation?

Let me suggest another exercise. Before you actually start your design, grab a notepad, and write down all your basic elements and how they tie to their content. For instance:

• Navigation bar: allows access to major topics
• Buy Product button: takes user to purchase the widget
• RSS icon: takes user to RSS feed
• Search bar: allows users to search the website

Once you have done that, rank them based on importance to your client’s goals.

Now that you know what is most important, start designing.

Once you get to a halfway point in your design stage, go back to your list. Start applying careful details to your priorities. Is the Call Us button the most important? Is the RSS icon placed in the right location? Will people use a Search bar designed this way?

Give your design elements a complementary color, or a high contrast analogous color with a dimensional gradient, a sharp 1px white highlight on top, and a thin but smooth drop shadow.

Move to the next element (say, the navigation bar). Give that a slight gradient to make it pop out and then give it a bright 1px underline to separate it from the content top.

Hopefully, you get the idea.

These are very specific examples, but you should be able to see the thought process.

Design details are powerful tools, not just pretty flourishes.

Smart Mock-Ups

If you have a cool jQuery rollover, hover state, or drop-down menu — don’t explain it — show it.

Not only will this practice help you work through potential design problems before they happen, but it will make your developer and client love working with you.

Imagine that you are building a house, and you get all the plans and the architect has left out all the windows and doors from the plans. You would be pretty annoyed, right?

Not only is that lazy, but now you will have to do all the problem solving, scoping and planning that was the architect’s job.

Not cool.

This is what it is like for a developer who gets a design with no hover states, no drop-down designs, or special element designs.

Furthermore, you just created a grab-bag of guesses that the client has not approved and may hate when the developer figures something out.

Better to do the legwork now and get it wrapped up in a nice neat little package.

Learn Some CSS

There is nothing more annoying for a developer then getting a mock-up ready for coding and finding that 80% of the stuff in it is barely feasible in CSS or is clunky and time-consuming.

Do yourself and everyone a huge favor and learn some CSS. Specifically, learn what CSS can and can’t do — and learn what it does well.

For instance, CSS is ideal for creating reusable and consistent elements, CSS can quickly (and at smaller file sizes) render color, type style, and more.

The newest specifications of CSS is powerful and can replicate many design features that previously required images and allows for new techniques that couldn’t be done before. Learn your weapons before you charge in to battle.

Take the example below. (These are by no means attractive but you will see my point.)

The call-out box on the left uses a browser-rendered typeface with no anti-aliasing, a solid 1-pixel outline and the heading uses a looping header gradient. This would be simple for a developer to code and reuse.

Now, the same theoretical call-out on the right uses an inner glow, a radial gradient on the inside content box, the header typeface is not browser compatible, the rendered Arial has anti-aliasing, the header uses a non-loop-able gradient and a fading divider line, and the whole box has a soft drop-shadow.

It is possible to do a few of these things with CSS3, but in order to keep the same look, developers will usually export the image to a file.

Technically, this works, but an image like that is not reusable, not scalable, not attractive, and requires the developer to export a new image for every box.

Bottom line: know the capabilities of CSS and use them to your advantage.

CSS is semantic, so it’s fairly straightforward. Want to adjust the font size? There’s a font-size property. Want to change the color of something? There’s a color CSS property. It’s not as complex as you would think and the language is very close to plain English.

Understanding what your building blocks can actually do is a powerful asset in building optimized and efficient design.

Remember, the more control you have over the actual implementable design, the better it will be in final practice.

Developers love solving technical problems but not design problems. Keep your job to yourself, and both of you will appreciate it.

Here are some great resources for an introduction to CSS:

• CSS Basics
• HTML Dog
• CSSeasy.com

Presenting Your Designs

This should be obvious, but many designers forget to put the time in to do this. Presenting a design to a client is half the battle.

Why is this important? Because your client will likely be making more emotional judgments than logical ones.

Make sure you treat their brand with love and respect. Put the mock-up into a nice PDF with a cover page or print it out (yes, I know its web resolution, but you can scale up to 300 dpi for this one).

Include a list of your decisions and always use positive language. You are here to lift up your client, so make sure to avoid negative comments.

This is where your underlying structure will really work for you. Take the following example under consideration. Imagine that you had to hire a designer by just seeing their desk. How would you make your decision?

Your clients will judge your level of professionalism and reliability by the way you present your work.

A good presentation exudes expertise, organization, and clear purpose in your designs. When you present the whole package in a clean and attractive way, you will have a happier more attentive client every time.

Conclusion

If you take nothing else away from this article, please remember this: love what you do, and let it shine through.

By respecting yourself, your work and your process, you will build value in yourself as a designer and produce satisfied, referral-happy clients.

Keep in mind that this article is only a primer. The road ahead is long, but if you truly love what you do, it will trickle down into meaningful improvements all across your life.

Related Content

• Drawing the Line: 6 Things You Shouldn’t Tolerate in Projects
• The Art of Distinction in Web Design
• The Key to Successful Collaboration
• Related categories: Project Management and Web Design

About the Author

Shawn Borsky is an interface and brand designer. Shawn runs Anthem Design Group and posts thoughts on branding and design via his blog, The Borsky. You can follow Shawn on Twitter or get in touch with him through his blog.

This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.

• Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
• Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Final Result

Click on the final result preview below to see a live demo. Since we are using some CSS3, this demo might not look exactly the same in all browsers.

View Demo

Create the Basic Files

1 The first thing we’ll do is set up the files and folders. Create a new folder in your computer and name it letterpress. This will be our working directory.

2 Create 2 folders inside the letterpress folder and name them images and styles.

3 Open up your favorite HTML/CSS editor (such as Dreamweaver or Notepad++) and create an HTML document. Name it index.html or some other preferred file name. Save this HTML document inside the letterpress folder.

4 Create a stylesheet document and name it style.css (or any other name you want). Save this file inside the styles folder.

Basic HTML

5 The code below goes in index.html. The code represents common HTML markup.

<!DOCTYPE HTML> <html> <head> <title>Letterpress</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> </body> </html> Slice the Bookmark from the PSD

6 Now open up Photoshop and open the PSD we created together from Part 1 of this tutorial series.

7 Hide all except all Photoshop layers except these layers:

• Datebg and shadow
• Headerdivider
• Navbarbg
• Logo
• Sidebar
• Sidebar divider
• Background
• Widgetbg
• Footerbg
• Image
• imagebg

8 Use the Rectangular Marquee Tool (M) to select the bookmark that indicates the active page.

9 Copy the selection by going to Edit > Copy Merged (Ctrl/Cmd + Shift + C).

10 Open a new Photoshop document (Ctrl/Cmd +N); don’t change the canvas size because it will have automatically set it to the dimensions of the most current thing on your clipboard (the bookmark, in this case).

11 press Ctrl/Cmd + V (the keyboard shortcut for Edit > Paste) to paste the copied selection in the new Photoshop document.

12 Go to Edit > Save for the Web and save the new document as a JPG in the images folder.

Write the HTML Markup

I usually code the HTML (with the classes and ids) first, and then write the CSS to style the site afterwards. This way I don’t have to switch back and forth and can keep my workflow compartmentalized. We’ll start writing the code for all the different sections of our design first, then style them later.

Container

13 Create a div with the ID of container; It will be used as a wrapper for all the elements except the footer. We’re doing this so that we can easily center the layout later on.

14 Create a div for the logo and insert the image of the site’s logo inside it. You can slice the logo from the PSD mockup using the same process as discussed earlier, or insert your own logo (preferred).

<!-- CONTAINER --> <div id="container"> <!-- LOGO --> <div id="logo"> <img src="images/logo.jpg" width="348" height="60" title="logo" /> </div>

Navigation Bar

15 Next, we’ll create the navigation bar. Use an unordered list and add each navigation bar link as a list item. Add the ID of firstlink to the first list item; this way you can add a background-image to the current link (which is the bookmark that we sliced out of the PSD). Also add a divider.

<!-- NAVIGATION BAR --> <div id="navigationbar"> <ul> <li id="firstlink"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="dividerheader"></div>

Sidebar

16 Create another div and give it the ID of sidebar.

17 Insert a form with an input type="text" element.

18 Change the default value of the input element to Search, the size attribute should be set to 29 (for 29 characters), and give it a JavaScript event listener so that when the user focuses or leaves the input element, it calls a function called clearText().

Note: It’s highly advised to write JavaScript unobtrusively. Since we are going to gloss over JavaScript in this tutorial, I’ve decided to have this functionality inline. Please use unobtrusive JavaScript.

onFocus="clearText(this)" onBlur="clearText(this);

This is the function that will handle the hiding/showing of the “Search” text inside the search input.

<script type="text/javascript"> function clearText(field) { if (field.defaultValue == field.value) field.value = ''; else if (field.value == '') field.value = field.defaultValue; } </script>

Here is our HTML markup for the sidebar and the search form.

<!-- SIDEBAR --> <div id="sidecolumn"> <!-- SEARCH --> <form> <input type="text" id="searchform" value="Search" size="29" onFocus="clearText(this)" onBlur="clearText(this)"> </form> <div id="dividersidebar"></div>

Recent Posts and Latest Comments

19 Create two divs; give one the ID of recentposts and the other, latestcomments.

20 Add a divider between them. Type some sample content in and be sure to add a heading and paragraph elements. Use HTML character codes for the right-pointing double angle quotes (») which is ». You can find a full list of HTML character codes here. I used <li> tags for each comment/post name, and will style them later.

<!-- RECENT POSTS --> <div id="recentposts"> <h1>Recent Posts</h1> <ul> <li><a href="#">» Lorem Ipsum post</li> <li><a href="#">» Another post</a></li> <li><a href="#">» I'm just writing things</a></li> </ul> </div> <div id="dividersidebar"></div> <!-- LATEST COMMENTS --> <div id="latestcomments"> <h1>Latest Comments</h1> <ul> <li><a href="#">» "Blah Blah Blah..."</a></li> <li><a href="#">» "Blah Blah Blah..."</a></li> <li><a href="#">» "Blah Blah Blah..."</a></li> </ul> </div>

Sidebar Web Banners

Every blog has advertising zones these days, why shouldn’t ours?

21 Inside the #sidebar div, add another div that will contain our web banners.

22 The first two web banners need to have the ID of adrightfirst (for right one) and adleftfirst (for the left one). Since we only have enough space for two ads in one row, you have to add a line break for every row.

<!-- ADVERTISING --> <div id="adrightfirst"></div> <div id="adleftfirst"></div> <br /> <div class="adright"></div> <div class="adleft"></div> <br /> <div class="adright"></div> <div class="adleft"></div> <br /> <div class="adright"></div> <div class="adleft"></div> </div> <!-- END OF SIDEBAR -->

Posts

Onto the markup for the blog posts.

23 Create a date1, datetext1 and post1 div.

24 Add the date (day using <h1>, month in <p>), the title (using <h1>), metadata of the post (using <h2>) and some content (in <p>’s).

25 Copy the entire post div, and paste it beneath (to create another blog post entry). Insert a divider between both posts. Don’t forget to change the numbers (date1 to date2).

<!-- DATE ONE --> <div id="date1"> <div id="datetext"> <h1>13</h1> <p>apr</p> </div> </div> <!-- POST ONE --> <div id="post1"> <h1>I enjoy reading Six Revisions</h1> <h2>By Eric Hoffman  ·  1223 Comments </h2> <img src="images/snowboard.jpg" title="snowboard" style="margin: 5px 0px 5px 0px"/> <p> "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 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.<a href="#"><i>Continue Reading... </i></a></p> <div id="dividerpost"></div> </div> <!-- DATE TWO --> <div id="date2"> <div id="datetext"> <h1>12</h1> <p>apr</p> </div> </div> <!-- POST TWO --> <div id="post2"> <h1>Who likes Obama?</h1> <h2>By George Bush  ·  0 Comments </h2> <img src="images/snowboard.jpg" title="snowboard" style="margin: 5px 0px 5px 0px"/> <p> "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 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.<a href="#"><i>Continue Reading... </i></a></p> </div> </div> <!-- END OF CONTAINER -->

Footer Widgets

26 Create another div and give it an ID of footerwidgets. Place a div with the ID footerwidgettext inside this div. Insert three divs with different ids. For example: footerwidgettextfirst, footerwidgettextmiddle, and so forth. The reason for having unique IDs is each one will have different margins, so we can’t use a class.

<!-- FOOTERWIDGETS --> <div id="footerwidget"> <div id="footerwidgettext"> <!-- WIDGET ONE --> <div id="footerwidgettextfirst"> <h1>Widget title </h1> <p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p> </div> <!-- WIDGET TWO --> <div id="footerwidgettextmiddle"> <h1>Widget title </h1> <p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p> </div> <!-- WIDGET THREE --> <div id="footerwidgettextlast"> <h1>Widget title </h1> <p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p> </div> </div> </div> <!-- END OF FOOTER WIDGETS -->

Footer

We’re going to use a simple footer section.

27 Just as the #footerwidgets div, the #footer div will be 100% width, but the text will be aligned with the rest of the content (centered). That’s why we’ll create another div inside it with the ID of footertext. Add the footer content inside #footertext.

<!-- FOOTER --> <div id="footer"> <div id="footertext"> <p>&copy; 2010 Eric Hoffman. All rights reserved.</p> </div> </div> <!-- END OF FOOTER --> </body>

That’s all for the markup; let’s move on to CSS.

Write the CSS

So, we’re done with our HTML. Now we’ll tackle our styles.

28 First thing’s first: open up the style.css file you created at the beginning. Make sure your HTML file links to it correctly.

CSS Reset

29 First, we’ll use a simple CSS reset to zero out our styles. I encourage you to read more about CSS reset to fully understand the importance of it; this article on CSS Reset is a good place to start. For berevity, I just used the * selector here.

* { margin:0; padding:0; } Body Background and @font-face

30 Next, change the body background to the image of the blue background with noise in our PSD mockup. Slice it out of the PSD mockup for practice (I’ve also included it in the downloadable source file below as background.jpg).

31 Also, we’ll add the CSS3 text-shadow element.0 is the x-offset, 1px is the y-offset, 2px is the blur and #555 is the color of the shadow. @font-face allows us to embed non-websafe fonts so that all the viewers can see the site the way we do. You can read all about @font-face through this guide titled The Essential Guide to @font-face.

body { background:url("../images/background.jpg") repeat; text-shadow:0 1px 2px #555; } @font-face { font-family:"Museo Slab 500"; src:url("http://hatchergraphics.com/MuseoSlab-500.otf"); } Wrapper/Navigation

32 We’ll now create a container as a wrapper so that we can center our design easily. I like creating pixel-perfect designs, so I chose a fixed-width layout. If you want to see other layout types, check out this guide titled A Guide on Layout Types in Web Design. To center the container, just use margin: 0 auto; (thanks to the Smashing Book and its chapter on layout types, which coincidentally was co-written by Six Revisions founder, Jacob Gube).

33 Add styles to the navigation bar. #firstlink is the current link. If you wish to expand the design and add all four pages, you’ll have to change the ID of the list. For example, if I’m on the "About" page, the About list item should have the ID of firstlink. To center the background image, use background-position: center;.

#container { height: 1000px; margin:0 auto; width:890px; } #navigationbar { height:auto; margin:50px 0 80px 390px; width:650px; } #navigationbar ul li { display:inline; font-family:"Museo Slab 500"; font-size:15px; } #navigationbar ul li a { color:#FFF; padding:74px 30px; text-decoration:none; } #navigationbar ul li a:hover { color:#DBDBDB; text-decoration:none; } #firstlink { background:url("../images/linkbg.jpg") no-repeat; background-position:center; color:#FFF; padding:74px 30px; text-decoration:none; }

Logo/Divider

34 The logo height and width depends on your website name. It turns out that "Letterpress" at 65pt (in Photoshop) is 60px high and 348px wide.

35 Next style the divider. Here you can use a 2px-high empty div, a span, or style your header to have a 2px-high border at the bottom. I used the same background image as I we’ll use with the post divider.

#logo { float:left; height:60px; width:348px; } #dividerheader { background:url("../images/dividerpost.jpg") repeat-x; height:2px; margin-bottom:20px; width:890px; }

Sidebar

36 Next, we will style the sidebar. Since the post divs are going to be 500px wide and I’d like a little margin between the posts and the sidebar, I chose 250px for the width of the sidebar.

37 Style the divider, the recentposts and latestcomments and the search bar. Here we’re going to use another CSS3 property called border-radius. This means we can create rounded corners using only CSS. Unfortunately this feature isn’t supported by all browsers, so it will not look rounded in all browsers (such as IE8 and below).

38 Style all the ad elements and make sure the math is correct (together, they can’t be wider than 250px).

#sidecolumn { background-color:#2c7c88; border:1px solid #116678; float:right; height:240px; padding:25px 0; width:250px; } #dividersidebar { background:url("../images/dividersidebar.jpg"); height:2px; margin-bottom:10px; margin-left:25px; margin-top:10px; width:200px; } #recentposts,#latestcomments { margin-bottom:10px; margin-left:25px; width:200px; word-wrap:break-word; } #recentposts ul a,#latestcomments ul a { color:#FFF; display:block; font-family:"Trebuchet MS"; font-size:13px; line-height:22px; list-style-type:none; text-decoration:none; } #searchform { -moz-border-radius:10px; -webkit-border-radius:10px; background-color:#FFF; border:0; font-family:"Trebuchet MS"; font-size:13px; margin-left:25px; padding:2px 6px; } #adrightfirst { float:right; margin-right:-1px; margin-top:31px; } #adleftfirst { float:left; margin-left:-1px; margin-top:31px; } #adright { float:right; margin-right:-1px; margin-top:16px; } #adleft { float:left; margin-left:-1px; margin-top:16px; } #adright,#adleft,#adrightfirst,#adleftfirst { background-color:#f6f6f6; border:1px solid #e7e7e7; height:117px; width:117px; } #adright:hover,#adleft:hover,#adrightfirst:hover,#adleftfirst:hover { background-color:#e7e7e7; border:1px solid #dbdbdb; }

Posts

39 Next up: the posts. We’ll create two post divs: one named post1, and the other we’ll call post2.

40 We’ll do the same with the date. As I mentioned before, both post divs should be 500px wide. Position them both with margin, and add a padding-left of -90px. The position property should be set to absolute.

41 Create another divider, but this time, it should be as wide as the post.

#post1 { color:#FFF; float:left; height:auto; margin:10px 0 0 10px; padding-left:90px; position:absolute; width:500px; } #post2 { color:#FFF; float:left; height:auto; margin:525px 0 20px 10px; padding-left:90px; position:absolute; width:500px; } #dividerpost { background:url("../images/dividerpost.jpg") repeat-x; height:2px; margin-bottom:20px; margin-top:16px; width:495px; } #date1 { background:url("../images/datebg.jpg")no-repeat; float:left; height:123px; width:90px; } #date2 { background:url("../images/datebg.jpg")no-repeat; float:left; height:123px; margin-left:-90px; margin-top:500px; width:90px; } #datetext { height:46px; margin:0 auto; padding-top:38.5px; width:31px; } #datetext p { color:#FFF; font-family:"Museo Slab 500"; font-size:20px; text-transform:uppercase; } #datetext h1 { color:#FFF; font-family:"Museo Slab 500"; font-size:35px; line-height:22px; }

Footer Widgets

Almost done!

42 Footer widgets: As you saw with the HTML, the footer and the footer widgets are placed outside of the container so that they aren’t restricted by the 890px width of our wrapper. Both should be 100% wide.

43 Add the background, height (240px), and the top margin. I created a #footerwidget div, a text div, and then three more divs for the separate widgets. Add the same styles to all of them — the only differences being the borders and the margins.

#footerwidget { background:url("../images/widgetbg.jpg"); height:240px; margin-top:110px; width:100%; } #footerwidgettext { height:240px; margin:0 auto; width:890px; } #footerwidgettextfirst { border-right:1px dotted #FFF; float:left; height:165px; line-height:22px; margin-top:15px; padding:10px 10px 20px; position:absolute; width:276px; } #footerwidgettextlast { float:left; height:165px; line-height:22px; margin-left:594px; margin-top:15px; padding:10px 10px 20px; position:absolute; width:276px; } #footerwidgettextmiddle { border-right:1px dotted #FFF; float:left; height:165px; line-height:22px; margin-left:297px; margin-top:15px; padding:10px 10px 20px; position:absolute; width:276px; }

Footer

44 The footer’s height is 44px. Add a background. The position should be absolute so that it is always at the bottom. Similar to the footer widgets, I created another div for the text so I can center it and align it to the main content area. Here I used the margin: auto 0; CSS property to center it. The 10px are the top-margin.

#footer { background:url("../images/footer.jpg") repeat-x; height:44px; position:absolute; width:100%; } #footertext { height:44px; margin:10px auto 0; width:890px; }

45 The following styles apply to various elements; I just grouped them together.

#recentposts h1,#latestcomments h1,#footerwidgettextfirst h1,#footerwidgettextmiddle h1,#footerwidgettextlast h1 { color:#FFF; font-family:"Georgia"; font-size:18px; } #post1 h1,#post2 h1 { font-family:"Georgia"; font-size:30px; } #post1 h2,#post2 h2 { font-family:"Trajan Pro"; font-size:18px; } #post1 p,#post2 p { font-family:"Trebuchet MS"; font-size:13px; line-height:22px; } #post1 a,#post2 a { color:#FFF; text-decoration:none; } #post1 a:hover,#post2 a:hover { border-bottom:1px dotted #FFF; } #footerwidgettextfirst p,#footerwidgettextmiddle p,#footerwidgettextlast p,#footertext p { color:#FFF; font-family:"Trebuchet MS"; font-size:13px; }

We’re Done!

I hope you enjoyed following along with this tutorial. Please pose your questions and thoughts in the comments below.

Download Source

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.

• Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
• Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Related Content

• PSD/HTML Conversion: Code a Clean Business Website Design
• How to Code a Grunge Web Design from Scratch
• Coding a Clean and Professional Web Design
• Related categories: Tutorials and Web Development

About the Author

Eric Hoffman is a young American freelance web and brand identity designer based in Switzerland, working under the brand, Hatcher Graphics. He enjoys reading, playing basketball, and getting plenty of sleep. If you’d like to connect with him, you should follow him on as @hatchergraphics.

Inkd, the world’s first online marketplace for creative businesses, hosted a giveaway on Six Revisions recently. This post announces the winner of the custom logo design by Inkd.

The Winner of an Inkd Custom Logo Design

The winner of the giveaway is AndyW. Congratulations! You should have already received information regarding how to claim your awesome prize (via email).

About Inkd

Inkd is the world’s first online marketplace for creative businesses. It’s the best place to find design templates, PowerPoint templates, logos, online printing — including new plastic cards and other creative business collateral.

Related Content

• 15 Excellent Logo Design Tutorials Using Illustrator
• Popular Logos with Hidden Symbolisms
• Win a Custom Logo Design from Inkd
• Related categories: Graphic Design and Resources

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

If you want to make your website livelier, then adding a website chat widget is perhaps one of the more effective solutions for increasing user engagement and growing your community.

By putting a proper website chat widget on your site, you will get real-time feedback from site visitors regarding your product, services, or content. For sites that sell services or products, a chat widget will definitely help you communicate with your visitors in real-time and potentially make more sales.

This is a collection of 10 free website chat widgets that you can install on your websites.

1. Chatango

Chatango is a customizable chat room add-on that anybody can install in their website. The main advantage of using this website chat widget is that users can have their own avatar. It also offers different user roles that give participants privileges for becoming moderators and administrators.

2. Meboo.me

Meboo.me is a product of Meebo.com — a popular web-based IM platform service. Whether you are using Typepad, Blogger or WordPress, Meebo.me is just ideal for any of these platforms. The most advantageous part of adding a Meebo.me chat box in your webpages is that it is compatible with Gtalk, Yahoo! Messenger, AIM, as well as with Facebook. Hence, the visitors of your website do not need to register to interact through it. They can use their existing Gtalk or Facebook username to stay in touch with your website.

3. JWChat

JWChat is an Ajax-powered chat script. It only uses JavaScript and HTML, making it an ideal solution for those who want to quickly get a chat widget up and running. It functions like a traditional IM client, with system sounds notifying you of events like if someone sent an IM, support for emoticons, and more.

4. CBox

CBox attempts to merge the features of traditional desktop IM clients with the benefits of the social web. The user interface is straightforward, the installation is a snap, and is plug-and-play because it only relies on client-side JavaScript and HTML. CBox is free, but there is a premium version available for $2.00 a month with additional features like bigger bandwidth, no ads displayed, and custom word filters.

5. Mibew Web Messenger

Mibew Web Messenger, which also calls itself Open Web Messenger, is a free and open source chat messenger that was built with PHP and MySQL. This chat application was developed with live customer support in mind, but works well in other contexts.

6. AjaxChat for WordPress

This free website chat script is a plug-in for adding live chat functionality to a WordPress installation. It enables WordPress users to chat with other visitors on your blog without refreshing the browser.

7. AJAX Chat

As you can probably conclude by its name, AJAX chat uses client-side JavaScript to enable you to run a robust chat client on your website. It can also be used as a shoutbox, a site feature that allows your visitors to quickly leave a message and "shout out" to other visitors and the site admins.

8. phpFreeChat

This free PHP-based chat system is highly customizable and is packed with features you’d only expect in desktop clients. It supports the ability to create multiple chat rooms, private messages, custom themes using CSS, and Ajax for a smooth and seamless user experience.

9. iJab

This web-based IM client, developed using the Google Web Toolkit is free and uses Ajax to simulate a client desktop IM client. iJab can be a great solution for implementing a similar Facebook chat feature that people can use within their web browser while perusing your website.

10. Ajax IM

Ajax IM is a slick and open source web-based IM client for your website. It’s lightweight, weighing only 78KB on a good day (i.e. when minified). By default, it affixes itself at the footer of your web pages, similar to Facebook’s web-based chat client.

Related Content

• 12 Social Media Monitoring Tools Reviewed
• 12 Portable Apps for Web Designers
• Search Analysis with Google Analytics
• Related categories: Tools and Website Management

About the Author

Phong Thai is the Web Developer with over 5 years of experience in PHP, JavaScript, and CSS. He is the creator and administrator of JavaScriptBank.com: a new generation of JavaScript resources that provides thousands of free JavaScript, DHTML, tutorials, videos, examples, reference and help. Follow him on Twitter or connect with him on Facebook.

Graphic illustrations have become commonplace in today’s web design. They can add a unique branding element into an otherwise bland world of templates and corporate logos.

Although just 5 years ago you would be hard-pressed to find many websites looking for illustrators, times have changed, and we’re on the brink of many new and exciting web design trends.

Illustrations that come in the form of beautiful background scenery, animals and mascots for branding, or even cartoon versions of authors and designers can be found all over web design portfolios spanning the globe. Web illustrators and branding gurus have become a staple and have come to be high in demand in the web design industry.

I’ll be touching upon a few tips for incorporating illustrations in your web designs by looking through a handful of websites that use illustrations effectively.

I’m talking about digging deeper into the bedrock of design; truly searching for what makes illustrations "click" in the mind of our website visitors.

Why Branding is So Important

When you build a website, you want the look and feel of the design to be an extension of your business. Whether this means incorporating an already existing logo into the design or creating a memorable experience, the site needs to fit your brand.

When visitors fall into your site, you also want to make sure it leaves a lasting impact. By this, I mean that you want them to remember your site.

Illustrations help a lot with making a site memorable because with an eye-catching graphic scene or vector artwork, the page jumps out and has a visual element that’s unique just to that site. This is what helps your brand stick like fresh sap out of a maple tree!

Users eat creativity up; it shows that you really care about your brand and your site to go through the trouble of incorporating illustrations, which are difficult to conceptualize and pull off effectively in the context of websites.

Let’s take a look at a good example of how illustrations can be used effectively to establish a brand identity: an SEO company called ten24 Media.

Their site uses a background of a circus tent with a beautiful skyline and open grassy fields to entice readers into the upper area of the web design. The concept of using circus tents as a central illustrative element is from creative wordplay: their name spelled out is "tentwentyfour media." The web layout includes a brief description of what they do, as well as a link to their Services page ("Enter the Show").

The branding is consistent throughout the site; continuing onto other pages, you’ll see the circus tent outline near the top navigation links.

In addition, the site’s footer contains more grassy hills.

All these illustrative elements keep the whole site feeling very innovative and fun — the perfect positive emotions you want to create, especially to dispel negative misconceptions some people have about the SEO profession.

Simple Illustrations Work Well

Never underestimate the power of a simple illustration. Adding too much to your design will overwhelm your readers and have the opposite effects you are looking for.

Fatburgr is an interesting web application. Many would classify their design into the realm of new age "Web 2.0" gradients and fluff, but the concept actually stands for itself.

Just browsing the site is appealing and you can enjoy the cartoony aspects of each area.

The footer is good for a few laughs as well. Imagining the detail put into such a web design is breathtaking.

You can recognize each piece and understand how it ties into the overall site brand. Even the buttons and text areas have additional creative effects added to them.

Keeping content where it belongs will help your readers decipher what you’re trying to say a lot faster. Easy-to-read paragraphs with large enough font sizes and plenty of spacing is essential — simplicity at it’s best.

Another concept to take away from this example is the importance of typography.

Typography should match your illustration design concepts; they should be big, and almost pop out to your visitors — something illustrations and simpler structures can complement.

Implementing Your Illustrations into the Site’s User Interface

The next point I want to discuss is creating harmony with the site’s functions and the illustrations you use.

You can see this happening with Forrst, a new community for designers and developers for sharing code snippets and snapshots.

Although currently in private beta, you can check out their homepage with a flourishing background of trees and wooded areas.

In the foreground, you can see a park ranger parading around with a Forrst badge attached to his uniform. You can also see a brief description of the site and informative signs transposed on wooded backgrounds. This all adds to the ambiance of the site, including the clever "log in" log floating on what appears to be some sort of cloud.

And if that were all, you could consider Forrst quite the visual inspiration.

However, they push the use of illustrations further. You can go beneath the ground into the dirt below to see a sign up form. You can apply for membership quickly with just a few details, and the web form looks great.

A design like this can get complicated and will require plenty of skills. To produce this level of illustrative work could take years of practice in software like Adobe Illustrator to master, but they can be just the perfect touch in boosting your site design into the big leagues.

Never Use Illustrations Just for Aesthetics

Looking good is important. But adding design elements just to fancy up your site is the wrong attitude because a web design is a functional product.

All elements of your design should hold a purpose and have importance, including the addition of beautiful intricate illustrations.

Do you really need illustrations? How do they help meet your site’s objectives? These are a couple of questions you should be answering constantly as you conceptualize and execute your illustration ideas.

Sit down with a pen and paper to draft up ideas before even stepping into the digital world. This will help hash out a lot more ideas at once without locking yourself into the medium you use to design websites with.

Using similar ideas for inspiration can help a lot. CSS and graphic design galleries can be found everywhere. Go through a few and take notes on how their designs play out. Do they go a bit overboard compared to what you want? Maybe they don’t use color correctly? How does their content mesh with their illustrations?

Asking these questions will help get you on track. It’s always a long process when designing for the web. Keeping your designs in line with check and balances is a very handy skill to master.

The examples above are just simple ideas, but larger concepts can be implemented to realizing amazing results. Not everybody is an illustrator; I certainly don’t claim to be anywhere near an expert in creating illustrations like Brad Colbow or the guy over at Behind the websites. But with the power of Twitter and other networking tools, it’s not very difficult to meet very creative and talented designers from all over the world.

Your website’s design is a very important piece of the puzzle. It’s the part of a website your users can actually see.

Further Reading

Here are a few articles and resources on the topic of illustrations in web design.

How to Create an Illustrative Web Design in Photoshop

This step-by-step web design tutorial goes over the creation of a web design that has an illustrative landscape baked right in.

30 Creative Illustrative Website Headers

Here is a showcase of website headers that have illustrative design elements.

30 Beautiful Photoshop Illustration Tutorials

Not comfortable with Adobe Illustrator? This is a roundup of Photoshop tutorials to help you become a better illustrator.

30 Creative Examples of Illustrations in Web Design

Here is another showcase of web designs that feature illustrations.

Getting Comical with Brad Colbow

For inspiration, this is an interview of Brad Colbow who is both a web designer and an illustrator. By the way, check out his The Brads comic series, a comical look at the life of web designers.

Related Content

• How to Use Retro Colors in Your Designs
• Make High-Impact Backgrounds for Your Designs with Photoshop
• 50 Stylish Navigation Menus for Design Inspiration
• Related categories: Web Design and Graphic Design

About the Author

Jake Rocheleau is a social media enthusiast and an Internet entrepreneur. Having spent over 4 years working freelance web design, he frequently writes articles involving new-age design concepts and personal motivation. You can find him all around the web via Google Profile or on Twitter as @jakerocheleau.

Sensational Jobs is a brand new job board for web designers and developers that’s creating much buzz and excitement in the web industry. They’ve teamed up with Six Revisions to give away 3 Magic Trackpads from Apple. Three lucky winners will receive this awesome multi-touch trackpad. Read on to see how you can win.

What is Sensational Jobs?

Sensational Jobs is a brand new job board for web designers and developers that’s easy to use. The website focuses purely on web professionals in order to generate targeted and quality results in this field.

The job board has an easy and user-friendly interface that perfectly suits both job seekers and employers alike.

Features for Job Seekers

Live search: Type job keywords and/or location in the search bar and matching results are instantly displayed as typed.

Alerts: There’s an option to add alert keywords, locations and types of jobs, and matching jobs will be automatically flagged and will appear in the alerts section when you visit the site. Alerts can also be sent for new listings by email daily. A custom RSS feed is also offered, displaying only the jobs matching your alert terms.

Favorites & Notes: Job seekers can keep track of positions that they are interested in or have applied for by marking the jobs as favorites or adding private notes.

Features for Employers

Quality candidates: Guaranteed exposure to thousands of quality visitors on a daily basis via the website as well as through affiliate links and widgets on partner sites.

100% money back guarantee: In the unlikely event that an employer is not satisfied with a listing’s performance, a 100% money back guarantee is offered, no questions asked.

No registration required: The job posting process is completed quickly and easily in 3 simple steps, without the need to register for an account. Listings can also be edited or deleted using a unique URL which is sent by email.

Automatic invoicing: An itemized PDF invoice is automatically generated and sent by email with every job posting.

Secure payments: All payments are handled by PayPal to ensure maximum security and peace of mind. PayPal accepts all major credit cards, without the need to set up a PayPal account.

For Bloggers and Website Owners

Affiliate Program: There’s a top paying affiliate program that pays 50% instant cash for any listing referred to the site. Payments are made instantly to a PayPal account as soon as a job has been posted via an affiliate link. For better integration and sales, there’s an optional widget displaying the latest job listings that can be easily integrated on any website or blog.

How to Win an Apple Magic Trackpad from Sensational Jobs

1. Check out the Sensational Jobs website
2. Leave a comment on this post about the things you like/love about their site or how the site will help you
3. If you want, you can send a Tweet about this giveaway

Giveaway Details

This giveaway ends on September 1, 2010, after which the commenting system on this post will be closed.

Comments are moderated. Please follow instructions outlined in the section above or your comment may not be posted. Please only comment once as only one entry will be qualified. Leave a valid email address when filling out the comment web form so that we can contact you if you’ve won.

Winners will be selected in the same method as previous Six Revisions giveaways. The winner will be announced on a separate post, so stay tuned via our RSS feed to see if you’ve won!

Related Content

• Helpful Tips for Switching to the Mac OS
• 10 Apps for Web Designers Using a Mac
• Getting Started with the iPhone SDK
• Related categories: Web Design and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Drupal is a popular open source content management system. With its powerful and advanced features, you can build complex websites with ease, compared to building them from scratch. With the support of a huge community and a big number of available modules, no wonder Drupal is a system you keep hearing about over and over again.

In this guide, we are going to discover Drupal using a pragmatic approach. We will create a Drupal site with a custom content type and views.

Ready? Let’s dive right into this immensely powerful content management system.

Objectives

By the end of this guide, you will:

• Learn the benefits and disadvantages of using Drupal
• Install Drupal
• Understand the Drupal back-end
• Learn about Drupal modules
• Explore the Administer page
• Create and publish content
• Create custom content types with the Content Construction Kit
• Create Views
• Create Page view displays
• Create Block view displays
• Learn about Drupal themes

What We Will Create

We will set up and develop a basic Drupal website with a job board that visitors can post job openings and projects to. The intention here is to get you started using Drupal by actually creating a Drupal site instead of just reading about it.

Why Use Drupal?

It is worth a few moments to discuss the benefits (as well as disadvantages) of using Drupal so that you can determine if it’s the right CMS for you.

Pros of Using Drupal

Open source: Yes, Drupal is open source. This means you get all the benefits of using an open platform.

Highly customizable: The main power of Drupal lies in its flexible nature. You can mould it into any type of content-centered/user-generated site: from a social media site that allows users to submit and vote on content, a forum, a job board, to an image gallery or a service for deploying portfolio sites for designers — Drupal can get it done (with a little bit of work on your behalf, of course).

Big and intelligent community: Drupal has one of the biggest and brightest open source community of supporters, users, and developers. This means great modules, quick bug fixes and core updates, great support, and a never-ending supply of amazing documentation and tutorials on the Web.

Modules: There is a huge amount of modules that extend the capability of Drupal. (We will talk about what modules are a little bit later.)

Developer-friendly: As a web developer, you will never feel any limitations while using Drupal. Drupal has been built keeping the needs of developers in mind. Some faults of a few mainstream CMSes is that there is a disproportionate focus on the end-user’s interface, and with that, means neglecting or focusing very little on the needs of the people who actually develop and deploy the CMS; this isn’t so with Drupal.

Built-in caching system: Drupal has built-in support for caching your web pages, which helps reduce the load on your web server, as well as speed up page response times. This feature eliminates some resource-intensive database queries, aiding your server in performing better.

Decent built-in search capabilities: Drupal, when compared to many CMSes out there, has a pretty good search feature baked right into its core. It still would not beat a third-party search API like Google Search or Yahoo! Search BOSS, but it’s still decent enough to use in production.

Cons of Using Drupal

Big learning curve: Yes, it’s a fact that Drupal is a bit harder to grok than other content management systems out there. I will not suggest you use Drupal if you want a website done in a week the first time you use it. It may take you some months to really understand Drupal, and as much as a month to be able to deploy a fully custom site the first time around. However, I should also note that you can deploy a basic site in less than a day’s worth of work (and that’s what we will be doing in this guide).

Complex for non-developers: Since developers’ needs are prioritized with Drupal, for those that aren’t very familiar with computing technologies, Drupal might take a while to get used to. This means that professionals that only dabble in web development might not find it easy to develop (or even administer) Drupal sites.

Complex user interface: Drupal’s admin interface is a bit difficult to understand; it’s not as user-friendly as it should be. (That’s going to change soon, though.)

Drupal Versus WordPress

Whenever you talk about Drupal, there is always the inevitable desire to compare it to another leading open source publishing platforms; and that is usually WordPress.

And whenever you suggest that WordPress is not a fully featured CMS and that it is just a blogging platform will always generate a heated debate. I am myself a WordPress developer, but it’s a fact that sometimes WordPress is just not enough.

Rather than spending time in customizing WordPress, it’s the right decision to use a more robust CMS if you’re doing something very complex that involves user registration, authentication, custom permissions, custom user role, highly customized content types for sites such as user-generated social media sites, e-stores, forums, and so forth.

I will not suggest you use Drupal if your client only needs a blog or simple portfolio site with only a few pages and basic content types — it is quicker and easier to build these sites using WordPress. Using Drupal for these purposes seems like overkill.

Another major argument against using Drupal is its user interface, which is emphatically hard to learn for people who are not computer-savvy. This is a solid point where WordPress wins.

Websites That Use Drupal

For inspiration, here are a few sites that use Drupal.

Mozilla

Mozilla, the company behind Firefox, uses Drupal for almost all of its web properties. The official website of Mozilla and Spread Firefox are both built with Drupal.

Spread Firefox

Ubuntu

The official website of Ubuntu, a popular distro of Linux and the operating system that many web servers use, is built on Drupal. Study the enormous nature of the site and the variety of content types and features available on it; you will soon see why Ubuntu chose Drupal.

Want to see more examples? Check out these other remarkable Drupal-powered websites if you would like to see more.

Downloading and Installing Drupal

We will use the latest stable release of Drupal 6 for this guide; download it here.

Installing Drupal on XAMPP

We will install Drupal on our computers, but if you want to install it on a live web server, the process will be the same.

To install Drupal on your local machine, you will need a web server platform like XAMPP or WAMP. Don’t be intimidated if you haven’t heard of them; they are really very easy to install and use.

If you don’t have a local web server platform installed yet, install XAMPP now.

Below is a user-friendly guide written by Jacob Gube (Founder and Chief Editor of Six Revisions) that will get you up and running with XAMPP in no time flat (the tutorial is for WordPress, so just follow the first part of the tutorial, Steps 1-26 tweaking the steps by keeping in mind you are installing Drupal):

• Using XAMPP for Local Development

This Drupal guide will assume that you are using XAMPP, so you might have to tweak the Drupal installation process if you choose another web server platform package.

Copy the Drupal Files to XAMPP Directory

Copy the Drupal package you downloaded earlier to xampp\htdocs. Extract the files and rename the folder to drupal for easy navigation.

Now go to the xampp\htdocs\drupal\sites\default folder.

Create settings.php

Make a copy of the file named default.settings.php and rename it to settings.php.

Make sure that you don’t delete default.settings.php otherwise your Drupal installation will throw you an error; this is one of the most common mistakes beginning Drupal developers make.

Create a MySQL Database for Drupal

Drupal uses MySQL to store all the content, so we need to set up a MySQL database for it.

We will use phpMyAdmin — a browser-based MySQL database administration GUI — to make this easier (it comes with XAMPP by default).

Navigate to phpMyAdmin using your favorite web browser via the following URL:

http://localhost/phpmyadmin/

For this example, I named the database db_drupal. You can give the root user permission with all privileges to the db_drupal database so that it can read/write/modify it if you want to save some time, but it’s not good practice to use root in a production environment. It’s better to create a new dedicated user just for the Drupal database and then only provide the needed permissions; we should do that next.

Create a New Dedicated MySQL User for the Drupal Database

For this example, I will create a new MySQL user called drupal_user. For production, it’s not a bad idea to use a user name that is obscure and random to minimize the event of a bruteforce attack being successful.

Definitely do not use root though as that is what most hackers will likely try first because the root MySQL user has super privileges that can access not only your drupal_db, but also your other databases. (In fact, it’s a good idea to delete and not use root at all and instead create a pseudo-root user, but that is another story for another day).

To create a new MySQL user, go to the home page of phpMyAdmin and then click on the Privileges tab.

Now click on Add a new user and then fill out all the required information.

While working on localhost (e.g. deploying Drupal in our computer using XAMPP), you can definitely select all the privileges, but in production, it is strongly recommended that you select only the privileges that drupal_user really needs.

In this example, I have selected only those privileges I want drupal_user to have.

• Select
• Insert
• Update
• Delete
• File
• Create
• Alter
• Index
• Drop
• Create Temporary Tables
• Lock Tables

At this point, we are done with phpMyAdmin and any MySQL-related tasks.

Install Drupal Using the Installation Wizard

Now let’s point our browser to the following URL:

http://localhost/drupal

If you renamed the folder in htdocs to drupal, this should work. If not, replace drupal in the URL string above with whatever folder name you used for the Drupal files.

When you navigate to the URL above, you will see the installation wizard of Drupal. You can select the language you want for the Drupal interface in the first page. Note that this option can be changed later from the Drupal back-end. We will continue with English, so let’s choose "Install Drupal in English".

In the next screen, Drupal will verify whether your web server (In this case localhost) is able to run Drupal or not. If your web server is missing server applications that are essential to Drupal functioning on it, then it will give an error message.

Next, you will see the Database configuration screen. Here you will have to give all the information you used in creating drupal_db and drupal_user.

Still in the Database configuration screen, click on Advanced options and you will see an option named Table prefix which will append all Drupal MySQL tables with a string (e.g. blackjack_drupal_table). I recommend you use some random table prefix that will only make sense to you; this is a precautionary security measure to reduce the threat of a SQL injection attack on your databases.

If you have done everything correctly then you will successfully move to the next screen where Drupal will install some necessary modules. You will be automatically directed to the Configure site screen after this is done.

Options on the Configure site screen are mostly self-explanatory, so I will let you fill out the needed information yourself.

Clean URLs Option

One thing many might not be familiar with is the Clean URLs option under Server settings. By default, the links generated by Drupal are unintuitive like http://localhost/index.php?q=21.

With Clean URLs enabled, your URLs will look nicer and will be more SEO-friendly, such as http://localhost/events.

The Clean URLs option requires mod_rewrite (an Apache module) to be installed in your web server — and it probably is installed already.

If mod_rewrite isn’t installed or running (highly unlikely if you’re on an Apache server), then Drupal will give you an error and you will not be able to use the Clean URLs option. It’s fine and won’t prevent you from deploying your site, but it really is advised for the purposes stated above that you get Clean URLs working as soon as you can.

Installation Complete

If you have followed along correctly, then you will get the following screen.

Don’t worry about the error being shown, as it is because if you are doing this on localhost using XAMPP, it just means we didn’t set up a mailserver, and it will not permit Drupal to send emails to administrators.

When you are on an actual server, these things should already be set up for you (unless you built your own web server and don’t have it configured).

Log Into Drupal’s Back-End

Let’s move to the back-end of Drupal. After navigating to your new website at http://localhost/drupal, you will see the following page.

Log in by clicking on Administer.

Now that you have installed Drupal, let’s move on by talking about the concept of modules.

What Are Drupal Modules?

Modules are extensions of Drupal that enhance it with additional functionality.

For example, Drupal comes with a pre-installed module called "System". In fact, Drupal itself is a group of core modules (which are modules developed and maintained by the Drupal project). The System module is one of them, and Drupal can’t work without it.

How to Add Drupal Modules

Aside from the core modules that come with your Drupal installation, you can download add-on modules from Drupal’s official repository. You can also make your own modules as you advance through your Drupal development skills using Drupal’s module API.

After finding a module you want to install, download it to your computer.

You will have to move the extracted module to the following location:

drupal\sites\all\modules

By default, there is no folder for modules, so you will have to create one manually; create a folder called modules inside drupal\sites\all.

It’s good practice to keep your downloaded modules separate from ones that come with the default Drupal distribution so don’t put add-on modules in drupal\modules.

Installing an Add-on Module: The CCK Module

The CCK (Content Construction Kit) add-on module is a popular Drupal module that allows you to add different types of custom content. Let’s practice adding modules to our Drupal sites by installing CCK, which we will use later on in this guide.

First, download the appropriate version of CCK and then place it inside drupal\sites\all\modules.

After downloading and placing CCK inside drupal\sites\all\modules, you will need to enable it from Drupal’s administration interface. Go to Site Building> Modules and there you will see CCK. Enable it. You can enable different sub-modules of CCK if you need them (and we will do so later on in this guide when we start using CCK).

Congratulations! You have just installed a Drupal module.

Drupal’s Administer Page: A Crash Course

When you are in the Drupal Administer page, you will see two ways in which you can view it:

1. By task
2. By module

If you are in the By task view, you will see the page organized by administration tasks.

For example, in the By task view, under Content Management, you will see all the tasks associated in dealing with your content, such as Content which enables you to view, edit, and delete content as well as Post settings, which controls the behavior and display of your content.

Each task will have a short description below it to help you figure out what it is for.

If you are in the By module view, links are organized by modules.

For example, in the By module view, under the System module, you will see Configure permissions, Clean URLs, Modules, etc.

Learning Curve of the Back-end UI

The administration interface of Drupal takes a lot of time to get used to, but there are plenty of add-on modules that you can download and install to make the administration UI easier to work with.

I suggest installing the Administration menu module, which adds a navigation bar at the top of all your web pages when you are logged in as a site administrator.

Setting Up Your Home Page

It’s time for some action. Let’s build our home page. To do this, we will create our very first content. Our first post will be of a Page content type. To start, go to Content Management > Create Content > Page.

Menu settings

The default Drupal theme has a navigation menu in the top-right corner. The options under Menu settings will decide whether to include the home page link to that navigation or not.

If you would like to add a Home link to your primary navigation menu, select <Primary Links> under the Parent item dropdown menu.

The Weight option allows you to organize your links in sequence. A link with a lower weight will float to the top of the list.

So if your Home link is 0 and your About link is 5, for example, then your Home link will show up first because it is less heavy.

If your Home link has a Weight option of 0 and your About link also has a weight of 0, then Drupal will make a judgment of organizing your links in alphabetical order, such that since their weight is equal, About will show up first.

In our case, leave the Weight option for your Home link unchanged (its value by default is 0).

Input format

The options under Input format enable you to choose how you want to enter in your content.

Filtered HTML limits the amount of HTML you can use, filtering out dangerous HTML elements like <script>, which can be exploited for a client-side-based site attack.

Use Filtered HTML if you have site administrators that are not familiar with HTML.

For developers, use the Full HTML option. This input format option assumes that you are well aware of HTML.

Revision information

If the content of your Drupal website is being maintained by a single person, then this feature may not be useful (unless you’re very forgetful).

If you work with a team of different content creators and you want to save different versions, log changes to content, and make notes of revisions in your content — the Revision information optionst can be handy.

Also, with the Create new revision option checked, it will keep the older version in case you want to restore back to it later.

Comments settings

These settings allow you to enable or disable the ability of people visiting your site to make comments on your content. We probably don’t want comments on our home page, so I’ve chosen the Disabled option.

Authoring information

You can change the name of author and time of publishing under the Authoring information options.

You don’t need to fill out these options all the time as Drupal will automatically fill it in if you don’t change the options.

Publishing options

This set of options dictates publishing settings of your content.

• Published shows the status of the content. Uncheck it if you want to un-publish something.
• Promoted to front page will display the page in the front page. Uncheck it if you don’t want the content to be published in your home page.
• Sticky at top of lists will keep your content at the top of the front page and any content listings.

Check Out the Front Page

Here is our home page now; it is still simple, but don’t worry, we will be adding stuff next.

What We’ll Do Next

Now, we will create a job board for user-generated content.

While creating this part of our website, we will be working with custom content types, views and other Drupal features.

What is a Drupal Node?

Before we go any further, we should discuss one of the most befuddling topics for Drupal beginners — and that is the concept of nodes.

A node is the elementary unit of Drupal’s content architecture. In simple words, if we pretend that a Drupal website is a house, the nodes are the bricks of that house. Each bit of content in Drupal is referred to as a node — whether it’s a comment, a page, a forum post, a story, and so forth.

Keep in mind that the Admin and User profile back-end pages are not referred to as nodes as they are created by the system and not by its users.

The node is a very important concept to familiarize yourself with if you want to build complex websites with Drupal. While the concept of nodes is confusing for Drupal beginners, it’s the core foundation that gives Drupal developers ultimate flexibility and customization options.

To give you an example, let us navigate to the home page content we created earlier. If you take a look at the address bar of your web browser, you will have something like this (note that you might not see this if you have Clean URLs enabled).

You can see the word "node" in the URL, which is an indication that the page you are looking at is a node.

Creating a Custom Content Type with Drupal

Custom content types are a great way to customize your Drupal site. For each content type, you can control how it is displayed, the user permissions, give it custom attributes — the possibilities are excitingly endless.

Create a "Jobs" content type

For this example, we will create a job board in our website; a place where users can post job vacancies and projects, sort of like a mini-Craigslist.

We will have the following fields for each job posting:

• Job Title
• Job Description
• Department — which will be a drop-down menu
• Experience — A text field
• Salary — A text field

Working with custom content types in Drupal is a piece of cake. First, navigate to Administer > Content types > Add content type.

Most of the options in the Add content type interface have descriptions. The one I think is essential to talk about is the Type option. Type is the machine-readable name of your custom content type that is used in more advanced Drupal development.

For this example, the Type we will assign job posts will be job. This will be important in the future when you become a Drupal ninja master and want to create more complex customizations to your site, such as in the case where you want to create a custom page template for job postings, which you can do by creating a template file called node-job.tpl.php (this topic is out of the scope of this guide).

To move forward, fill out the Title, Type, and Description fields.

Submission form settings

In this set of options, you will have the ability to create and set up a web form for accepting a job posting; this is what job posters will see when they want to submit information about a job.

Workflow settings

Under the Workflow settings, you will find some basic publishing options for a Job posting that is submitted. If you want the job post to be published without first getting reviewed by a Drupal administrator, then check the Publish box.

Continue to set up your workflow settings to move forward. For example, under the Comments settings, you can change different settings for comments in the job posts. If you want site visitors to be able to comment on a job post, turn it off. If you don’t, disable comments.

Create the Jobs Content Type

Time to hit Save to create our first content type. If you followed all the instructions exactly, then you should see Jobs in your Content types list (along with default Drupal content types like Page, Story, etc.)

Customizing Content Types with the Content Construction Kit

So now we have our very own Drupal custom content type. What we will do next is to customize the Jobs submission web form with the help of a very helpful Drupal module: CCK.

CCK is usually the first module most seasoned Drupal developers install on a new Drupal site. Because this add-on module is so important, Drupal 7 will include it as a core module so that you don’t have to download it manually anymore.

You should have already installed CCK at this point because of our exploration of Drupal modules in the beginning of this guide.

Enable Some CCK Sub-Modules

First step in our customization process is to go to Administer > Site Building > Modules.

Under CCK, you will find a list of CCK sub-modules; some of them are already enabled (by default), and some of them aren’t. Why is this so? Drupal is extremely modular, giving you the choice to use only the things you need. Drupal module developers are encouraged to compartmentalize their feature set, which in turn results in less bulky and more resource-conscious add-on modules.

As a Drupal administrator, you should only enable the modules and sub-modules that you are actually using on your site.

For our job posting web form, let us enable the CCK sub-modules we need.

Here are all the sub-modules we need to enable for our Job post web form:

Since we need the user of the form to be able to enter float values (like years of experience needed by the job applicant to qualify for the job), then we will have to enable the Number sub-module.

We also need to enable the Option Widgets, which allows us to add different kinds of web form input fields like checkboxes, radio groups, and so forth.

Each of these sub-modules depends upon the parent module called Content — and you can’t enable a sub-module without first enabling Content.

Add the Form Fields

Finished enabling the CCK sub-modules? Great, now let’s start modifying our job post submission form.

Go to Administer > Content Management > Content Types, then in the Jobs content type, under Operations, and click manage fields — this is where we will add custom fields.

First, I am going to add the Department field, which will permit the job poster to select an option of job types (e.g. Development, Finance, User Interface, IT, Marketing) from a dropdown list.

After hitting the Save button, you will be forwarded to a page where you can write allowed values and where you can fine-tune the Department field.

The next field is the Experience field, which is going to allow the input of floating point values (e.g. 3.5 years of experience).

Under Help text, add instructions on how to fill out the Experience field so that the job poster can get a better understanding of how to input the values correctly.

Under Global settings, you can specify valid input values. For example, under the Minimum option, if you specify 2.3, then a job poster typing 1.4 will see an error.

Our last field for our Jobs content type is the Salary field. It can take in an Integer value such as 5000 USD.

Under Global settings, specify 0 as the Minimum because you don’t want people entering negative integers like -1200. (Why not specify something greater than 0? Because entering 0 for the salary might mean that it’s an unpaid job).

After creating all the fields, you should have something like the following image in your Fields view for the Jobs content type.

Click and drag on the cross-arrows icon on the left side of each field to reorganize their order.

Create Job Postings

Before moving forward, create some sample job postings by going to Create Content > Jobs. Create a few sample job postings because we will need this data for the next section of this guide.

CCK is Really Powerful

While we have worked with some basic field types here, CCK also allows you very robust ways of taking in content. For example, you can use the ImageField add-on module to allow people to post an image (maybe you want the job poster to have the ability to show pictures of the office space where the job is located).

Check out this list of available CCK fields if you need custom input fields.

Using the Views Module to Populate the Job Posting Page

Though you can use queries to call out content from your database, that’s a really a complex process even with Drupal’s powerful API.

To help populate the data of a Job post page, we will use Views, which is a module that allows you to call content from your database without writing a single bit of code.

In simple words, it is a user interface for MySQL queries. Views is a very powerful module and sometimes it can be a bit difficult to understand for new users. The best way to learn about Views is to play with it; and that’s what we will do next.

Install the Views Module

Before we begin, we need to install Views. After downloading, installing and enabling Views, you can access it under Site Building.

Creating the First View

Any listing of data provided by Views is referred as a view.

We will create a view that will show all the available job postings on one page. You can also create attachments, blocks and customizable RSS feeds with Views, but we will keep it simple.

Go to Site Building > Views > Add and type out the fields as shown in following image.

Drupal will show you the actual user interface that is used to create views. Don’t feel overwhelmed, we will talk about the user interface shortly.

What is a Display?

To start customizing our Jobs view, we have to understand what a display is. Displays present our data in different styles. A view can have multiple displays.

In our Jobs view, we will create 2 displays: a page and a block. We will revisit this topic shortly.

Add Fields to the View

Let us add some fields to our view. Fields are the content that we want to show on our page. Click on the plus (+) icon under Fields to add fields to your view.

We will show the Job Title, Job Posting Date, Department, Salary and Experience that is supplied through our Job CCK web form.

We will have to select the following fields from the additional box opened at the end of page when we clicked on the plus (+) icon. These are the fields we are interested in:

• Node: Title
• Node: Post Date
• Content: Department (field_department)
• Content: Salary (field_salary)
• Content: Experience (field_experience)

After checking the appropriate boxes, make sure that you hit the Add button so that you can configure each field separately.

After hitting the Add button, the first option will be to customize Content: Department (field_department). Leave everything as it is except just change the Format option to Plain Text (from Default), and then click Update.

After hitting Update, the next field you will customize is Content: Experience (field_experience). Don’t change the default values; just hit Update. Do the same thing for the Salary field.

After finalizing your custom fields, the next option is to change the field Node: Post Date. You just have to change the Date Format to Time ago so it shows the number of days the job post has been up (e.g. "12 days ago").

The next and final field to customize is Node: Title. We just have to check the box that it should be linked to.

Live Preview Tab

You can use the Live preview tab to see how your view looks like as you make customizations to it.

Basic Settings

Now we will set up our basic settings.

Let us choose Unformatted for Style, and display the data in a Table format. Once that’s done, click Update.

We want to display all the job postings in one page, instead of being split up in multiple pages, so we will select No for Use pager. Again, click Update once you’re done.

After all these customizations, you can see that our Live Preview tab looks nicer than the initial view, but we are not done yet.

View Filters

At this point, our view is displaying all of our content, even ones that aren’t job postings. We only want to show jobs on our Jobs page.

We will select two filters so that we only show only published job nodes:

• Node: Published
• Node: Type

Click on that plus (+) icon beside Filters, select the Node: Published and Node: Type options, and then click Add.

Then configure the Node: Published filter so that the criteria is such that Published is set to Yes, which will omit all jobs that are not yet published from our Jobs view.

Configure the Node: Type filter so that only nodes that is a Jobs content type is shown.

Use the Live Preview tab to check your filters.

Sorting Criteria

If we look at the Live Preview, you will notice that nodes are sorted from oldest to newest. It would be nice to show the latest jobs first.

In order to sort jobs such that the newest jobs are displayed at the top, we will apply a sorting criteria. Under Add sort criteria, select Node: Post Date from the box, which will then open when you click the Add button.

Under Sort order, choose Descending.

Check the Live Preview tab again; it will now show you the latest jobs first.

Rearrange the Fields

There’s one other thing we can do to improve our view: rearranging the order of the fields. It makes sense that the Title should be first, and the post date second, and so forth. You can do so by clicking the up/down button on fields tab.

Check out the Live Preview tab; our view is looking nice.

We are done creating our view. Next, we just have to create 2 displays for our view.

Creating a Page Display

On the left of your Views page, select Page and then click Add display. After clicking it, you will be automatically directed to the Page settings page.

We just have to add a path to our page and a place to show the link to our display. I have put the value of 2 for Weight so that it appears after the Home navigation link.

After filling the values, don’t forget to click on Save the Display.

Now, you can see the link (called Available Positions) to our page display in the main navigation.

Creating a Block Display

Blocks are used to show information in various regions of a Drupal website. They are widgets that can display things like current events, the top 5 most popular posts, and so on in regions like the left sidebar, the header, the footer, and more.

You can place blocks in the header, footer and left and right sidebars in Drupal’s default theme. You can manage your blocks by going to Administer > Site Building > Blocks.

Now we are going to create our second display for the Jobs view so that we can show the latest job postings in the right sidebar.

Go to Administer > Site Building > Views and choose edit Jobs view. On the left, select Block and click Add display as you did before.

Click Override

We will remove 3 fields in our block display so that the block fits in the sidebar and so that it isn’t so overwhelming with information. Click on each field under the Fields tab. Before removing a field, make sure that you click the Override button, otherwise it will change the default view and will also affect the page display we constructed earlier.

You can also change the name of the block, which will be shown in Administer pages.

Add the Block to the Sidebar

Now let’s move to Blocks and add our generated block display to right sidebar.

Go to Administer > Site building and click on Blocks.

Go to the Disabled section, find the block display we just created, and select right sidebar under Region.

Make sure that you hit Save to perform the change.

Awesome, and with that — we’re done with our job board!

Drupal Themes

The final subject we will discuss in this guide are themes. Themes are used to change the visual appearance of a Drupal website.

There are many themes available on the Web. Here is the Themes list on Drupal’s official site.

To install a theme, you have to download it and then copy it in your drupal/sites/all/themes directory. If there isn’t a themes directory, then you can create one and then place your theme files inside it.

You can activate or deactivate themes by going to Administer > Site Building > Themes.

There are 5 themes that comes bundled with the Drupal core installation. I have just activated the Marvin theme to give my test site a clean, new look.

Make sure that you choose the theme default so that it can be applied to your Drupal site.

Wrapping Up

Drupal is big. I have done my best to cover the most confusing and difficult subjects that beginners often struggle with; however, this guide merely scratches the surface of the true power of Drupal. I encourage you to explore the Drupal site for more advanced topics.

If you have questions, feel free to ask via the comments section and I will be more than happy to help you!

Related Content

• CMS Showcase: 31 Remarkable Drupal Powered Websites
• 10 Drupal Modules You May Not Know About
• Convincing Your Clients to Use Open Platforms
• Related categories: Web Development and WordPress

About the Author

Saad Bassi is a 20-year-old web developer from Pakistan. He is the Co-Editor at CrispyTech, and blogs about Windows at Windows8Geek. Don’t forget to give him a "hello" on Twitter. Last but not least, make sure that you check out hist latest project, Addictive Fonts which focuses on free high quality font downloads.

Minimalism is a word that gets tossed around in a lot of different contexts. Whether it be a lifestyle or an art form, saying something is "minimalistic" can take on a variety of meanings.

In the web design field, minimalism is carving out an ever-increasing niche among designers that are looking to convey important content in a new way. Like just about any trend or theory in the web design world, minimalism can be easy to get wrong.

So what is minimalism in web design? Just as important, what is it not?

It’s easy to see how a minimal web design can be misconstrued as something that requires less effort or time to create. After all, conveying the feeling of simplicity and a primary focus is really the purpose of a minimal design.

However, saying that it requires less work couldn’t be further from the truth. Minimal web designs are strategically stripped of excess features and gimmicks in order to deliver a clear and concise message to the target audience.

A Minimal Mindset

In order to properly execute minimalism in your design, a focus needs to be established. Being able to present a clear message to your visitors is the core function of a minimal design.

Trying to execute a broad scope of information while still maintaining a minimal style can have pretty disastrous results, so before you dive into the actual design process, having a project plan and narrow scope will go a long way.

Take the time to consider what this site is going to be about. Not all sites can afford to dedicate themselves to a single mission and if this particular project is one of those sites, a different method of design may just be the best way to go.

If you have a clear focus, the next step is to consider what bits of information are going to be vital to your design and structure them in order of significance.

You may be surprised at how little information really needs to be presented to the user at a time in order to get your point across.

The Art of Taking Away

French writer Antoine de Saint-Exuper once said, "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

Designers are often praised for the ability to create. Starting from a blank screen or canvas, we sculpt beautiful works of art — often from scratch.

Because of these trained skills, the art of taking objects away from a design can be a hard one for some to master.

Designers love to invoke visual stimulation anywhere they can, which usually spells out bad news for minimal designs.

Sometimes the best practice can be to design out a full site — and once the design feels complete, start removing all of those objects that don’t fulfill a functional need for the site. True, this can be a painful and time-consuming process, but if done right, the results can be stunning. Practice the concept of reductionism.

Smarter Color

Minimal web designs are notoriously black and white, but that certainly isn’t a rule written in stone.

Minimalism in web design does not imply a lack of color; instead it calls for an intelligent use of well-planned color palettes.

With that said, when it comes to colors, black and white do tend to be the weapon of choice. This is because it leaves the door wide open for pretty much any accent color, allowing designers to match an existing brand image.

More unique color options can be just as effective. The key here is not just that you use color, but rather, how you use it.

In a minimal design, a continuous background color can be used to set the tone and emotion of a site while an accent color is used to capture the viewer’s attention and highlight the most important features of a web site. A properly used accent color will be used sparingly and never draw the user’s eye to more than one bit of information at a time.

The colors embedded in a minimal web design play a huge role in the feeling a site conveys. From sleek and sophisticated black and white designs to vibrant and bold colors across the spectrum, minimalistic web design is not prejudice to any color.

Typography

Designs that have been stripped of all the unnecessary bells and whistles place extra emphasis on the content. Naturally, this magnifies the importance of well thought out typography.

With fewer distractions for the user, it comes down to the text to maintain attention and develop the flow of the web site.

As the internet grows to embrace more flexible options for typefaces, the art of typography is finding a major foothold in the hearts and minds of web designers. Minimal designs are some of the best ways to showcase what can be done with well-selected type, as they should be.

The typefaces that you decide to use — and the way that you implement them — will leave a lasting impression of your design. Typography has the power to convey structural importance and will add a lot of personality to any site. The basic choice between using a serif or sans serif font can be anything but a simple one.

Be sure to embrace the variety of text styles available to you. Going beyond changes in size and color and into leading, kerning, weight and style will open up a wide array of possibilities for your content to help build up your site structure.

Layout Structure

Having a minimal design does not always imply a simple site structure. Oftentimes, dialing back the visual overload of a site means turning up the effort put into an intelligent layout.

Not many things can destroy the effectiveness of a minimal web design quite like a poorly thought out site structure.

Is your logo in a relevant location? Is your site navigation easy to find and convenient to use? These are huge questions that will make or break the functionality of your site without over-the-top graphics to back these important elements up.

If your design requires users to think about how they should use it or look around for the content they need, then you are breaking one of the cardinal rules of web design.

Even though we see many well-executed minimal designs are brilliantly easy to navigate and visually index, they are not inherently that way. Instead, a massive amount of effort and great visual sense is required to pull off such a natural flow that seems effortless.

Negative Space

The art of properly spacing content will separate the men from the boys in any area of design — and when the goal is to make less mean more, negative space becomes one of the most powerful tools available to designers.

Varying amounts of negative space acts as a subconscious visual guide, giving us important feedback on what items on the screen are the most important.

Simply put: The more an item stands alone, the more attention it is going to get.

Additionally, negative space is used to group similar bits of information together which helps to solidify the structure of a design.

The empty space between these information groups gives our eyes and brains a needed break from information. As a designer, it’s easy to want to fill this space with graphics and pretty doodads to look at, but acting on these urges will quickly result in a cluttered and disorganized design.

Find the Balance

With all of this talk about taking away and avoiding graphical gluttony, it may seem as though images are the enemy here.

On the contrary, a minimal design allows images to hold even more meaning. The increase in negative space and the use of simple color palettes in a minimal web design provide images with a real opportunity to shine as true focal points of the screen.

An important concept to remember when placing graphics or images is the need to maintain a balance. Does your image work to support the content at hand? Avoid placing images for the sake of consuming space or displaying color, make sure they hold relevance to the content and support what your users are reading.

In some cases, elements such as infographics, charts or pictures can serve to clean your site up even more. They say "a picture is worth a thousand words" — and if you can use a picture to replace a thousand words, then do so!

Along the same lines, charts and graphs can be a more intelligent way to display information and actually be less sloppy in your minimal design than several paragraphs of verbal explanation.

What to Take Home

At the end of the day, it is most important to understand what goals we hope to achieve with a minimal web design. If you are building a minimal web design for the sake of trying out a new trend, then you have all of the wrong reasons.

More than just another trend, minimalism transcends the medium of the internet or the computer and holds a place in art, architecture and even philosophy. Minimalism is the practice of putting forward only the most important message and removing unwanted distractions.

Having an entirely minimal design will not always suit the needs of a design project. As a matter of fact, more often than not, you will find that minimalism will not be the right fit for the task at hand. However, it is always important to underscore the principles of communicating information in a minimalistic nature.

How About You?

Have you tried to express minimalism in your projects? Or have you found some of the theories behind minimalism important in executing parts of more traditional projects?

Related Content

• 40 Beautiful Examples of Minimalism in Web Design
• 50 Beautiful Clean and Simple Web Designs
• Create a Slick and Minimalist Web Layout in Photoshop
• Related categories: Web Design and User Interface

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly web sites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

This is an exclusive Six Revisions freebie of a 4-page PSD site template called vCard Personal Portfolio Minisite. The design is perfect for web designers, graphic designers, photographers and for all types of creatives who are interested in having a slick and handy personal website design.

The design comes in 4 pages: Homepage (About), Works (Portfolio), Portfolio Pop-Up, and Contact.

All the pages are in Photoshop (.PSD) format with all layers neatly organized in layer groups for easy identification and editing of the logo, text and graphics.

This vCard/minisite PSD layout template is by GraphicsFuel and released exclusively for Six Revisions as a royalty-free freebie so you can use it for your personal or commercial purposes.

Preview Homepage (About)

Works (Portfolio)

Portfolio Pop-Up

Contact

Download

• sr_freebie_vcard_personal_portfolio_minisite (ZIP, 54.00MB)

Related Content

• Free XHTML Template Pack: Classic Luxury
• Dark Aurora: A Free & Beautiful Flash Template
• PSD/HTML Conversion: Code a Clean Business Website Design
• Related categories: Freebies and Web Design

About the Author

Rafi Md is a freelance graphic designer from India. He is the Founder and Photoshop Freebie Creator for GraphicsFuel, a graphic design blog providing original, high-quality Photoshop freebies and design resources. You can also find him on Twitter as @graphicsfuel.

Page titles are one of the most powerful on-site search engine ranking factors that you have control over but website owners often neglect them.

Whether your intention is to improve your search engine visibility or make your website more meaningful and interoperable, you should avoid these five common pitfalls when coming up with page titles.

What Are Web Page Titles?

A web page title is the value you assign the <title> tag that’s typically found on top of an HTML/XHTML document inside the <head> tag.

Most web browsers will display the web page title at the top of the browser window and/or in the browser tab.

For example, the following code:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <title>10 SEO Tips to Remember When Building Your Site</title> </head>

Shows up like this in Google Chrome, Mozilla Firefox, and Microsoft Internet Explorer:

And then, this is how Google displays the <title> value (after a search query of "seo tips remember"):

Now that we are all synced up on what exactly web page titles are, let’s discuss popular mistakes that I see with web page titles.

1. Not Having a Title

There is a tremendous number of websites that don’t have a title tag or that use a default title like "Untitled Document". Just try a search in Google for "untitled document" and you won’t believe the millions of results that matches your search.

Because search engines use your <title> tag to display in their search results, not having one — or having one that isn’t meaningful — makes it hard to find and index your pages.

Page titles give a web page some context. It tells a web robot like Google’s search spider what the web page is about.

2. Page Titles That Are Too Short or Too Long

Even though this is not a massive issue, short page titles will limit the potential of a page to rank for several keywords. Google, for example, can display up to 70 characters in their search engine results page (SERP) — why not take advantage of that?

But don’t overdo it. Keep in mind that the more keywords there are in the title, the more diluted they become. Having too many keywords in the page title, although visible by Google, can lead to the common issue of keyword cannibalization (which we will talk about next).

Terms that appear first in the title are the ones that will be given more importance. For example, if a web page talks about how to repair a broken hard drive on a Dell XPS laptop and the main keywords are "repair", "Dell", and "XPS", a title like:

<title>DIY: How to Repair a Broken Hard Drive on a Dell XPS Laptop</title>

Can be revised to:

<title>Repair a Dell XPS Laptop's Broken Hard Drive<title>

Notice how the key terms are closer to the beginning in the second example, and that it is shorter than the first example. Not only is it better for search engine ranking, but it’s also easier to read and comprehend.

Devise great titles that give your web pages meanings, and remember that web users want information quickly — don’t make them have to think about what your page titles are by writing informative page titles that are neither too short and lacking information or too long and hard to read.

3. Keyword Cannibalization

This is a situation when pages titles are stuffed with too many keywords. Keyword-stuffing is an unscrupulous tactic that a few SEO consultants use to improve their clients’ search engine rankings. Though I am an SEO consultant myself, I don’t recommend blatantly loading your pages with keywords because not only does it affect your search engine ranking’s effectiveness, but is also the reason that we sometimes see non-relevant web pages ranking highly for a specific keyword.

Because your web pages are (or should be) distinct and should have unique content, the same should be the case with page titles. Repeating the same keywords in various pages regardless of whether or not they are relevant to that particular page is not going to help, mainly for two reasons:

1. Irrelevant web pages may be picked up by the search engines, but will have high bounce rates as it doesn’t convert effectively due to the fact that the page isn’t what the searcher is looking for
2. It violates Google’s mantra of "Don’t be evil"

4. Using the Company/Site Name in All Web Pages

As previously said, Google displays up to 70 characters of a given page title in their SERPs. It does see longer ones, though, and despite what many SEO professionals preach, it isn’t a huge problem to have page titles that are greater than 70 characters in a page title.

Nevertheless, you need to think of what should and shouldn’t appear in the title. Many website owners tend to include their business name in the title, some of which can be very lengthy. What is even worse is that they want their name to appear first in every single web page.

Including your company name (unless it’s a search term that will likely be used), is unnecessary, and is consistent with some of the mistakes I’ve discussed earlier.

For example, study this title:

<title>ACME Exporting/Importing Company, LLC: Export Surfboards to Hawaii<title>

With the page title including the company’s name, it is using 37 more characters (with spaces)!

Search engine ranking might be better if it was simply:

<title>Export Surfboards to Hawaii</title>

It would make sense displaying your company name in the homepage, contact page, and about page but avoid them in content pages.

5. Duplicate Web Page Titles

Another common mistake is having duplicate page titles. This makes it difficult to determine which page is which when they are all displayed in search engine results pages.

As previously said, all of your web pages should be unique — so by logic, all of your web page titles should also be unparalleled.

Related Content

• Guidelines for Writing a Good About Page
• 10 SEO Tips to Remember When Building Your Site
• 9 Ways To Improve the SEO of Every Website You Design
• Related categories: Content Strategy and Web Development

About the Author

Modi Mann is a Brighton based SEO and web design consultant who works for a spa breaks company. He specializes in usable web design for the beauty and travel industries. If you’d like to connect with him, follow him on Twitter as @macmodi.

It’s a familiar situation for any freelancer — you open your email inbox, scan through the day’s spam and auto-responder messages, and come across a request for proposal.

It’s the same as the other design requests, aside from one small detail — instead of the standard "we can pay [this much]" message, there’s a line at the end asking how much you think the project will cost.

Being asked to name your own price might seem like a miracle situation, but it’s rarely a relaxing experience for freelance designers, particularly those without a solid and secure price structure for their services.

That one request can end up triggering anxiety and worry, as even the most skilled designer begins to wonder just how much their work time is really worth.

I’ve been in that situation before. We’ve all been in that situation before. It’s not easy, and it’s not the type of situation you want to find yourself in without solid pricing guidelines.

These seven tips can help you give an effective, accurate, and clear project quote that’s neither a sales killer nor a risk to your freelance longevity. Give ‘em a shot.

1. Always Remember How Much Your Time is Worth

There are two ways to price projects: by time, and by output. Both are frequently used by freelance designers and other service workers, although the two are typically employed for different reasons.

Quoting by time (as in an hourly rate) is the preferred option for projects without a clear time requirement and level of scope. Large projects are often impossibly complex and difficult to provide a set price for — what may look simple in an email can often end up being a Herculean effort requiring several weeks of dedicated work.

Prevent your time from being undervalued and give a quote that accounts for your hourly rate, not a per-project quote that eliminates any time-based security.

On the other hand, small projects and one-off requests might require very little time and be largely process dependent. Prevent minor projects and thankless tasks from becoming a cost drain by using a pricing structure that’s built around output. With clear requirements and no need for revisions, a project-based pricing structure can end up saving time for you and stress for your clients.

2. Consider Long-Term Income Potential and Return Business

Retailers have perfected the loss leader concept — the art of luring buyers into stores with a discount product, special service, or sale in the hopes that buyers will purchase other things in the store at regular price. It’s a classic marketing method that’s rarely used by service businesses, perhaps due to the amount of wasted time it can attract. Thanks to relative anonymity, online loss leaders can be a major time-related risk for designers.

But they’re also a risk that’s worth taking, provided you’re reasonably certain of a project’s potential for long-term growth and development. If a major prospective client approaches you with a one-time request for a project, treat it like the introduction to a major project and you could end up winning their business.

Quote with long-term potential in mind.

3. Factor in Administrative Work Time

Sit down and grind through work and you’ll quickly find yourself worn out and lacking ideas. It’s a situation that all creative workers find themselves in, and it’s one that’s rarely accounted for in most billing structures. Accounting for downtime in your billing structure can be difficult, particularly if you’re accustomed to working on a per-project basis.

The simple truth is that any project is going to attract busywork such as emailing, organizing, filing paperwork, and so forth, be it a design project or one that’s built around coding a new application.

Factor for this time in your per-project pricing guidelines and you’ll end up with a more scalable and effective billing structure — one that doesn’t result in wasted hours and time that’s spent endlessly fine tuning small details.

4. Highlight Extra Costs

If you’re a new designer, giving a quote can sometimes be a little scary. There’s a feeling of power and ability, but for most, it’s paired with a small tingling of nervousness and a fear that your pricing might be a little too high, a little too low, or just wrong in some immeasurable way.

It’s a fear that’s present everywhere online — with no face-to-face contact, judging small details can be difficult.

Beat the fear by being completely transparent and straightforward about your pricing. Include every extra cost, quote clients for every possible situation, and provide a quote that’s as close to your final price as it possibly can be.

Clients rarely reject proposals based on their price, but they can and will reject your proposal when it’s loaded with ambiguity. Be clear, be courageous, and price on exactly what you can deliver.

5. Convey the Concept of Value and Quality

There’s an unspoken rule amongst contractors when it comes to large projects: no one judges the quality of applicants, providers, and design firms by the price that they’re bidding.

Low-cost bids aren’t instantly rewarded, high-price providers are rarely penalized, and mid-range designers just don’t operate at an advantage to the big guns. It’s not about price — it’s about what they get for that price.

When the difference between a high-end provider and the cheaper alternative is a better result, any large business is going to spend the extra cash.

If you’re given the opportunity of placing a bid on a major project or multi-stage corporate design deal, go out of your way to explain how you can add value to the project, not how you can help save money.

Ability is rewarded, frugality isn’t.

6. Know Your Competitors and Understand Market Rates

There’s a slight danger in pricing yourself according to others in your industry, particularly when your design services are focused on a particular geographical area or online niche.

When you let other people control your pricing, you’re inevitably forced to compete with them, battling for the same clients and bidding endlessly on the same projects.

However, it’s important to know how much your competitors are charging, even if only to best them in quality and offer a premium service.

Keep in contact with other design agencies in your field or area, understand their pricing and ensure that you can offer a greater deal of value at the same rate.

Don’t let the market dictate your pricing, but do let it create guidelines for what you can offer.

7. Always Consider Growth and Overheads

Great branding goes beyond having an attractive website, a clean business card, and a portfolio of clients that are remarkable at what they do. It’s a discipline that’s steeped as much in pricing as it is in visual identity, and without a price guideline that reflects your ability, it’s unlikely that you’ll be able to grow, both as a designer and as a business.

Factor growth and overheads into your per-project or per-hour quotes, and always think of projects with opportunity costs in mind.

Grinding through every possible project at a laughable rate will lead to short-term success, but it’s almost always at the expense of long-term growth and progress.

If you want to bid on major design projects and truly grow your design business, think of low-cost projects and one-off assignments as a stepping stone, not as a destination for your business.

Related Content

• How to Create an Effective Web Design Questionnaire
• How to Start a Freelance Company
• 5 Unconventional Places to Scout for Web Work
• Related categories: Project Management and Resources

Mathew Carpenter is an 18-year-old business owner and entrepreneur from Sydney, Australia. Mathew is the owner of AddToDesign, a website which provides value added design buzz, along with Design-Newz, the premier source for aggregated design news. Follow Mathew on Twitter: @matcarpenter.