Hello toggles, goodbye sprites

No, not that kind of Sprite.

Before today, if you visited my site on a device with a high resolution screen, like the iPhone 4, you would of seen some blocky icons in the header made with an image sprite. Which was something that always really bugged me.

When Apple announced the retina display they introduced the -webkit-device-pixel-ratio media query to WebKit, the rendering engine used by Safari, Mobile Safari and Chrome (amongst others) to detect higher resolution displays. I could have used that media query in my stylesheet to serve a higher resolution sprite to visitors, or just served a higher resolution sprite to everyone.

Instead I opted to use an icon font, which has a number of advantages over rendered images:

  1. They’re vector based so can be scaled to any size without an increase in file size and look great on higher resolution screens.
  2. They have transparency that works properly in IE6.
  3. They can of course be styled with CSS properties like text-shadow, color or rotate.

There’s one small Gotcha with Firefox: it won’t load cross-domain font files. This confused me somewhat as it worked when I tested it locally, but not on the live site where I use a CDN. The solution was to encode the fonts as Base64 in the stylesheet, which has the added benefit of saving a http request as well.

Toggles are nicer than buttons

Ok, buttons are still cuter.

This is as true of duffle coats as it is web design, which is why the second feature I’ve added is a toggle on my portfolio to switch between a two and four column layout. I spent quite a while thinking what combination of jQuery UI modules it would need before I realised I could just do it with a CSS3 transition.

The toggle itself is just a <button> element styled with a background image and a couple of lines of jQuery that switch the class on the button and column containers when it’s clicked. I probably spent more time getting the toggle image looking just right with drop shadows and gradients in Photoshop than I did on the CSS and JavaScript.

To see how many people use the toggle I’ve attached a Google Analytics event that gets triggered every time it’s clicked. At the moment it’s just some simple code that tracks clicks, but in the future I might add some logic to see which layout is more popular. I’m not sure how I’d remove the bias towards the initial layout though, maybe with some sort of randomisation.

It’s always good to try new things out on your own site, so when a client asks for them you can point to live demo of the technology and you know how to implement it.