Use sprites to keep your social media strategy's options open - by shoogle designs

Written on August 6, 2012 by Flo Preynat

Today, we’re gonna talk productivity, …and common sense really, while touching the very popular subject of social media strategy and the way you decide to display your social network entries.

Right, so you’ve got yourself a beautiful social media icons set forked somewhere on the internet. Somebody has gone through the trouble of a large number of sweating hours, days or months fine-tuning the set for you to adopt/slice/install it on your website in 12 minutes flat.

For this example, I’m going to use Umar’s Social Icons PSD set I stumbled upon on Dribbble.

So this is probably what I would have done a while ago: Open the social media icon psd file, save the icons I’m interested in as png files, ftp them into my remote image folder and start using them on my website’s Contact page.

No brainer really. Unless…

Unless I wanna be a tad more clever with this, keep my options open and save myself some valuable time in the future. Indeed, today, you might only be using Twitter, Facebook (or not!) and Dribbble, but in the future, chances are you’ll be using much more services already available, and chances are the icons of those services and platforms are already on your psd. Therefore, why not keeping them all on one file (and hence keep them on the back burner for potential future use) and take full advantage of the CSS sprite functionality.

There are obvious and good reasons to use sprites in this case:

you’re keeping your options open as your social media strategy is likely to change
you keep all your icons on ONE file and won’t think you’re a fucking idiot for only keeping a copy of the icons you were interested in at the time now you need some more icons
you make sure you use image sprites to group multiple images into a single encoded file and limit the number of HTTP requests into a single one to speed up the page (and in this era of responsive web design and mobile first design(*), this could be of great added value)

(*) Side note, I strongly encourage you to read the very enlightening ‘MOBILE FIRST’ of Luke Wroblewski (@lukew)

Back to our sprite business. Let’s open our beautiful psd file, remove whatever background color the designer might have added behind the icons and guarantee you’ll be able to use your own backgrounds…

null

…give it a trim to drop the useless white space, and save the lot as a png file.

null

Now, you could do the maths or measure the icons’ dimensions and positions on Photoshop, but some smart people having invented online services doing it for you, you may as well use them. Go to Spritecow, open your image and click on the first icon you need to use on your websites.

null

Spritecow will give you a few lines of CSS you’ll be able to add to your own stylesheet.

null

Repeat the following steps for all desired icons. Be smart and use a separate class (like .social) for the css lines shared by all icons. Finally, set a class for each social media with the SAME background image and the correct background positions:

CSS

.social {
        display: inline-block;
        width: 46px; 
        height: 45px;
}
.twitter {
        background: url('Simple-Social-Icons.png') no-repeat -180px 0;
}
.dribbble {
        background: url('Simple-Social-Icons.png') no-repeat 0 0;
}
.rss {
        background: url('Simple-Social-Icons.png') no-repeat -240px 0;
}

HTML

Result on screen

LETS CONNECT

We’re now one year down the line and you have decided to share your work on Forrst? Easy peasy lemon sqeezy. Reopen the sprite with SpriteCow, define the forrst icon location on the png and add two simple lines of codes in your HTML/CSS.

.forrst {
        background: url('Simple-Social-Icons.png') no-repeat -60px 0;
}

Result on screen

LETS CONNECT

Simple, wicked and time saving.

Download files here.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Follow @shoogledesigns