I wrote a wee bit more about the project on the portfolio page for it. Here’s a full screenshot so you can take a look:

Visit site »

(full size image)

Upon joining PatientsLikeMe, I learned that I’d be shaking up this comfy part of my life as well. PatientsLikeMe is also a Rails app, but the views are built in Haml and the site’s CSS is built with Sass. (We use Git for version control, but that’s a post for another time.)

What the heck are Haml and Sass?

According to Haml’s About page, Haml is:

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

And Sass is described on its About page as:

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

While it felt a bit overwhelming to learn a new way to do what I’ve been doing for years, Haml & Sass definitely make sense for me. I’m a designer/developer, but definitely approach things from more of a development side. I get just as excited (if not more) about a clean document structure and re-use of style elements as I do about a gorgeous look and feel. Anything you want to do in HTML & CSS is possible with Haml & Sass—it’s just a more efficient way of getting there. And there’s so much more!

What do Haml and Sass look like?

The best way to get what it’s all about is to take a look at some code. Here’s a codeblock of HTML/ERB, taken directly from the Haml tutorial page:

<div id="content">
  <div class="left column">
    <h2>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>


Here’s how that block would look in Haml:

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"


Pretty badass, huh? Much cleaner. I thought I’d miss writing full markup. But I’m also a huge fan of nicely indented, properly closed markup. The fact that Haml’s indentation is what defines the document structure is awesome. You don’t have to hunt for closing </div> tags and whatnot. I recommend reading that entire tutorial (it’s quite short).

While Haml is really cool, Sass is what I’m really psyched about. I work in Sass a lot more than I work in anything else now, and I’m still discovering ways that it vastly improves my CSS development.

Here’s what a very simple bit of Sass code looks like:

h1
  height: 118px
  margin-top: 1em
.tagline
  font-size: 26px
  text-align: right


Pretty much expected, this would render as:

h1 {
  height: 118px;
  margin-top: 1em;
}
.tagline {
  font-size: 26px;
  text-align: right;
}

“Huh? What’s the benefit there?” you might ask. I mean, all it does is remove the semi-colons and braces!

Oh, but wait.

Things that make Sass kick ass

Buckle up for this part. Today, I want to tell you about three thing that will blow your CSS-writin’ mind.

1. Nesting
2. Variables
3. Mixins

Nesting

In one of my recent (and favorite) style sheets, I started using much longer selectors not only to ensure my styles are targeting the right elements, but also to be visually manageable in my style sheet.

Take this block of styles targeted for a specific page on the site:

body#home.partners div#content h1 { margin-bottom: 20px; }
body#home.partners div#content h2 { background: url(../images/press-head-bg.png) repeat-x top left; border-top: 1px solid #4097E5; padding: 8px; }
body#home.partners div#content p { font-size: 90%; }
body#home.partners div#content div#main dl { position: relative; min-height: 160px; }
body#home.partners div#content div#main dt { margin-left: 170px; border-top: 2px solid #4899E9; padding: 4px 0; }
body#home.partners div#content div#main dt a { color: #000; font-weight: bold; }
body#home.partners div#content div#main dd { margin-left: 170px; font-size: 85%; }
body#home.partners div#content div#main dd.logo { position: absolute; top: 0; left: 0; margin: 0; }
body#home.partners div#content div#main dd.logo img { border: 1px solid #999; }

Yeah, I one-lined it. I’ve been into that lately. But Sass doesn’t support it (yet, but it’s coming).

One of the reasons I like one-line CSS is that it’s easy to read the selectors. But why keep typing the same things over and over? The same thing can be accomplished in Sass with this:

body#home.partners
  div#content
    h1
      margin-bottom: 20px
    h2
      background: url(../images/press-head-bg.png) repeat-x top left
      border-top: 1px solid #4097E5
      padding: 8px
    p
      font-size: 90%
    div#main
      dl
        position: relative
        min-height: 160px
        dt
          margin-left: 170px
          border-top: 2px solid #4899E9
          padding: 4px 0
          a
            color: #000
            font-weight: bold
        dd
          margin-left: 170px
          font-size: 85%
          &.logo
            position: absolute
            top: 0
            left: 0
            margin: 0
            img
              border: 1px solid #999

Longer? Yes. Easier to read? Hell yes.

This is pretty straight forward. If you indent an element under another element, you’ll chain them together. The output in CSS can get larger as you nest deeper and deeper, but the Sass file becomes much easier to manage. Your web development brethren may gasp if they peek at your stylesheet, but you’ll be able to write and manage it much faster in the Sass file.

One thing in the above code block that might look unfamiliar is the &.logo. What “&” means is “repeat the parent selector”. In this case, one parent is dd, so the selector becomes dd.logo. You can do many different things with this, such as putting &:hover after an a or even putting * html & nested beneath a selector to target IE6.

Wait, what? Mix IE hacks in with your main CSS? Yes, I realize that this invalidates your CSS and goes against some “best practices”, but trust me—it’s easier to manage. When you keep browser hacks in a separate style sheet, you forget about them until you’re actually thinking about that browser. A seemingly harmless tweak to your main stylesheet might break something in your IE stylesheet. But outta sight, outta mind and you don’t know it until a user complains. By keeping the IE hacks along with the main CSS, you can see how your change might affect other browsers.

If you’re still worried about invalidating your stylesheet, well… that means you haven’t even tried CSS3 yet. So, really, I got nothing for ya here.

In your Sass, I’ve started targeting different versions of IE along with the standard style like this:

h1
  padding: 1em
  *padding: 2em / targets both IE6 and IE7, does not target IE8
  * html &
    padding: 3em / resets IE6 in case it needs to be different from IE7

The * right before the selector will target IE6 and IE7 but leave IE8 alone (well, technically all browsers read that as an invalid line an ignore it… except for IE6 and IE7). The trusty * html hack will only target IE6. A slash, as you probably guessed, starts a comment in Sass. This IE targeting method may not be the prettiest thing in the world, but it keeps everything in one place so you easily manage all browser styling at once. When you change the padding of the h1, it provides you with a reminder to check other browsers where you served targeted tweaks.

Last thing about nesting, you can also use it for properties like font, border, margin, etc. Like so:

h1
  border:
    color: black
    style: solid
    width: 1px

That would produce:

h1 {
  border-color: black;
  border-style: solid;
  border-width: 1px;
}

Of course, you may prefer to write this out in shorthand (h1 { border: 1px solid black;), but there are times when doing it this way can come in handy.

Anyway, let’s move on to some more awesome.

Variables

There was a time when I thought variables in CSS might be the only thing that could make it any better. And variables are indeed awesome. Variables are a great way to store values that you’ll use over and over again, such as colors, fonts, graphics, or anything else reusable in your project.

Here are some variables we set for colors that indicate severity:

!severity_normal = #CCC
!severity_none = #1DAE49
!severity_mild = #FEDC32
!severity_moderate = #FF8F02
!severity_severe = #D93019

To call one of these values, simply do this:

a
  &:hover
    background-color = !severity_mild

Huzzah!

Now try this—it’ll blow your mind: Just set your target page width. Then use that variable and perform simple operations on it to calculate the widths of your layout’s columns!

!page_width = 1000px
…
#main
  width: !page_width * .7
#sidebar
  width: !page_width * .3

This turns into:

#main
  width: 700px;
#sidebar
  width: 300px;

Looks simple, but IMAGINE THE POSSIBILITIES! But there’s actually one more thing that will really rock your world…

Mixins

If Sass mixins were a rock band, I’d have the tee shirt. What are they? The description from the Sass tutorial says:

Mixins are one of the most powerful aspects of Sass. They allow re-use of styling – properties or even entire rules – without having to re-write them or move them into a non-semantic class.

To define a mixin, just write =mixin-name with some Sass nested underneath. To use it, write +mixin-name where you want it to be expanded.

Mixins can be incredibly simple or very complex. Here’s a pretty simple one:

=alternate_font
  font-family: 'Lucida Grande', 'Lucida Sans Unicode'
  letter-spacing: -.03em

Say you’ve set a default font on your body, but want to apply an alternate font here and there. Instead of adding those fonts every time, just put it as a mixin. This could also be done as a variable, but since we’re also tweaking the letter-spacing, it is better to do it with a mixin. The best part of mixins like this one is that they eliminate the need to add frivolous class names that are only used for style targeting.

Let’s apply it:

h1
  +alternate_header_font

And that will render as:

h1 {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode';
  letter-spacing: -.03em;
}

You can also pass arguments within mixins. If you’re into rounded corners, ever get tired of defining the -moz and -webkit properties every single time?

Try this instead:

=border_radius(!radius)
  :border-radius = "#{!radius}px"
  :-moz-border-radius = "#{!radius}px"
  :-webkit-border-radius = "#{!radius}px"

Then when you want to round the corners of an element, just add this:

#sidebar
  border: 2px solid #666
  background-color: #CCC
  +border_radius(8)

That will add 8-pixel rounded corners for all (supported) browsers. I recently worked on a design that was so well-rounded you could call it Alan Trammell. This mixin alone would have been a breeze to use and very much welcomed.

Okay, one more example because this was a very handy one I used the other day. I had a couple links I wanted to place a divider pipe between. You know, the type of treatment you often see in footers. I saw that Cris had already written a mixin for it called “divider_pipe”, and it looked something like this:

=divider_pipe(!x_position=0, !y_position=50%)
  background:
    image = "url(/images/divider.gif)"
    repeat: no-repeat
  position = !x_position !y_position
  &.first
    background-image: none

You catch that? Awesome! Basically, you just apply it to the li in Sass, like this:

#footer
  ul
    li
      +divider_pipe

What that will do is place the divider on the left side of each li, but also look for an li with a class of “first” and turn off the background image for that one. Perfect! Once all our target browsers support pseudo-elements, we’ll be able to simply use a :first-child, but until then, this worked like a charm. You’ll notice you can also pass in some arguments here to alter the x- and y-positioning of the pipe on the fly.

Sass mixins can be as simple or as complex as you’d like. They can be used for just one rule you want to add over and over (without adding frivolous class names). They can be used for content boxes you use over and over that you need to receive arguments, variables, and all sorts of custom rules. Mixins are as powerful as you want to make them.

And what do I think?

Haml is pretty simple. I like it because it leads to a clean document structure, proper indenting, proper tag closing, etc. But Sass is the real life-changer, here.

I’ve gotten used to Sass enough that I keep forgetting to put semicolons in my plain ol’ CSS. While the nesting makes Sass incredibly easy to manage for the developer, it does lead to some less than beautiful output. But I think that is a fair tradeoff because it makes things so much easier to manage.

The same can be said for managing targeted browser tweaks inline with the standard Sass. It’s not the traditional way of doing things in CSS, but keeping it all together ensures less conflicts in the end.

In a way, I’ve needed to let go of some of the artificial “best practices” instilled in me while learning CSS. But the reality is that Sass comes with a whole new set of “best practices” that, in my opinion, lead to better results.

And that’s what matters most.

There are a lot of terms out there for “making sure things work nicely in every browser, even if it doesn’t work or look exactly the same in all of them”. I was thinking about the approach I took on a recent project, the Criminal Justice School Guide. I suppose it is kind of like progressive enrichment… but with a bit of graceful degradation thrown in.

What does that mean? Well, first of all the case for this approach was an easy one to make when working with a client (Avenue100, and directly with an old friend and colleague Tracy Shaw) who gets web standards. What I did was take a mockup and build the design in CSS using the very latest CSS techniques. Only then did I take a look at the design in other browsers.

The difference between what I did on this project and some others is that I only fixed major design elements. If it wasn’t a big deal, I shrugged it off. LET ME TELL YOU it was a great feeling. “Does that corner really need to be rounded? Nope!” This way the browser hacks are kept to a minimum (and quarantined in separate style sheets) and the site is ready to play ball when Internet Explorer finally is.

Let’s call it… “selective degradation”.

Today I want to look at four areas of the design, see how they look in Internet Explorer vs. a real browser, and show the markup and style examples.

1. Search field

The first task was to create a search form that sits over a partially transparent rounded box that also sits on top of some other geometric shapes. It’s easy enough to cram all of that in a background image and let the form sit on top of it, but why do that when you can produce a more bulletproof approach that allows the rounded box to grow with the form (if need be). Here’s how I styled the form:

form#search {
  float: right;
  background-color: rgba(183,180,170,.4);
  padding: 10px 20px;
  margin: 16px 12px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}


The floating, padding, and margins are all standard stuff. The background-color and border-radius, however, are not. border-radius, of course, will round the corners of the box. Only it doesn’t work in Internet Explorer (even IE8!). How about the background-color? That’s RGBa, which allows you to define a background color WITH a transparency level. Of course, IE8 can’t figure that out either.

So, what should we do? Well, just like I said right away. Cram it all in a background image. So, here’s the fix:

div#header { background: url(../images/ie/header.png) no-repeat right top; }

All versions of IE are served a header that has the rounded, semi-transparent box as part of the background image. It’s not as bulletproof, but do users of Internet Explorer really care about that? Nope. Problem solved.

2. Rounded content window

See that rounded top of the content box? That’s a pretty important design element, so let’s keep it rounded for everyone. Easy enough to do in Firefox:

div#content {
  clear: left;
  background-color: #FFF;
  border: 2px solid #EAEAEA;
  margin: 0 12px;
  padding: 12px;
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
}

The part that rounds the corners, again, is the border-radius. Notice that -webkit-border-radius doesn’t adhere to the nice shorthand that -moz-border-radius and border-radius do. That’s why you get nice long attribute names like -webkit-border-top-right-radius. That’s a mouthful!

So, what has to happen to get these corners in IE? It’s actually a little bit complex, to be honest. Here’s what I did:

div#content {
  padding: 0 12px 12px;
  border-width: 0 2px;
}

So, here we removed the padding and border from the top of the content box. Then:

ul#navigation {
  overflow: hidden;
  background: url(../images/ie/content-rounded-top.png) no-repeat left bottom;
  margin: 0 12px;
  padding: 10px 0 0 14px;
}

We instead added the rounded corners as a background-image on the bottom of the navigation menu above the content box. We added some extra padding to make up for it.

ul#navigation li {
  padding-bottom: 12px;
}

Finally we added some padding to the bottom of the list items themselves. And that did the trick!

3. Rounding of inner content boxes

You see how some boxes inside of the content box have rounded corners, too? You know what I decided to do about these? Nothing. Not an important design element. NEXT!

4. Partially transparent stripe

The stripe that goes over the photograph is a pretty major design element as well. Once again, RGBa comes to the rescue:

div#home-banner div#title {
  float: left;
  margin-top: 172px;
  padding: 8px;
  width: 625px;
  color: #FFF;
  background-color: rgba(0,54,99,.6);
}

RGBawesome, indeed.

Et tu, IE? You guessed it. Just put the blue stripe in the image itself and serve that one to IE.

div#home-banner { background-image: url(../images/ie/law-and-justice-ie.jpg);

Note that this approach doesn’t make sense if the image changes often. This one, luckily for me, does not.

There you have it. It was a great feeling to build the site with only modern browsers in mind. This allows you to structure the markup and style in the best, most semantic way possible. Then, you can fill in only the necessary gaps, improving the user experience in lesser browsers.

Here’s how it looks.

So, to recap the markup of the h1 is:

<h1>Adam Darowski</h1>


And the CSS is:

h1 { font-size: 450%; line-height: 1.2; font-weight: normal; font-style: italic; margin: 0 20px 20px 40px; text-indent: -55px; }
h1:before { content: '<h1>'; font-size: 50%; }
h1:after { content: '</h1>'; font-size: 50%; }


The good news is Internet Explorer 8 is the first version of IE that will actually will show the content contained in the pseudo-elements.

The Problem

The bad news is it looks like this:

Wait, why is it so tiny? The problem seems to lie in the h1:before, h1:after { font-size: 50%; }. If you remember, I took my h1 and boosted the size to 450%. Then, for the “exposed markup”, I dropped the font-size to 50% of that. Looks like the difference is:

• Firefox, Safari, and Opera treat the content generated by the :before and :after pseudo-elements as part of the h1. Because of this, the font-size: 50% is adjusts the font-size: 450%, making the “exposed markup” render at 225%.
• Internet Explorer 8 treats then content generated by the :before and :after as outside of the h1. In this case, the font-size: 50% is instead applied to the base text size (which in my case is font-size: large). This is why it looks so tiny.
• Internet Explorer versions 7 and older are still reading HTML for Dummies and haven’t caught up.

The Solution

Once I figured out what was happening, the fix was super easy. I created an IE8 style sheet an used a conditional comment to add it to my page. You target IE8 the same way you did older versions:

<!--[if IE 8]>
  <link href="style-ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Then in that style sheet, I simply added a pixel-based font-size for the pseudo-elements.

h1:before, h1:after { font-size: 30px; }

Why pixel-based? Simply because IE8 won’t screw it up. It’s not ideal, but neither is Internet Explorer. Here’s how it looks:

So, if you ever generate content with :before and :after and resize it with percentages (I mean, who doesn’t do that every day?), that’s your solution.

The Problem

Here’s what the homepage looks like. I can dig it.

The header, sidebar, and footer are pretty straight forward. That large graphics-and-text element in the main column is a bit different. So, how would I go about marking this up? First of all, the photos and screenshots are presentational, so we’d handle that with a background image. For the text (which is not presentational, so we want it in the markup), I tend to size using keywords and percentages. But in a case like this, I’d use some pretty pixel-specific font sizing, padding, and line breaks to get the markup to render like the mockup. Of course, I’d have to use some sort of image replacement on the “Patients + Data” title since that’s a non-standard font.

But Wait!

Here’s the thing. The page is actually somewhat fluid. It has a min-width of 1000 pixels and a max-width of 1200 pixels. So, even if I wanted to use that approach, I have no way of knowing exactly where the text should go because the image behind it doesn’t have a static size.

So… now what?

Well, we’re gonna rock it like it’s 1999 and just use one big honkin’ image for the main column. It’s not the most elegant solution, but it will work the best. To ensure the text-based content is still available of the user turns images off, we’ll put the text in the markup. Like so:

<div id="image">
  <h2>Patients Data = Insight</h2>
  <p>Patients are no longer just health care consumers. They are healthcare customers. <strong>PatientsLikeMe</strong> provides deep insight into your target patients&rsquo; attitudes, beliefs, behaviors, and outcomes.</p>
  <p><a title="Learn more about our Products &amp; Services." href="products/">Learn More&nbsp;&raquo;</a></p>
  <a title="Learn more about our Products &amp; Services." href="products/"><img src="images/home1.jpg" alt="Home page artwork" width="864" height="735" /></a>
</div>


You see I have the text and the image present. I’ll use CSS to offset the text while keeping the image visible. That CSS looks like:

div#image h2, div#image p {
  position: absolute;
  left: -1000px;
  width: 100px;
}


Why use this instead of display: none;? Setting display: none; on an element will completely remove it, even for users with assistive devices such as screen readers. The offset technique will just push the content out of the viewport. It’s still actually there, just not visible. Users with CSS and images enabled will see the image and no text. Users with screen readers will simply read the text (and alt text of the image). Users with CSS AND images turned off will see just the text. The rare folks that have CSS turned off but images turned on will get both the image and the photo. I believe that’s a small enough population to make this an acceptable approach.

But Wait Again!

We’d actually like this image to fill the main column, whether the screen is at 1000 pixels wide, 1200 pixels wide, or somewhere in between. How do we do that?

div#image img { max-width: 100%; height: auto; }


In the markup, hard-code the image’s width to fill the maximum width of the area. In the case above, it was 864 pixels. Then, the max-width: 100%; ensures that if the width of the div shrinks, the image will shrink along with it. The height: auto; simply will adjust the height of the image to correspond with the new width.

Awesome, right?

Oh, the IE Horror!

The good news is that all the markup and CSS above works fine with Internet Explorer. Yes, even IE6. However, it’s the godawful way that IE resizes images that causes the problem.

Luckily, through a bit of hunting I found that by simply adding some weird proprietary Microsoft thingie to your CSS, you can fix it. I just added this line to my IE stylesheet:

div#image img { -ms-interpolation-mode: bicubic; }


You can see the before and after below. Pretty remarkable difference. It becomes really noticable when there is text in the image.

One caveat: I tried to use this technique on a PNG file. It didn’t work. However, I re-saved the image as a high quality JPG and it worked. So I suppose Microsoft assumed you would only want to do this for photos or something?

One more caveat: If you have many images on the page with -ms-interpolation-mode: bicubic added to them and do any window resizing, things can get slow really quickly. Ethan Marcotte wrote a more complicated but higher performance method for handling this. If you’re talking one or two images on a page though, you’re fine with this approach.

And there you have it. Your image will stretch to your desired max- and min-width, and even look nice in Internet Explorer 6 and 7 (IE8 actually resizes images like a real web browser).

I figured I’d share some markup & style for a couple of page elements. Hopefully you’ll find it useful.

“Tweet this page” button

In this day and age, “Tweet it” buttons are becoming more and more important. Not only does a Tweet it button give users the ability to quickly post a page to Twitter, it reminds them to do so. There are online services out there that will make Tweet it buttons for you. Might as well roll your own. Here, clicking the “Tweet this page” button will send you to Twitter (if you’re logged in) and prepare a message that says “Small businesses are taking over the Internet! The Small Business Web is here. http://thesmallbusinessweb.com”. That’s actually super easy to do. The markup:

<p id="tweet-it"><a href="http://twitter.com/home?status=
  Small+businesses+are+taking+over+the+Internet!+The+Small+Business+Web+is+here.+
  http://thesmallbusinessweb.com">Tweet this page</a></p>

(I’ve added line breaks for cleanliness.) Basically, the hardest part is typing a “+” instead of a space.

Here’s how I styled it:

p#tweet-it a { display: block; position: absolute; top: 0; left: 20px; background: #004A8D url(logos/tweet-it.png) no-repeat 4px 50%; color: #FFF; margin: 0; padding: 3px 10px 5px 44px; text-decoration: none; }
p#tweet-it a:hover { background-color: #333; }

I wanted the whole blue box to be a link instead of just the text. So, I applied display:block to the link. Next, I absolutely positioned the link to it sticks to the top of the page. That’s where the top: 0 comes in. I added some space to the left, hence the left: 20px.

Next is the background. This encompasses the color (#004A8D), the birdie graphic [url(logos/tweet-it.png)] and the positioning (4px from the right of the box, 50% vertical positioning within the box). And of course, we don’t want the bird to repeat, so no-repeat. Then, I set text color and padding and yanked the underline from the link. The hover state simply changes the background from blue to gray. Pow, yer done.

“Business card” footer

Seriously, aren’t they cute? Here’s the markup on one of those little guys:

<dl id="shah" class="vcard">
  <dt class="fn">Sunir Shah</dt>
  <dd class="title">Chief Handshaker</dd>
  <dd><a class="url org" href="http://freshbooks.com">FreshBooks</a></dd>
  <dd><a class="email" href="mailto:sunir@freshbooks.com">sunir@freshbooks.com</a></dd>
</dl>

Yes, Microformats! This is the perfect case to use hCard—and it’s so easy. Each business card gets it’s own “vcard” class (that’s the class that says “hey, everything inside this element is one set of contact information”).

If you’re not familiar building an hCard, it’s all about applying the right class names to certain bits of data. Definition lists are great for this because you can basically throw a class on any single definition. The “fn” class means “full name”. The “title” class means “job title” while “org” means “organization”, or company that the person works for. I doubled up “org” and “url”, applying both classes to a link. That’s because the text that is hyperlinked is the org and the href is the url for that org. A two-fer!

Finally, the “email” applies to “email address”. I could have hyperlinked Sunir’s name with his email address using the same process above (<a class="fn email" href="mailto:sunir@freshbooks.com">Sunir Shah</a>), but in this case I wanted the email address visible (like a business card!).

That was fun. Let’s style it:

div#contacts dl { border-top: 1px solid #CCC; border-left: 2px solid #CCC; border-right: 2px solid #CCC; border-bottom: 6px solid #CCC; float: left; padding: 5px 5px 5px 52px; margin: 0 1% 0 0; }
div#contacts dt { font-weight: bold; }
div#contacts dd { font-size: 85%; margin: 0; padding-top: 2px; }
div#contacts dl#shah { width: 11%; background: #FFF url(photos/shah.jpg) no-repeat 5px 7px; }

Each definition list (each business card) gets these fancy borders set, is floated left (so they all line up nicely), and gets some internal padding. The padding-left is set to 52px to accommodate our 40px thumbnail images. There’s a 1% margin-right to give them a bit of breathing room.

Next, we simply bold the definition term (in this case the person’s name). Each definition (bit of contact info) is set to 85% with a bit of padding on top. Finally, each definition list is given it’s own thumbnail image thanks to the unique ID. I also gave each list a unique width (since some names are short and others are much longer).

So, there you have it—a new portfolio piece and a couple little markup & style examples. I’m curious what you think of the page.

However, this auto-detection is a bit overzealous. In addition to phone numbers, I’ve seen it link date ranges (1978-2008), specific dates (3/9/2009), and—for us baseball stat geeks—offensive rate statistics (.312/.418/.515… and I’ll send a BatchBlue tee shirt to the first person to identify that sweet career line).

Tonight, I was building a page and tested it in iPhone. It incorrectly linked some dates. This was problematic because in that specific section, I had all anchors set to display: block;. So, adding these extra links broke the design.

I could have added some extraneous markup and worked around it, but I was curious if there was a way to turn off this auto-detection. Turns out, there is.

In your <head>, add this line:

<meta name="format-detection" content="telephone=no" />

That will turn off ALL phone number auto-detection on that page. Enjoy!

I tweeted:

When you place strong emphasis on a link, do you put the <strong> inside the <a> or the <a> inside the <strong>? I think I’m inconsistent.

I had been putting the the <a> outside of the <strong>. Like this:

<a href="http://mailchimp.com/"><strong>MailChimp</strong></a>

My reasoning was that if you take away the link, I would still want the phrase to be emphasized.

However, Matt brought up some good points. His first was that I’m linking the phrase, not the emphasis. I can buy that. Also, he brought up the point that putting the <strong> outside is cleaner for semantic web scraping stuff.

I assumed this was minor and no big deal. But I’m happy to see that there are others who also care about this stuff. So, what do you do? What’s your reasoning?

I love CSS. But I also have always loved markup. With the new redesign here, I’m trying to give plain ol’ semantic HTML (POSH) the recognition it deserves.

Step 1 was the redesign.

Step 2 was the purchase of MarkupIsBeautiful.com.

Step 3 is a new category on the blog—appropriately named Markup.

Step 4… some new content. I look forward to it.

Photo by Steve Ganz. Steve also sees the beauty in markup.

What was I trying to do?

I have a full-time gig as the User Experience Designer for BatchBlue. That affords me the ability to be a little creative with my portfoio—it isn’t my source of income. However, I do believe that all full-time designers should do a little freelance to stay fresh. So, I’d still like to show what I’m about.

The design traits I want to convey to prospective clients and readers are simplicity, elegance, cleanliness, and a sharp attention to detail. I also want to communicate that markup and style are at the heart of what I do. I do a lot of different things, but I’m always happiest with a text editor, a web browser, and a refresh button.

Given all this background, my goal was to work the underlying markup into the visual design.

How’d I do it?

Since the “exposed markup” is merely presentational, I wanted to keep it out of the “real” markup. Basically, when you “View Source”, I don’t want you to see <h1>&lt;h1&gt;Portfolio&lt;/h1&gt;<h1>. I wanted the nice, clean <h1>Portfolio<h1>. The best way I could come up with to pull this off was with the :before and :after CSS pseudo-elements.

Huh, pseudo-elements? Pseudo-elements are added to CSS selectors to give you a bit more selection control. The four pseudo-elements are :first-letter (allows you to style the first letter of the content contained within that tag), :first-line (allows you to style the first line), :before (allows you to add content before the tag), and :after (content after the tag).

The :before and :after pseudo-elements are great—except for one problem. You guessed it. IE. But not just IE6. IE7 still doesn’t support them. The additional content just doesn’t show up. For my portfolio, I decided that was a fine tradeoff. I’m really not targeting the type of users who would surf the web with IE (present company excluded, of course!). Besides, this approach actually well. If you use IE, you just don’t get the “exposed markup” tags.

Here’s how it looks in IE7:

The markup

The pseudo-elements allow me to use a pretty standard definition list:

<dl id="active-projects">
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/batchbook/">BatchBook</a></dt>
    <dd>Small Business <abbr title="customer relationship manager">CRM</abbr></dd>
    <dd>For <a href="http://batchblue.com/">BatchBlue Software</a></dd>
    <dd>May 2007&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/batchblue/">BatchBlue.com</a></dt>
    <dd>Corporate Website &amp; Weblog</dd>
    <dd>For <a href="http://batchblue.com/">BatchBlue Software</a></dd>
    <dd>May 2007&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/tabigail/">Tabigail</a></dt>
    <dd>A simple, gray, one-column, socially savvy WordPress theme</dd>
    <dd>For the WordPress community</dd>
    <dd>December 2008&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/baseballtwit/">BaseballTwit</a></dt>
    <dd>Blog posts and Twitter tweets about baseball stats and history</dd>
    <dd>For the sabermetric community</dd>
    <dd>December 2008&ndash;Present</dd>
</dl>

The CSS

First, we know we want the :before and :after content to always appear italicized and (my favorite color) gray. So, let’s use the global selector with the pseudo-elements. This way we don’t have to reapply the color and style over and over again.

*:before, *:after { color: #CECECE; font-style: italic; }

First, we’ll expose the opening and closing <dl> tags.

dl#active-projects:before { content: '<dl id="active-projects">'; }
dl#active-projects:after { content: '</dl> <!-- close #active-projects -->'; }

For the content property, you can either use a string (like I did), an image (via url(image.png)), or any of the following: open-quote, close-quote, no-open-quote, or no-close-quote.

Update: For some reason, this wasn’t rendering properly in Safari. The closing </dl> was appearing after the first <dt>. So, instead, I needed to wrap the <dl> in a <div> (giving the <div> the id of “active-projects” instead). This tricked Safari into putting the closing </dl> at the end of the <dl> where it belongs. If you know why Safari does this, please let me know!

Here’s the CSS for the <dt>:

dt { margin: 10px 0 10px 24px; font-size: 125%; }
dt a { font-weight: bold; }
dt:before { content: '<dt>'; font-size: 80%; }
dt:after { content: '</dt>'; font-size: 80%; }

In the first line, the margin gives a little space on the top and bottom, plus a proper indenting for our markup. Since the <dt> is used for the project name, I bumped the size up a bit. I also made the links bold to stand out a bit more. Then, of course, comes the :before and :after. In this case, I also dropped the font size for the tags a bit (to offset the increase in size of the links).

And now, the <dd>:

dd { text-indent: -38px; margin-bottom: 4px; padding-left: 56px; }
dd:before { content: '<dd>'; }
dd:after { content: '</dd>'; }

In addition to a little bit of a margin, I added a bunch of padding on the left and then used a negative text-indent. In the event that the <dd> goes to two lines, this will cause it to indent quite nicely.

And there you have it… pretty bits of markup used as a design element without muddying your “real” markup.

Things look a little different around here today.

In December, when I launched the Tabigail theme, I wrote:

Since [March 2007], I’ve tweaked and refined [this site] endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

So, I had publicly tasked myself with a redesign. Today, I’m launching it. I dig it. So, what do I want to talk about?

1. Markup is beautiful: I love markup. Like, a lot. I love it so much that I wanted to work it into the redesign. It serves many purposes. Markup is beautiful, so I think it looks good. Also, there’s a new portfolio that takes the markup-as-design-element to a new level. Not only does exposing markup on my portfolio show what’s important to me and shows I know what I’m talking about, it also weeds out prospective clients that just don’t “get it”.
2. Finally, a portfolio: I’ve been told that I’m a rare designer that doesn’t have a portfolio. Now I do. I’ve only got the most recent/current projects on there right now (as you can tell by the class of the <dl>!), but I do love the design.
3. Ignores IE6. Well, and IE7, too: Would you believe that IE7 still doesn’t support the :before and :after pseudo-elements? The markup in the design relies heavily on this (look carefully, it’s not in the source). The design degrades well in IE, of course. They just don’t get the markup at all.
4. A sidebar!: The Tabigail theme had no sidebar. What I love about the sidebar in the new design is that it essentially contains a Microformats tutorial.
5. Non-web fonts: I’m into Georgia. It’s very pretty, for a web font. But I wanted to reward the folks that may have nicer fonts installed. If you’ve got Garamond, you’ll get Garamond. If you’ve got Baskerville, you’ll get Baskerville. If you’ve got nothing, you still get Georgia.
6. Gray: Yeah. I can’t help it. At least I used red for the first time!

Please let me know what you think. I’m sure it’ll keep getting tweaked. So, this is far from final. It’s just a first release.

Like most beginners, when I first started using WordPress (in May of 2006) I used a downloadable theme. I eventually outgrew it and in March 2007 I stripped down the blog’s design to just raw HTML. Little by little, I started styling—purposely NOT working from an established design… I wanted to see where playing with the CSS took me. I captured how it looked less than 24 hours into the design.

Since then, I’ve tweaked and refined endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

I’m calling it Tabigail.

Why Tabigail? One of the features of the design was a rotating Polaroid-style photo in the header. I’d change it every so often. However, the last time I changed it was December 15, 2007—one year ago today. That was the day we had to put our beloved kitty, Abby (or Abigail the Tabigail), to sleep. I never could make myself swap out the image of Abby.

I’ve built a new page specifically for the Tabigail theme. You download the theme there and I’ve also posted setup and customization tips that allow you to make the theme more “you”. On that page, I briefly wrote about what makes Tabigail a compelling WordPress theme:

1. So super simple. A quick peek at the CSS will show you that there’s really not a ton here beyond plain HTML.
2. No sidebar. You know those annoying over-crowded sidebars so many blogs have? This theme has NO sidebar.
3. Socially savvy. The footer features a list of links to your social networking profiles. Because, really… it’s not all about your blog anymore. Plus, these links are marked up in an hCard with rel=me (just planning for the future!).

Just a note on that last one… what’s cool about that hCard with all those rel=me links? Well, as far as I know, nothing yet. But as the need to consolidate web identities becomes more mainstream, Tabigail will be ready to tell any service provider where all your social media identities are located.

Dude, you’re future-proof!

So, please… take a look, download the theme, and leave a comment letting me know what you think. This is my very first WordPress theme (well, publicly available one anyway… I’ve done a ton)… I’m hoping somebody finds value in it!

These techniques don’t require any acrobatic wizardry or anything. They mirror my design approach—simple, clear, minimal, and (hopefully) easy to follow. It is because of this approach that my cross-browser fixes are usually quite minimal. That’s why you won’t see many IE tweaks here.

Before I start…

How did I learn CSS?

I’ve only picked up a few CSS books over the years, but I’ve leaned on those books heavily. They are:

• Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
• Bulletproof Web Design (1st edition) by Dan Cederholm
• HTML Mastery by Paul Haine
• CSS Mastery by Andy Budd

What? No Zeldman? I know, I know. I started with the local protégé, Mr. Cederholm. He’s taken me far.

Of course, I also read a ton of web design blogs and online publications. The key ones (for me) are:

• SimpleBits (Dan Cederholm)
• 456 Berea Street (Roger Johansson)
• A List Apart
• Vitamin
• Email list from the Web Standards Group

Now that you know how I learned to do this, here’s what I find myself using over and over again:

Image Replacement on Headers

Headers (h1, h2, etc.) are very, very important. For starters, search engines love them. When Google crawls your page, it first asks “Okay, where’s the h1? That will tell me what this page is.” If you don’t include headers, then you’re making Google guess. Why make Google guess?

This is what the h1 of Darowski.com looks like:

<h1><a href="http://www.darowski.com/tracesofinspiration">Adam Darowski’s Traces of Inspiration</a></h1>

And here’s how it renders with no CSS:

Of course, that just ain’t gonna do. Here’s how it renders with the rest of the design:

So, how do you do that? With image replacement. We’re taking the h1, then giving it a background image and height & weight (using the dimensions from the background image). For the text itself, we give it a negative indent so that the text doesn’t appear on the page. It’s still there for screen readers and search engines, but the typical user won’t see it.

Here’s the CSS:

h1 {
  margin: 0;
}
h1 a {
  display: block;
  background: url(darowski.png) no-repeat 0 0;
  height: 103px;
  width: 449px;
  text-indent: -9999px;
}


Why is most of the code applied to the link inside the h1? Because if you apply the negative indent to the text inside the h1, the clickable link actually appears off the page. If you indent the text inside the clickable link, the link itself still appears on the page—only the text inside is hidden. I know, weird. But it works!

Implementing types and values using Microformats

Using Microformats to mark up an email address is pretty easy.

<a href="mailto:adarowski@gmail.com">adarowski@gmail.com</a>

becomes:

<a class="email" href="mailto:adarowski@gmail.com">adarowski@gmail.com</a>

And that’s it.

But what if you want to add more information to that email address, like if it is a home or work email address? In that case, inside of the object with the class of “email”, you need two more objects: one with the class name of “type” and another with the class name of “value”. The “type” is where you define home or work while “value” is the actual email address.

Here’s an example from my About page:

<p>Work Info:</p>
<ul>
  <li>Website: <a href="http://batchblue.com/" class="url">http://batchblue.com/</a></li>
  <li>Blog: <a href="http://darowski.com/" class="url">http://blog.batchblue.com/</a></li>
  <li class="email"><span class="type hidetext">Work</span> Email: <a href="mailto:adarowski@batchblue.com" class="value">adarowski@batchblue.com</a></li>
  <li class="tel"><span class="type hidetext">Work</span> Phone: <span class="value">(888) 402-2824</span></li>
</ul>


So, inside the li (which has the “email” class) lives two spans—one “type” and one “value”. The HTML renders like so with no CSS:

But you’ll notice that in this case, I have a “hidetext” style on the “type”. That’s because I only want to display it as “Email”. I simply add this style:

span.hidetext {
  display: none;
}


and I’m done. It renders like so:

I don’t always hide the types, though. On BatchBook’s contact detail pages, the type works very well into the layout:

Custom icons on list items

Here’s one I use A LOT. Unordered lists are wonderful. I use them all the time. But that bullet that denotes an unordered list by default can be a bit boring. Here’s what I did to spruce up the bloggers list on the BatchBlue Blog:

And here’s the markup:

<h2>Bloggers</h2>
<ul id="bloggers">
  <li id="calhoun"><a href="http://blog.batchblue.com/?author=6" title="Archive for Keri Calhoun">Keri Calhoun</a></li>
  <li id="darowski"><a href="http://blog.batchblue.com/?author=5" title="Archive for Adam Darowski">Adam Darowski</a></li>
  <li id="larson"><a href="http://blog.batchblue.com/?author=8" title="Archive for Will Larson">Will Larson</a></li>
  <li id="ohara"><a href="http://blog.batchblue.com//?author=4" title="Archive for Pamela O'Hara">Pamela O'Hara</a></li>
  <li id="ransom"><a href="http://blog.batchblue.com/?author=1" title="Archive for Sean Ransom">Sean Ransom</a></li>
  <li id="riggen"><a href="http://blog.batchblue.com/?author=2" title="Archive for Michelle Riggen-Ransom">Michelle Riggen-Ransom</a></li>
  <li id="sweeney"><a href="http://blog.batchblue.com/?author=7" title="Archive for Stephanie Sweeney">Stephanie Sweeney</a></li>
</ul>


As you can see, we gave the list an id of “bloggers” and each list item an id of the blogger’s last name. That allows us to apply a different icon to each blogger’s list item.

But first, here’s the CSS to get the list looking the way we want (correct padding, left indenting, removing the default bullet):

ul#bloggers {
  margin: 0;
  list-style: none;
}
ul#bloggers li {
  padding: 4px 0;
  margin: 1px;
  padding-left: 24px;
}
ul#bloggers li a {
  text-decoration: none;
}


Next, here is the CSS for each of the individual line items:

#calhoun { background: url(../images/keri-calhoun-icon.jpg) no-repeat left 2px; }
#darowski { background: url(../images/adam-darowski-icon.jpg) no-repeat left 2px; }
#larson { background: url(../images/will-larson-icon.jpg) no-repeat left 2px; }
#ohara { background: url(../images/pamela-ohara-icon.jpg) no-repeat left 2px; }
#ransom { background: url(../images/sean-ransom-icon.jpg) no-repeat left 2px; }
#riggen { background: url(../images/michelle-riggen-ransom-icon.jpg) no-repeat left 2px; }
#sweeney { background: url(../images/stephanie-sweeney-icon.jpg) no-repeat left 2px; }


If you look around any site I’ve created, you’ll probably see a lot of these. The footer at Darowski.com uses it:

Creative use of definition lists

As much as I love unordered lists, there’s one thing I love more. Definition lists!

I admit, I had never even used one before reading Web Standards Solutions, but now I use them all the time. All contact info within BatchBook is laid out in definition lists. Think about it… what better defines the home email than the email address itself? The definition list is an unordered list with even more semantic meaning.

When we launched the new personas section of BatchBlue.com, I went with a definition list. The names of the personas are the definition terms (dt) and the person used in the persona as well as the information that person is likely to track help define it (dd).

Here’s the complete markup:

<h3 class="persona-header">Who needs a CRM anyway?</h3>
<div id="personas" class="clearfix">
  <dl class="sales">
    <dt>Sales professionals</dt>
    <dd class="photo"><a title="Peter Caputa" href="http://www.linkedin.com/in/pc4media" target="_blank">PC4Media.net</a></dd>
    <dd class="track">Customers, <span>leads,</span> conversions…</dd>
  </dl>
  <dl class="freelancers">
    <dt>Freelancers</dt>
    <dd class="photo"><a title="Alex Taylor" href="http://bigringdesign.com/" target="_blank">Big Ring Design</a></dd>
    <dd class="track">Clients, <span>partnerships,</span> invoices …</dd>
  </dl>
  <dl class="virtalassistants">
    <dt>Virtual assistants</dt>
    <dd class="photo"><a title="Michelle Wolverton" href="http://chelpixie.com/" target="_blank">ChelPixie</a></dd>
    <dd class="track">To-dos, <span>schedules,</span> executives…</dd>
  </dl>
  <dl class="entrepreneurs">
    <dt>Entrepreneurs</dt>
    <dd class="photo"><a title="Jack Templin" href="http://thoughtcap.com/" target="_blank">ThoughtCap</a></dd>
    <dd class="track">Opportunities, <span>partners,</span> VCs…</dd>
  </dl>
  <dl class="editors">
    <dt>Editors</dt>
    <dd class="photo"><a title="Anisa Raoof" href="http://kidoinfo.com" target="_blank">KidoInfo</a></dd>
    <dd class="track">Writers, <span>deadlines,</span> articles…</dd>
  </dl>
  <dl class="consultants">
    <dt>Consultants</dt>
    <dd class="photo"><a title="Brent Leary" href="http://www.brentleary.com/" target="_blank">CRM Essentials</a></dd>
    <dd class="track">Clients, <span>vendors,</span> proposals…</dd>
  </dl>
  <dl class="eventorganizers">
    <dt>Event organizers</dt>
    <dd class="photo"><a title="Chris Brogan" href="http://chrisbrogan.com/" target="_blank">Chris Brogan</a></dd>
    <dd class="track">Speakers, <span>attendees,</span> sponsors…</dd>
  </dl>
  <dl class="nonprofits">
    <dt>Non-Profits</dt>
    <dd class="photo"><a title="Danielle Brigida" href="http://www.nwf.org/wildlife/" target="_blank">National Wildlife Federation</a></dd>
    <dd class="track">Donors, <span>fundraisers,</span> volunteers…</dd>
  </dl>
  <dl class="realestateagents">
    <dt>Real estate agents</dt>
    <dd class="photo"><a title="Gerry Bourgeois" href="http://realtyman.com/" target="_blank">RealtyMan.com</a></dd>
    <dd class="track">Buyers, <span>sellers,</span> referrals…</dd>
    <dd class="custom"><a href="realestate/">Custom version available</a></dd>
  </dl>
  <dl class="designers">
    <dt>Designers</dt>
    <dd class="photo"><a title="Mikey Hougland" href="http://lamikey.com/" target="_blank">lamikey.com</a></dd>
    <dd class="track">Projects, <span>clients,</span> deliverables…</dd>
    <dd class="custom"><a href="designer/">Custom version available</a></dd>
  </dl>
  <dl class="marketers">
    <dt>Marketers</dt>
    <dd class="photo"><a title="Saul Colt" href="http://saulcolt.com" target="_blank">Saul Colt</a></dd>
    <dd class="track">Press, <span>bloggers,</span> social media…</dd>
  </dl>
  <dl class="superheroes">
    <dt>Super Heroes</dt>
    <dd class="photo"><a title="Small Business Super Heroes" href="super-heroes.html">Super Heroes</a></dd>
    <dd class="track">We know <span>you’re out</span> there!</dd>
  </dl>
</div> <!-- close #personas -->


An abbreviated version of how that looks unstyled:

And here’s how I got that to look:

I’ll admit… I’m a bit proud of that one.

So, the CSS. There’s a lot of it. Let’s start with the basic definition list:

#personas {
  border-top: 1px solid #CACACA;
  border-left: 1px solid #CACACA;
  margin-bottom: 10px;
  width: 688px;
}
#personas dl {
  float: left;
  width: 163px;
  padding: 4px;
  border-bottom: 1px solid #CACACA;
  border-right: 1px solid #CACACA;
  margin: 0;
}
#personas dt {
  font-family: Georgia,serif;
  font-size: 120%;
  color: #004A8D;
  padding-bottom: 2px;
}
#personas dd {
  margin: 0;
}


So, the whole thing is in a div (with an id of “personas”) that has a top and left 1-pixel border. The reason I did this is the individual definition lists inside the div will have bottom and right borders. That means we don’t have any double borders on any side.

Above, I’ve also set the width for each dl and floated it. The dt simply has some text formatting while the dd has its margin eliminated.

Here’s some more styling done to the definitions:

#personas dd.track {
  color: #666;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 110%;
  line-height: 120%;
}
#personas dd.track span {
  display: block;
}
#personas dd.custom {
  font-size: 80%;
  margin-top: 3px;
  padding-left: 22px;
  background-position: left 50%;
}
#personas dd.custom a:link,
#personas dd.custom a:visited,
#personas dd.custom a:hover,
#personas dd.custom a:active {
  color: #F88C17;
  text-decoration: none;
}
#personas dd.custom a:hover {
  color: #F88C17;
  text-decoration: underline;
}
#personas dl.realestateagents dd.custom {
  background: url(../images/icon-realestate.png) no-repeat;
}
#personas dl.designers dd.custom {
  background: url(../images/icon-designer.png) no-repeat;
}
#personas dl.designers,
#personas dl.realestateagents,
#personas dl.marketers,
#personas dl.superheroes {
  min-height: 95px;
}


First, we are styling the text of the “track” definition (that’s the one we use to explain what each persona will track). I threw a very non-semantic span on the middle item in each of those. The reason I did that is so I could make it display as block (force it to a new line) to make sure they all line up the same.

A couple items in the bottom row have another definition with the class “custom”. This is to denote we have a custom version of BatchBook for this persona. First, I adjust the font size, margin, and padding. Then, I set the background position of the icons (in the same manner as explained above). Next, I set the link styles. Then, I set the background images for the Real Estate and Designers version. If you’re a designer, you just may find BatchBook for Designers handy.

Finally, I set the minimum height of the bottom row to make room for that “custom” style, even if it isn’t there. That way the boxes all line up on the bottom. (I realize this isn’t completely bulletproof, but these boxes will all have the exact same text in them so box height is easier to plan for.)

Finally, we have the thumbnail photos, which I’m actually going to cover in the next technique.

CSS sprites

I’ve recently been turned on to the wonder that is CSS Sprites. What are they? Well, for examples like the personas box above, I’d need to call 12 graphics. Instead of creating twelve graphics, I’ve created one that looks like this:

Now, I just call the same graphic and only expose part of it, depending which persona it is. Sure, the file is bigger, but calling one image and caching it is a LOT easier on the server than fetching twelve smaller images.

And this is only a small example. Every button in BatchBook is now in one single graphic file (it’s pretty darn big). I just call that one graphic and adjust the background position.

So, here’s how the CSS works for the personas table. First, here’s how we style each photo:

#personas dd.photo a {
  float: left;
  display: block;
  height: 45px;
  width: 45px;
  text-indent: -9999px;
  background: url(../images/personas.jpg) no-repeat;
  margin-top: 3px;
  margin-right: 8px;
}


So, we float it, set a height & width, indent the text (like covered earlier), set a background image, and give it some margins. Right now, we’re calling the same image and position for each. Here’s how we adjust the positioning for each photo:

#personas dl.sales dd.photo a { background-position: 0 0; }
#personas dl.freelancers dd.photo a { background-position: -45px 0; }
#personas dl.virtalassistants dd.photo a { background-position: -90px 0; }
#personas dl.entrepreneurs dd.photo a { background-position: -135px 0; }
#personas dl.editors dd.photo a { background-position: -180px 0; }
#personas dl.consultants dd.photo a { background-position: -225px 0; }
#personas dl.eventorganizers dd.photo a { background-position: -270px 0; }
#personas dl.nonprofits dd.photo a { background-position: -315px 0; }
#personas dl.designers dd.photo a { background-position: -360px 0; }
#personas dl.realestateagents dd.photo a { background-position: -405px 0; }
#personas dl.marketers dd.photo a { background-position: -450px 0; }
#personas dl.superheroes dd.photo a { background-position: -495px 0; }


So, with each dl, we change the horizontal position by 45 pixels (which makes sense, since the photos are 45 pixels wide!). If I need to add more personas, I just add them to the image, save it again, and add a few lines to the CSS. Done!

Auto-clearing with .clearfix

I use this one all the time, too—including in the personas example above. Say you’ve got a div and you put two elements in it. You float one left and float the other right. You need to clear that div so everything lines up correctly under it and nothing crashes together.

You could make sure the element after it uses a clear: both; style. But, you’d have to remember to put that in every single time. And what if you insert something in between them? It breaks. It is much cleaner to get the divs to clear themselves.

You can do with using the clearfix class. Here’s how it looks:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


Now, “after” the element with the class “clearfix”, it will render a “.”, display it as block (forcing a new line), set the height to “0″ (I believe this is to make Firefox behave), hide it, and—of course—clear both!

In your IE6 and IE7 stylesheets, you’ll just have to add this:

.clearfix { height: 1%; }

That will trigger “hasLayout”. I’m not even going to try to explain hasLayout. I’ll leave it to this guy.

Font sizing: keywords & percentages

One of the first things you need to decide when you design a site with CSS is how you’re going to size your text. You’ve got (essentially) three options:

• Pixels (px)
• Ems (em)
• Keywords (small, medium, large, etc.)

Pixels are fine for sizing text. It’s probably what you’re used to. But, there’s a problem.

It is quite common for users to increase the size of text on web pages. Let’s face it, a lot of sites are built by 20somethings with perfect eyesight. I wouldn’t be able to read many sites I created in college. I’m among those that will bump up the font size on sites occasionally.

But, as always, the problem is Internet Explorer. IE won’t adjust the size of text rendered in pixels. Kind of kills the #1 accessibility feature right there.

Ems are a perfectly usable workaround. But as you can see, they can be a bit difficult to grasp. I’ll be honest… I never bothered. I always thought it would be neat to create a completely em-based design so that the entire site zoomed in and out along with the text size. But now that modern browsers are replacing the text sizing option with a full-page zoom, that type of functionality is being handled by the browser. So, it’s a lot of extra work that, quite honestly, I’m glad I didn’t do.

So, what do I use? I use those silly keywords that come with HTML. You know… small, medium, large, etc. That’s me. Well, I actually only really use small. Because I use that as the baseline for my entire site. I then use percentages to adjust sizes accordingly.

First, what does it look like? I start off by establishing small as my baseline.

body { font-size: small; }

Then, in BatchBook I drop that down to 95% right off the bat to shrink it ever so slightly.

div#content { font-size: 95%; }

I actually leave this step out on BatchBlue.com. I guess that’s because when you’re actually inside the app, every pixel is roughly 5% more valuable.

This becomes the default font size. I then use percentages to scale headings up and supplemental text down. So, for example, if I’m adding a little note to a section that I want to appear a bit smaller, I’d mark it up as:

p.note { font-size: 90%; }

Then, to style my headings I scale it up:

h1 { font-size: 180%; }
h2 { font-size: 140%; }
h3 {font-size: 110%; }

With the increase in prominence of full-page zoom, I’ve considered going back to pixels. I still wouldn’t do a completely em-based design, though. I just don’t have the urge to show off my math skills that much.

Override iPhone text adjustment

I’ll finish with a very simple one. I like to make sure things look good on my iPhone, so I was delighted to find this on the Apple site:

Safari on iPhone adjusts the text size so it’s more readable after the user double taps. After a double-tap, Safari on iPhone gets the width of the block of text and determines the width after a double-tap. Safari on iPhone then determines an appropriate multiplier that is applied to the layout.

Sometimes you might find that automatic text size adjustment doesn’t produce ideal results. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look their best. In these cases, you can override the text size adjustment.

Use the -webkit-text-size-adjust CSS property to override Safari’s default text size adjustment. The values for -webkit-text-size-adjust are:

• none: <body style=”-webkit-text-size-adjust:none”>
• auto: <table style=”-webkit-text-size-adjust:auto”>
• multiplier percentages: <div style=”-webkit-text-size-adjust:200%”>

Only thing is… I find the results from -webkit-text-size-adjust can make things look weird. You just never know. Sometimes a paragraph will appear half the size of an unordered list for no apparent reason. So, on BatchBlue.com and BatchBook, I’ve added this:

html {-webkit-text-size-adjust: none}

And we’re in business! Everything looks like it does on regular ol’ Safari.

Dassit!

So, there you have it. That’s certainly not everything I use. And I’ve certainly used more complex solutions than those. But, the more complex something is, the less likely I am to use it again.

So, tell me dear reader, what are your favorite CSS techniques?

Or, what are you having a hard time wrapping your brain around (in regards to CSS)?

BatchBook Redesign

A week and a half ago, I announced over at the BatchBlue Blog that we finished a redesign of BatchBook, our small business CRM.

Here’s how it looks:

In the blog post, I talked about the main goals of the redesign, such as a better use of space, lightening up the design, making the app faster, and setting up for some more future improvements.

The redesign was an incredibly fun process, with the majority of the redesign happening over five days. The rest was just tweaks, special cases, and browser compatibility stuff. The first step when I started redesigning was to DELETE. I deleted a LOT of code.

I love CSS, but I’ve always tended to be a play-it-safe kind of guy. I use simple styles that won’t run into cross-browser issues and tend to stick with what works. Well, this was an opportunity to try some new things. First came the buttons.

The buttons use CSS sprites. So, I have one file called buttons.png (a nice 32-bit transparent png) that contains every button in the app. All buttons in the application call that same file (but since it’s already cached, it’s much faster!) and then only show a part of the image (as defined with background-position).

I ran into some issues and learned a decent amount while playing with the buttons. Here are some takeaways:

• A <button> will inherit styles differently than an <a> link. The <a> will inherit font-family, font-size and others from styles applied to the <body> tag. The <button> tag, however, needs those properties defined specifically using button in the selector.
• border-radius works like a dream in FireFox 3. It doesn’t work at all in Internet Explorer (of course). In Firefox 2, it works, but looks like poo. And Safari… it looks awesome, except that strangely it won’t apply to a <button> (I found that odd since FF2 and FF3 will do that).
• display: inline-block; is a wonderful thing—and it works in Firefox 3, Safari, AND Internet Explorer 7. We don’t support IE6, so it doesn’t matter that it doesn’t work. But, go figure, the problematic browser in this case was Firefox 2. It doesn’t support inline-block. Very frustrating. I tried some hacks, but none worked well enough. So, I had to resort to unnecessary floating.

Another favorite part of this redesign was preporation for allowing user skinning. I went through the styles and commented what colors would be user definable. I set those up in a separate override style sheet. We haven’t hooked up the feature yet, but just playing with it locally has me very excited about allowing people to conform the product to their company color scheme.

If you haven’t checked out the slideshow of the redesign on Flickr, please take a look. I’d love to hear what you think!

BatchBlue.com Redesign

Instead of taking a rest after a major redesign, I embarked on another. This one wasn’t quite as big—and it also isn’t completely done yet. But on Sunday afternoon (right after we hit Mashable), we launched the redesign of BatchBlue.com.

We ran the old design through some user testing—both via Twitter and in person. We noticed some trends emerge and worked quickly to fix them. A lot changed, but here are the highlights:

• It’s wider! I now have 200 extra pixels to work with. This makes me very happy.
• The rounded corners in the header and footer (and some within the page) are long gone.
• We’ve got a new header that more clearly talks about key benefits of the application.
• The bulleted lists (which were far more popular than I would have guessed according to our tests) have shifted from the five tabs of BatchBook to the three main tasks you accomplish with BatchBook
• We added personas, so you can get an idea of who BatchBook is for and what they’d use it for. But not too much info to digest.
• We’ve written some fantastic and comprehensive Blue Papers (like a white paper, but blue!). it was time to bubble these free resources to the home page. (I worked on the Social Media for Small Business one.)

A lot of other things changed inside the app, but all the really cool stuff is on the home page. We, of course, have more updates coming up that I can’t wait to talk about.

So, that’s it! That’s what I’ve been up to! I’d love to hear your feedback.

Basically, I want to see all sorts of assistive technologies in action. I want to see someone from the crowd offer up their URL and then “see” it fed through a screen reader. I want to see an entire room of developers realized that NO, it’s not okay to just throw a class of “bold” on a paragraph. I want to see what an eye-tracker really does. How about braille displays?

I was thrilled to see my friend Kemie tweet a link to the video below.

The video is a screencast by accessibility consultant Aaron Kennon (a guess from listening to the audio) that shows how pages are rendered by a screen reader when there are HTML headers on the page and when there aren’t.

Please think twice before relying on CSS to convey the structure of your page.

There’s no list-head (<lh>) element.

Let’s say I’m marking up a list of my top three Last.fm artists. It would look something like:

<ol>
  <li>Teenage Fanclub</li>
  <li>Mogwai</li>
  <li>Yo La Tengo</li>
</ol>

Which, of course, would then render like:

1. Teenage Fanclub
2. Mogwai
3. Yo La Tengo

But what if I wanted to label that list something like “My Top 3 Artists on Last.fm”. What are my options? I could throw it in a paragraph (<p>) tag. But a random paragraph doesn’t really semantically relate it to the list. I could put it in a header tag (<h1>, <h2>, etc.). That would at least tell me it is a header to something and not just an arbitrary paragraph. But still, that header isn’t associated with the list itself in any meaningful way (beyond proximity).

If I marked this up in a table, I have the option to add a table header (<th>). Tables are for tabular data, so for this example, I’ll show what the markup would look like if I wanted to make a table of my top three artists with the number of times I played them.

<table>
  <tr>
    <th>My Top 3 Artists on Last.fm</th>
    <th>Play Count</th>
  </tr>
  <tr>
    <td>Teenage Fanclub</td>
    <td>855</td>
  </tr>
  <tr>
    <td>Mogwai</td>
    <td>755</td>
  </tr>
  <tr>
    <td>Yo La Tengo</td>
    <td>705</td>
  </tr>
</table>

And that would render like this:

Like the header tags and <strong> tag, most (if not all) user agents will show the <th> in bold. Also, since the <th> is a different element than the standard <td>, it is really easy to style headers differently from other table cells.

Best of all, though, the <th> is nested inside the <table>, meaning that it is explicitly a part of that table. Simply adding a <p> or <h3> above the <table> wouldn’t have the same semantic value.

Really all I’m wondering is… why don’t we have a <lh> to use when marking up ordered and unordered lists?