1. CSSGlobe

Icons for Digg, StumbleUpon, Reddit and DesignFloat. Unobtrusive and stylish.

2. Snook

These two buttons got a nice place in the article footer. The ma.gnolia icon fits great with the green colour.

3. Webdesigner Wall

The social media buttons are placed well and fit great in the design. The handdrawn ‘Digger’ makes the standard digg widget a great design element.

4. Woork

Woork has an ‘Add to delicious’ button in a nice, handwritten font combined with a speech bubble with the count. The compact digg button is more standard, but it looks good in this lay-out.

5. Ars Technica

Ars Technica uses a nice homemade digg button with counter.

6. I Can Has Cheeseburger

A few cartoony buttons in a own style. Very creative!

7. I love Typography

Four small black and white buttons with smooth rounded corners. Nonobstrusive and stylish.

8. Noupe

Noupe uses three small icons. The look good, but it bothers me a bit that they aren’t transparent.

9. Lifehacker

A few really small social icons.

10. Problogger

The icons themself are not special, but the list fits great in the columned design of the article footer.

Other Examples:

Ask the Css Guy

Blogstorm

Boing Boing

Copyblogger

Daily Blog Tips

Design Reviver

Opera Development Blog

Divito Design

Fuel your creativity

machinist.salon.com

Problogdesign

Shapeshed

Spoongraphics

The Code Central

The Watchmaker Project

TutorialBlog

TutorialSphere

VideoJug

Youtube

The Trend

The most common place for the social media buttons is the footer. However, some designers are experimenting with other places like the post title or first paragraph. Plain text links are getting more popular too. There are still a lot of standard buttons out there, but the small icons (16×16 pixels or a bit larger) are getting more common, which I think is a good development.

I hope you got some inspiration and if you have encountered other creative and nonobtrusive examples, leave a comment and tell it and I will add it to the article.

What are Divitis and Classitis?

The terms Divitis and Classitis were first coined by Jeffrey Zeldman, in his book “Designing With Web Standards” (thanks reader John). There is a pretty good explanation of what it is at Tyssen Design:

‘Divitis’ is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything. Divitis is related to ‘classitis’ and ’span mania’, both terms used to describe the practise of combining spans with a class to style content when a more appropriate tag is available

Why is it wrong?

Here are three reasons, why you shouldn’t use too much divs or spans:

• It is not semantic
  Semantic coding, is using an element the way it’s meant to be used. For example: using tables for a design is wrong. Tables are meant for structuring tabular data only.
• It is bad for SEO
  Search engines pay attention to certain elements, like <h#>. If you not specify the content by using a neutral element like <div>, the search engines don’t know whether that content is important.
• It is superfluous
  Using unnecessary tags means more code, more code means a larger file and a larger file means more bandwith use and slower pageloads.

Examples

Header

On a lot of site’s the following code is used for the header of the page:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>


But it’s more semantic to use a <h1>-tag like this:

<h1>My site name</h1>

And the following CSS code:

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

We just changed the <div> into a <h1>. This is good for SEO, for the search engine now sees that header image is the most important part of the page. And it’s more semantic to: the <h1> is meant for the most important header of the page, in this case the site name.

Navigation

I often see divs and spans used for navigation, while using a list is much easier. For example:

HTML:
<div id="menu">
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
.menu_item {
/* your style */
}

First of all, there is no need to add a class to the span tags. You can easily target the <span> with CSS without a class. Like this:

HTML:
<div id="menu">
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
#menu span {
/* your style */
}

But it would be more appropriate to use an unordered list (ul). You can see that you can very easily decrease the amount of code you use on your page.

HTML:
<ul id="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>

CSS:
#menu {
/* your style*/
}
#menu li {
/* your style */
}

Other elements

The previous examples are very basic, but even advanced CSS users don’t always use the right elements. Do you use <adress> for your contact data? Or <abbr> for you abbrevations?

Conclusion

Divitis, Classitis and over-using of spans are some of the most common CSS mistakes, but they are also easy to cure. Think a bit further that divs and spans and you’re almost there!

Further Reading

• CSS Adjacent Sibling Selector; this CSS selector is not well known but can be used to target some specific elements, and you don’t have to give them a class if you use this CSS selector.
• CSS Creator Divitis: What It Is And How To Cure It
• What is Divitis? – Tyssen Design

Reset your CSS

All browsers have default styles applied to certain HTML elements. For example, a h1 element is bold and larger by default, and has some margin too. The problem is that all browsers have different default styles so your h1 won’t look the same in every browser. The font-size isn’t really

The solution is to reset the default styles of each browser and build it up again with your own styles. Because you’ve removed the standard browser styles, there won’t be any difference between the browsers. It’s like starting on a clean sheet.

There are a lot of CSS Resets available but Eric Meyer’s CSS Reset is the most popular, according to a poll on CSS-Tricks. A round up of the most used CSS Resets can be found on here.

The disadvantage of a CSS reset is that you have to write a lot more code. Every element you reset, has to be build up again. That’s the reason why a lot of designers use a custom CSS Reset (13% according to the CSS-Tricks poll) or no CSS reset at all. Veerle Pieters showed her limited CSS Reset in a reply to a question of mine.

A CSS Reset is important for cross browser compatibility, but you have to decide for yourself how far you must go when resetting your CSS file.

Using supported techniques

CSS offers a lot of techniques, but not all of them are good supported by every browser. For example the :before and :after pseudo selectors, which don’t work in any version of Internet Explorer, shouldn’t be used.

Nor should the attribute selectors (like a[href $='.pdf']), for their bad browser support. If you want to use the attribute selectors, use jQuery instead of CSS. jQuery is a good way to imitate CSS selectors. It can be downloaded here.

A good overview of CSS Selectors and their browser support can be found here.

Validate

I think this one is obvious: Take the time to validate your CSS styles. Cross browser compatibility is way easier with good and valid CSS. You can validate your CSS file using the W3 CSS Validator.

Summary

Follow these three guidelines and your CSS file will have a lot more browser support:

• Reset your CSS,
• Use only supported techniques and…
• Validate!

What are the techniques that you use to assure cross browser compatibility? Please leave a comment and share your thoughts.

Further Reading

• Make your site cross browser compatible in 5 steps
• CSS hacks inside CSS

Articles

How to structure large css files
An extensive article whith a lot of tips and tricks to structure large CSS files.

Write a well structured CSS file without becoming crazy
A great article on Woork explaining how to be simple, methodic and “elegant-code” oriented.

Optimize your CSS files to improve code readability
Another article on Woork, very clear with much example code.

Top-Down approach to simplify your CSS code
What is the correct approach to design a CSS file? Well, it’s the Top-Down approach. It’s about minimizing the number of CSS elements and using standard HTML tags (like h1, p, ul, …)

CSS Formatting Screencast
A screencast on CSS Tricks, showing how to format your CSS very clearly. You should watch this one.

Efficient CSS with shorthand properties
This is a really great article on 456 Berea Street explaining all shorthand properties. A guide for all webdesigners who want to code efficiently.

Optimize Your CSS even more
Paul Stamatiou wrote this article about optimising your CSS file by compressing it. He uses PHP to compress the CSS file into a .gz format.

Tools

Review of CSS optimization Tools
This review on BloggingPro shows clearly the advantages and disadvantages of the most common CSS optimization tools. You should read this before using one. This article tells you that “Icey’s CSS compressor” is the best one.

The most used CSS optimization tools are:

• Clean CSS
• Robson CSS compressor
• CSS Optimiser.com
• Flumpcakes CSS Optimiser

Conclusion

With this articles, you can easily optimise and organize your CSS file. If you don’t have time to do it your self, you can use one of the great CSS optimization tools. Have I omitted an article or a tool, please tell me.

Designing

Unfortunately you can only apply a limited amount of properties to a first letter. According to w3schools only font, color, background, margin, padding, border, float and some other properties can be applied. Still you can make a nice drop cap with CSS.

I used this CSS code:

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

This image of Wikipedia Commons was used for the background image. Click here to view the example page.

I have some issues with this in Opera: the background doesn’t have the same height as the text. I don’t really know how to fix this, because there is no way to specify the height of the first letter in CSS. It works good in all other major browsers.

The Idea

The idea is a <div> with a specified width and height (the same as the icon). This icon (you might not see something, because it’s white) is set as the background image of the <div>. You’ll also have to set a background color, that will fill the RSS icon. If you don’t really get it, see this explaining illustration I made.

The Code

For this icon you’ll need the image and some CSS and HTML code:

CSS:
.rssicon32 {
width:32px;
height:32px;
background-image:url(rss32.png);
background-color:red;
}

HTML:
<div class="rssicon32"></div>

I’ve have made an extensive EXAMPLE PAGE, where you can see some of the icons. The image i linked to previously is used on this in three different sizes (16×16, 32×32 and 64×64).

Improving the technique

This technique has a lot of benefits, like you can use the same image for a hover effect, only changing the background color, which makes it quick and light weight. Another benefit is that you don’t need to change the image if you want a new colour. But there are also some disadvantages: this image works only on white and you can say that this technique is less SEO friendly than a regular image.
a
Making it SEO friendly with CSS image replacement
There is however a simple way to make this technique more SEO friendly. I will be using CSS image replacement. CSS image replacement is a technique often used to display images instead of text in a SEO friendly way. If you, for example use a header image instead of a <h1>-tag, that’s not very good for SEO, but if you replace the <h1>-tag with an image, you’ll have a SEO friendly and nice header. There are several techniques for CSS images replacement and a good overview can be found on CSS Tricks. You can choose the technique which you think is best, but in this case, I’ll go for the negative text-indent. I have added some text inside the div, which is hidden, because of the negative text-indent.

HTML:
<div class="rssicon32">Subsribe my RSS feed</div>
Making it compatible for every background
There is a way to make this RSS icon compatible with every background, but you’ll loose the rounded corners that way. So there are two options: change the colour of the rounded corners manually with photo editing software or drop the rounded corners. Both ways are displayed on the EXAMPLE PAGE.

Conclusion

I really like this technique and the opportunities of it. You make nice visual effects and still it’s very light weight and it will save you bandwidth. If you have something to say about this article, please share your thoughts and place a comment.

Step 1: Validate

Lots of bugs are caused by invalid (X)HTML or CSS. If you have your site validated, it will be a lot easier to make it cross browser compatible. Validate your (X)HTML code with the W3C validator and your CSS file with the W3C CSS validator.

Step 2: Check your Website

Now you have to check your website in all browsers. I always check my site in the browsers, I’ve installed on my computer (Opera, Safari, Internet Explorer and Firefox). Do it and make a note of the bugs.

Of course, checking your website in the browsers installed on your computer is not enough. You have to check the website in different browser versions on different operating systems. The solution is Browsershots.org. With this website you can take full-length screen shots of your website in a lot of browsers. Just type in your url, bookmark the page and come back 20 minutes later to view the screen shots.

Analyse the screen shots and look for bugs. Be sure to write them down.

Step 3: Is it worth my time?

If you notice bugs in very old or uncommon used browsers, ask yourself if it’s worth your time to fix the problems. Look at the browser statistics of w3schools.com, but don’t forget to look to your own stats (I recommend AWstats). If you have one or two visitors every month still browsing with IE5.5, you should really ask yourself if it’s necessary to make the changes.

Step 4: Search the cause

Now you know about the bugs, you’ll have to look for the CSS attribute or HTML code that is causing this problem. This is often obvious. A good reference can be found on westciv.com. There is a complete list of css attributes with their support in different browsers. Too bad Firefox isn’t in the tables.

If you still cannot find the cause of the issue, search for topics on webmaster forums or post a topic yourself, with a screen shot and (a part of) your CSS and HTML code. A forum I visit often is Ozzu.

Step 5: Fix the issues

Now we’re at the essential part of making your website cross browser compatible: fixing the issues. If you know the code that is causing the trouble, find a way to rewrite the code for the specific browser. There are loads of CSS hacks to do that, but I recommend the use of conditional comments. There is an article on 456 Berea St. explaining why you should use conditional comments instead of CSS hacks.

Conditional Comments.
With conditional comments you can link to separate style sheets for all versions of Internet Explorer. A complete reference can be found on quirksmode. For example:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6style.css" />
<![endif]-->

CSS hacks In-CSS
If you don’t want to edit your HTML file with conditional comments, see my article about CSS hacks inside your CSS file.

Transparency of Images in IE6 and lower
Internet Explorer 6 and lower will not display your transparent PNG’s correctly, there is however a simple solution using Java script. It can be found here.

And of course there are loads of other CSS hacks. There is a complete list on centricle.com, also viewing the browsers that will apply the rules.

Conclusion

Making your site cross browser compatible will cost you some time, but it’s not impossible. The is very good documentation on the web, which can help you in this process. If you use other ways to make your site cross browser compatible, please leave a comment and share it. If you liked this article don’t forget to digg or float it.