So the last CSS post (you know, the one for newbies? I know you read it! You read them ALL!) wasn't advanced enough for you? Well you'll feel right at home here. This time, I'll take you through 10 CSS tips that experienced designers either somehow haven't discovered or have learned and forgotten (which happens all to often in the coding world).

1. Validate, Validate, VALIDATE!

I've said it a hundred times, validation is more than good practice. It's not just so you can get the little validation badge at the bottom of your page for all to see. Put simply, if your page doesn't validate, then there's something wrong with it! Whether it's a bug or a bad practice or a deprecated element, the point is that if it doesn't validate, then a browser isn't going to know what to do with it.

Therefore, different browsers will treat it differently, and you pull your hair out trying to figure out why you can't get a consistent cross-browser site. Please, please, please...whenever you run into a browser compatibility issue, try validation. You'll be glad you did.

2. Google Comes Before Hacking!

If validation doesn't fix your issue, and you swear your code looks right, then there's a good chance it's a bug in the browser. They're more common than you may think. Before you resort to some crazy hack or some completely unnecessary workaround, just Google it. Nine times out of then, somebody much smarter than you has come along and encountered the same thing and found a fix that's much more graceful than your ugly nonsense. So let Google do the work for you.

3. Use the HTML Utility tags

This same point was in the article for beginners, but I see it so often disregarded by experts that I had to post it here:

Lots of new designers stick everything in paragraph tags, and put an ID or a class around something that needs to stand out or look differently. This works, but it's not the best way. There are a plethora of HTML tags for exactly that. If you want something to bold, don't add class="bold" to the paragraph tag, just use a strong tag. Then, in the CSS, make sure you've got something like:

If you need italics, use an em tag. If you're quoting somebody, try out the blockquote tag. If you want preformatted text, use a pre tag. The list goes on and on. Check out a complete list of HTML tags to get the full story. Tags are your friend. Use them. Less ID's and classes and div's means happier coders and more beautiful code.

4. Hacking the IE Box Model

Probably the most commonly known and most frustrating thing about CSS and IE is the famous box model problem. Basically, if you have a 100px by 100px div with 10px of padding (or margin or border) on each side, then most browsers will render it at 120px by 120px, but IE will keep it at 100x100. To fix this, here's a nifty little hack that's pretty commonly used. Just put one div inside another, like so:

and then add this CSS:

5. Design for Screen Readers

There are whole books written about designing for accessibility. To cut all those excellent books down to a few sentences, here's my take on it.

- USE LISTS: Screen readers announce the number of items in a list before reading it.
- USE ALT AND TITLE ATTRIBUTES: Blind people can't see pictures! They need a description!
- USE TABLE SUMMARY ATTRIBUTE: Tables have a little known summary attribute that is really helpful to someone who doesn't have the ability to glance at a table and get their own summary.
- USE LABEL ELEMENTS: Especially on forms, label elements tell a screen reader which text box is for which information. If you just put it all in a table, it's hard for a screen reader to know what is what.
- INCLUDE "SKIP TO CONTENT" LINK: Imagine having to sit through a screen reader reading every single navigation item before going to the content.
- INCLUDE "BACK TO TOP" LINK: You get the idea.

6. Don't Disregard CSS Frameworks

I know I'm a little biased, but I really think they don't deserve the bad geekpress (I think I just coined a term) they've been drawing from much of the web design community. They reduce cross-browser issues, they do NOT add bloat (contrary to popular belief, 4kb is not bloat), they speed up the design process, and they help you maintain a consistent workflow from site to site. Experienced designers often think they have so much knowledge under their belt that they're better off not learning something new. WRONG! Even if you try out a framework and decide you hate it, I bet you will have learned something in the process.

7. Stay CURRENT!

CSS, web standards, and web design in general is evolving VERY quickly. In the meantime, countless designers are still relying on table based designs. Let this be a lesson: there is no greater disrespect you can give to your clients than charging them for a design based on archaic tools. You MUST keep up with the ever-changing community around web standards and the dynamic state of CSS and web design. Handing a client a table based design that should have been put to rest 5 years ago will result in cross-browser troubles, difficulty updating or modifying the design, and headaches across the board.

To stay current, I've found that the absolute best tool out there is del.icio.us. Just about all of the important developments and changes in the world of web design are all over the place on del.icio.us. Check out the popular tags page and try "CSS" or "design" or "webdesign". If you're into Javascript or PHP (or Ruby or Python or Photoshop or Illustrator, etc.), they're also very well represented. I check it daily, and unless you've found some better way to stay current, you should be checking it daily too.

8. Don't underestimate vector design

The typical work flow for a new site design involves Photoshop almost exclusively for most designers. We will open a new document, and go from a blank site to a full site design in Photoshop, often ignoring the tons of other tools out there which may better suit certain tasks. For example, Illustrator (or even Inkscape or Xara Xtreme) are widely known but not as widely used as they should be. It seems like the typical designer is so accustomed to designing in raster (basically, using pixels instead of points and lines) that many of them are unable to recognize the benefits of vector design (that is, representing art using points and paths instead of pixels so zoom is almost infinitely clear and images don't pixelize).

The advantages of vector art for certain situations are great. If you're doing anything involving original computer art (that is, your own illustration rather than a photograph) then hittin' up the vector makes things simpler. You can easily manipulate each individual section, or point, or angle, or line on your illustration without worrying about pixelation or distortion. If you're using anything hand drawn, Illustrator makes conversion to computer graphics much easier than Photoshop. If you're using a lot of type, a vector program gives you INFINITELY more options for manipulating the shape, size, angle, perspective, color, gradient, etc. of the type than a raster program.

A vector program is by no means the best tool for every job, and you'd be hard pressed to find a job that is best done using ONLY a vector program. Instead, the typically site should be designed both in Illustrator AND Photoshop (or, in my case, Inkscape and GIMP since I'm a Linux geek) so you can get the best of Photoshop (layers, masks, filters, brushes) and Illustrator (type tools, gradient tools, mesh tools, 3D conversions, zooming, modification, etc.).

9. Use Open Source when possible

I'm always amazed at how many designers just HAVE to have Adobe. I won't argue that the Creative Suite is the big papa of design tools, and that most of Adobe's apps are excellent. However, that doesn't mean that you should disregard the slew of other options out there. Open source does no longer mean unstable or not current or behind the times. Firefox, Wordpress, Drupal, Audacity, hundreds of Linux distributions, and dozens of millions of Linux users can all attest to that. Here's where it applies to web design.

The GIMP (GNU Image Manipulation Program) is an EXCELLENT free and open source alternative to Photoshop that just about everything that Photoshop does. I use it everyday. Inkscape is a really great alternative to Illustrator that, although it can't handle some of the more advanced Illustrator capabilities, is free, stable, very capable, and really easy to use. It will handle 95% of the vector design you throw at it (with the other 5% involving Illustrator tools like 3D conversion or the gradient mesh...stuff that doesn't get used all that often).

10. Build Your Own Framework

I believe each and every web designer could benefit from building their own CSS framework. Even if you NEVER use it and you hate CSS frameworks, I promise you will learn a lot. You'll learn about the nuances of grid-based designs, and the beauty of cross browser selectors. You'll learn about general (not site-specific) ways of clearing floats and adding white space. You'll learn a lot. It's always a great idea for a veteran designer who is set in his ways to learn something new and do something interesting again.

Similarly, I think it's a great idea for any developer out there to build their own compiler. Make up your own language, and write a simple compiler to parse it and check for syntax errors. In the same way, you'll probably never use it again, but you'll learn a lot.

Any more you can think of? Let me know in the comments! Happy coding!

This entry was posted on Tuesday, July 15th, 2008 at 11:35 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.