BatchBook Blog

Adam’s Favorite CSS Techniques

Posted November 14th, 2008
By Adam Darowski (bio)
Filed under: How We Do It, Technology

As a web designer, one of the most exciting aspects of joining BatchBlue a year and a half ago (wow, has it really been that long?) was the opportunity to develop with web standards every single day. In my past as a multimedia designer, I worked with many diverse software packages. But I was then and still am completely in love with good, old-fashioned, W3C-sanctioned XHTML and CSS that works on every (modern) browser and in any environment.

Designing with CSS can be a bit tricky, and I’ve helped quite a few people get started over the past couple of years. I finally decided to collect all of my favorite CSS techniques and record them in one place—which I’ve done in a post on my personal blog appropriately called “My Favorite CSS Techniques“.

I wanted to share the list here, too, in case:

you’re starting your own business and are curious of “the right way” to build your site…
you’re looking to save some money and want to update your existing web site yourself…
you’re just curious about how to do this stuff!

Here are the techniques and why they’re cool:

Image Replacement on Headers: Google loves to read the headers on your page to figure out what your page is about. But they’re pretty blah-looking. You can keep the searchability of text headers while replacing them with pretty graphics in CSS. Best of both worlds!
Implementing types and values using Microformats: We love giving you as many ways as possible to re-use your contact data in BatchBook. One of the ways is by using Microformats. Here I show how you can use additional HTML to make the data more useful and use CSS to hide the parts that the user doesn’t need to see.
Custom icons on list items: You’ll see this a lot on BatchBlue.com. I love playing dress-up with unordered lists!
Creative use of definition lists: And if you thought unordered lists were fun, how about definition lists! (Hint: You’re reading this as part of a definition list right now.) Here I deconstruct how I built the Personas table on the BatchBlue.com home page.
CSS sprites: Also from the Personas table, here’s how you can reduce calls to your sever (making things faster) but putting a bunch of images in one file and only exposing the bit the user needs to see. Peek-a-boo!
Auto-clearing with .clearfix: This might be my favorite class in my CSS document. By magically applying this, everybody sits down where they’re asked and nobody crashes into each other.
Font sizing: keywords & percentages: You’ve got to start somewhere, and that’s usually with how you’re going to size your text.
Override iPhone text adjustment: A goodie for the iPhone lovers—your iPhone is smart but sometimes tries to be too smart (and resizes things without you asking).