10 CSS Tips for a Web Design that Sucks!
If your website doesn’t have the expected success, it may be for 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 more efficient.
1. Nice pullquotes
Using the blockquote HTML tag is a good practice that many web writers use to differentiate the 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 colour 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 category, but they do look very common and fail to blend into your site’s design. Did you know that you can replace these bullets with custom images? Doing this, you’ll have a more coherent design.
Tutorial on MaxDesign - Tutorial 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 images - Tutorial 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 informations and easy to set up using the hcard creator.
Tutorial on 24Ways
6. Creating your printing 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. Links labelling
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 provide 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 the dotted outline
Ever noticed 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 is three ways to deal with submit buttons when designing: leaving the default browser look, customizing the background and border with CSS or replacing the button with an image. The last solution is the one that will blend in the design the best.
Tutorial on Ampsoft
10. Styling tables with CSS
Even though you should avoid using html tables for layout purposes, there is still cases where it’s the best solution, obviously for tabular data.
Tutorial for zebra table with CSS on A List Apart - How to style tables with CSS
This article was written by Mirko Humbert, a swiss designer running a popular design blog.
Excellent article these are quite some helpful CSS style tips especially the Links Labeling “bravo” . One of my favorite CSS style tricks or tips however you’d like to call it is this one using the CSS to create an image map
(http://www.frankmanno.com/ideas/css-imagemap/)
Hope You Enjoy,
WebPrise
Hi Great tutorial, love the tips. I’m designing a new site now so will use the inspiration.
Cool tips. I’m more and more becoming a fan of details, and they really do make a piece pop.
[...] 10 CSS Tips for a Web Design that Sucks! [...]
just stumbled across this article….very useful for me, thank you very much!
more use of blockquotes me thinks
great tips, got to say though that would have prefered having the titles and then the images.
its all a bit too confusing.
[...] you want to read one of my latest articles, check out my 10 CSS tips on Templates [...]
I would recommend against #8. If a user is tabbing through links on your site, outline is there to show them what they have selected and so shouldn’t be disabled. Even if you declare highly visible styles for :active and :focus, users may not understand as they are accustomed to the dotted outlines.
I also agree with james, removing the focus on links is a very bad idea as they are an important navigational aid for impaired users who use the keyboard as a means of navigating around your site. It sometimes can look unsightly, especially when using image replacement techniques but it is important for accessibly that the focus on links is kept.
Sorry, but this article is, for the most part, cack! Especially point 8. That dotted outline is an accessibility feature and the notion that it’s unprofessional is laughable.
The info isn’t necessarily wrong, but just pointless and miss informed I think.
good points. i’m surprised by the amount of pages i’ve seen with the dotted link border — in a case where it definitely should be removed: for links where the text is hidden/indented off the screen. leaves a long dotted line across the entire page. yuck!
You shouldnt remove the dotted outline unless its for a tab or some kind of javascript interface and if you do replace it, do so using blur(). Dotted outlines are part of the browser’s UI that is helpful in assisting people find what they last clicked on.
This is an excellent article. It’s for sure helpful for the non-designers and newbies.
enjoy