There are half a dozen popular solutions to this, but I wasn’t completely happy with any of them on their own, so I’m experimenting with using a combination of  Ethan Marcotte’s max-width technique and a modified version of Keith Clark’s cookie technique. The cookie technique can be used to determine the size of a user’s screen before outputting the filename, so you can serve a low-res version to mobile devices and a high-res version to desktops. You can add the max-width technique on top of that to handle any situations where the image still doesn’t fit right.

My modification to Keith’s technique is that instead of setting the image’s src tag to call a PHP file which outputs the respective image’s contents, I just have the function determine the path of the appropriate image. That avoids the faux URL and any caching issues. The image quality will still degrade when it has to scale, but serving multiple images minimizes the number of times that occurs. The major downside is that the it only takes effect after the first page load. But, given the lack of a proper solution, I think that’s an acceptable compromise.

Update: I’m now also considering adding a third layer to help minimize the cases where the first load would include the large images. The browser doesn’t send the screen width with the HTTP request, but it does send a user agent string. The code could parse out the agent and default to the small images for known mobile browsers. On it’s own user agent detection is insufficient, but it may be useful as one of many layers. There could be issues with unreliable (or intentionally false) agent disclosures, and also with different devices using the same agent even though they have different screen capabilities, so it’ll have to be tested out thoroughly, but I think it’s worth a shot.

Another link to Smashing Magazine was a reference of tools and techniques, and a third was a collection of sites using media queries to adapt the layout to various devices. I’m hoping that device emulators will become more readily available and reliable so that testing won’t be such a frustrating ordeal. Frameworks like 320 and Up can help get off to a good start.

They list several alternatives, but I like SitePoint’s the best, so I’m going to start using it in the future instead of W3Schools.

Of course, as Louis Lazaris points out, it’s even better if you just massage your regular styles a bit to make them work in all the modern browsers — which, in my experience, usually isn’t too hateful.

• http://www.mattvarone.com/web-design/message-box-with-css/
• http://www.ajaxlines.com/ajax/stuff/article/css_message_box_collection.php

Most browsers only support integer pixel values for letter-spacing. This is a problem because, when it comes to letter-spacing, there’s a big difference between 0 and 1px. Ems and other relative units are converted to pixels before rendering, so they won’t work either. It looks like Firefox is the only browser that currently supports sub-pixel rendering.

So, you can use something like .5px for Firefox, but other browsers will round to an integer.

@font-face
{
  font-family: 'Angelina';
  src: url('lib/fonts/angelina.eot');
  src: local('Angelina'),
  url('lib/fonts/angelina.ttf') format('truetype');
}

You can get compress and convert a font to TTF and EOT versions with Font Squirrel’s generator.

Because they’re being distributed, though, they need to be licensed for that. A couple good places to get freely distributable fonts are The League of Movable Type, Font Squirrel and dafont.com.

Paolo Lombardi explains this well in his article on stacking context, and includes this helpful diagram: