Archive for October, 2008

10 Simple CSS Tips and Tricks for Better Web Design and Usability

Thursday, October 30th, 2008

If your website doesn’t achieve the success you’re hoping for, it might be due to a very simple reason: bad design. While professional templates are hard to achieve for a non-designer, these simple CSS tweaks can dramatically improve your design, make it more accessible, and make it more efficient.

1. Nice Pull Quotes
Using the blockquote HTML tag is a good practice that many web writers use to differentiate quoted text from the rest. However, you can improve the rendering of these by tuning it with CSS. Adding nice typographic quotes and a background color will make your citations really stand out.
Tutorial on SitePoint

2. Background Images for Bullets
Bulleted lists are a nice way to display links, archives, or categories but they do look very common and fail to blend into your site’s design if to stick to displaying default bullet points. Did you know that you can replace these bullets with custom images? Doing this, you’ll have a more coherent design.
Tutorial on MaxDesignTutorial on MacWorld

3. Rounded Corners
When creating a box in your design using basic HTML and CSS, it will look very square with hard corners. You can smooth those out and make them look less aggressive using one of these two easy techniques.
Tutorial using imagesTutorial without images

4. Styling Your Forms With CSS and Labels
Unfortunately, it is still very common to see people use tables to align their forms. It is actually easier and more accessible to use CSS and labels to achieve this.
Tutorial on Pete Freitag’s blog

5. Styling hCard with CSS
hCard is a simple, open, distributed format for representing people, companies or organizations using a 1:1 representation of vCard properties and values in semantic HTML or XHTML. It is a nice way to display your contact information and it is easy to set up using the hcard creator.
Tutorial on 24Ways

6. Creating Your Print Stylesheet
If your article is long, chances are that people will want to print it out to read it. Improving the layout of the printed version is quite quick to do, so why don’t you do it?
Documentation on CSS discuss

7. Link Labeling
Ever clicked a linked and been taken to a PDF, DOC or MP3 file? Remember how annoying it was? Knowing this, you should be kind to your visitors and give them a way to know what kind of file a link will open. This can be done by adding a little application icon using the following technique.
Tutorial on Maratz.com

8. Removing Dotted Outlines
Ever notice this dotted outline coming around focused or active anchor links? It makes your site look less professional, so you should get rid of it using the following technique.
Tutorial on CSS tricks

9. Image Replacement for Submit Buttons
There are three ways to deal with submit buttons when designing: leave the default browser button, customize the background and border with CSS, or replace the button with an image. The last solution is the one that will blend in with the rest of the design the best.
Tutorial on Ampsoft

10. Styling Tables with CSS
Even though you should avoid using HTML tables for layout purposes, there are still cases where it’s the best solution, such as for presenting tabular data.
Tutorial for zebra table with CSS on A List ApartHow to style tables with CSS

This article was written by Mirko Humbert, a Swiss designer running a popular design blog.