Sprites For 3rd Party Extensions
[UPDATE: Buffer has come out with an updated version (see the comments section below) that fixes the issue I listed here in what was probably the fastest response I’ve seen from a company ever. You can get the most up-to-date version of the browser extension here: https://bufferapp.com/extensions. Feel free to read the article anyway, but it’s not longer as relevant. ]
It’s not easy building an app, let alone one that has to integrate seamlessly with a 3rd party. Buffer is a powerful tool that can greatly enhance your experience on Twitter, Facebook, LinkedIn, Google+ and more. They have a browser add-on that allows you to easily schedule and share webpages to your various networks on the fly. You can have it sit on your browser’s add-on bar or toolbar like so:
It’s phenomenal! With a simple click you have the power of Buffer right there without having to leave Twitter’s interface. But for those of us with “Design OCD” (which I don’t have a huge case of, but it’s there), you’ll notice one issue in the screenshot above. Twitter, who like many popular apps has a tendency to change their design somewhat often, has different background colors for different places. The fine folk at Buffer either need to stay on top of these changes, which arguably is not the best use of their time, or, possibly, build their integration in a way that can look great regardless of background colors. I don’t envy their position, dealing with other services (of which you have no control) is not easy at all. So major kudos to Buffer for all they’ve done so far.
The Buffer icon that appears in the Twitter interface is a .png, which is a fairly common image file type that allows for transparency. In their CSS, this image is set up as a sprite. What does a tasty beverage have to do with images, you ask? Not that kind of Sprite, sir. A sprite, which you can read more about here, is an image that holds a few variations. Different sections of the image will appear depending on user interactions, such as hovering your mouse over a certain area. So, for example, you might have a single image that shows a button in a normal state and then in a hover state. With CSS you can have the regular part of the image appear as regular and the hover part of the image suddenly appear on hover. Fun stuff.
So, if you’re like me, you might prefer a Buffer icon that looks great with any background color. It’s not easy and there are pros and cons for doing it in different ways. This is what I came up with (based on their current sprite):
The top section is the icon in a regular state, in a color slightly darker than the regular Twitter icon color. The blue section is what would appear on hover. I actually don’t know what the third section is, but it’s part of their sprite so I left it in. It’s hard to confirm that my sprite would do any better because of Chrome security rules, plus the Buffer CSS needs to be update to have the blue section appear on hover, but I think it might help. Even if it doesn’t, I hope whoever reads this article gets a chance to learn more about the difficulty of developing with a 3rd party, the idea that priorities have to be set while developing, and a general idea of how sprites work.
P.S. Notice Buffer’s amazing support response in the screenshot above. And I hadn’t even tagged them. Good stuff!