As a web developer, there are some things that consume a disproportional amount of my time (the whole 80/20 rule: 80% of the work takes 20% of the time, and the remaining 20% of the work takes 80% of the time). One of those things is creating and implementing sprites. Now, I could just use a super-cool tool like Compass to automagically generate and implement my sprites for me, but as I pointed out in a series of articles for the Treehouse Blog, there are some issues that make them kinda difficult to work with, especially when you’re dealing with HiDPI (let’s just call it Retina) displays.
So I tend to go old-school when working with sprites, meticulously crafting each sprite file in a way that’s going to play nice with how the elements float, “hover” states, etc. Then I do it again at @2x the original resolution, to make those same sprites look nice and crisp on those increasingly popular Retina displays. Okay, technically, I do the Retina sprites first, then move to the standard def version, because scaling down works better than scaling up. Whatever.
But as I fight again and again with my obsessive-compulsive tendencies for getting sprites perfect, there are some very small things I’ve noticed that designers could be doing to make my life just a touch easier:
Give Me the High Resolution Goods
If you give me nothing else, give me the high-resolution version of the graphics with which I need to make the sprites. As just mentioned, it works a whole lot better to scale things down in Photoshop than to scale them up. I can take any image, path, smart object, etc. down to 50% and have it look good than I can taking the same thing up to 200%. Okay, paths scale up just fine. But not everything I get is a path, and not every smart object I get is from a high resolution source (or at least I don’t always have access to that). Just give me the big stuff, and let me worry about fitting it into the page.
Even Is Better than Odd
Don’t ask me why this is an issue, because I’m not 100% sure myself. All I know is it’s a lot easier to work with sprites where the individual images are an even number of pixels in each dimension rather than odd. It lets me set an exact middle point, which is often useful in the positioning process. This goes for the high resolution version as well as the standard def. So if your high resolution icon is 60 pixels wide, that’s great because it’s an even number, and divided by two is still an even number. If your high resolution icon is 58 pixels wide, that’s not so great because even though the high resolution version is an even number, divided by two comes out to 29 pixels wide, an oddball. Note to designers: visitors to the site won’t really care (or notice) if an icon is 29 pixels wide versus 30 pixels wide. And if the high resolution icon is 59 pixels, well I’m just cursing out you and all your ancestors. No, not really. But really.
Opt for the even, please!
Don’t Forget the “Hover” State
If you want it to change colors (and that’s usually the kind of “hover” state we’re talking about), please be sure to include an example of it in the comp. Mostly you do, this is just a friendly reminder.
With just a little attentiveness to these details, web designers and front-end developers may yet live in peaceful harmony.