Design for Social Media: Best Practices

Everyone wants a Facebook page, or a Twitter account for their business, but often they turn out ugly.

Why is this?

Usually it’s because you are trying to put your “standard” images into a different standard.  To do a really nice job, have your designer use the proper specifications for images, and the result will be a much cleaner look.

Here are a few basics:

Facebook Picture (Profile or Page)

The top-left image is 200 pixels wide.  The height can vary substantially.  Facebook will convert to a JPG and will shrink images wider than 200 pixels, so your page looks best if you save as a JPEG and have an image exactly 200 pixels wide (and 100 dpi, not 96 or 72). Since the image spans two colour fields, trying to have the background match either is pointless – in fact, it looks better if you use a third colour as the background, to add some contrast (the blue is #D8DFEA and the white is standard #FFFFFF).

(Another cool option is to put a 1 pixel border around your photo using colour #D8DFEA. This matches the menu border colour – have a look at the Avid Reader page for an example.)

Facebook Thumbnail

You cannot upload a separate thumbnail image for Facebook, you must zoom into a 110×200 pixel area of your picture that looks good.  Think about this when choosing your picture image.

Twitter Picture

The “Picture” icon is a variation of 73×73.  Since people can view a larger image by clicking on your face (or logo), you may want to do a larger image – but keep the dimensions a variation of 73×73 (i.e. 146×146 or 219×219).  Twitter accepts and does not convert a PNG, so use a PNG.

Twitter Background

Because the Twitter website is not a fixed position, the background image option on Twitter is a design nightmare.  Avoid trying to make things line up perfectly on the “right” side of your profile – instead, put anything important on the left side, or go with a “subtle” tiled image. Important: make sure your background image’s background colour is the exact match of an HTML colour, and define the rest of the background with that HTML colour, otherwise your image will look like it’s in the invisible box.

YouTube Account Image

Your YouTube account image is 88×88 pixels, and scales throughout the site at 60×60 in various places.  Make sure your image looks good at both, and upload the 88×88 pixel image in JPEG format (other formats are just converted to JPEG).

YouTube Channel Background

YouTube backgrounds that are not tiled are centered (and, thus, look ridiculous behind your channel info).  If you do a background at all (a solid colour is good), make it something subtle that you can tile nicely.  (Note: YouTube is rolling out new channel designs, so stay tuned on that.)

LinkedIn

An 80×80 pixel JPEG works best for the profile image, and a 100×35 pixel JPEG for your company page image. (Other image formats are just converted to JPEG automatically, even if they are the correct dimensions.)

Flickr

A 48×48 pixel JPEG works best for your buddy icon, and your group icons.

MySpace

Ugh, where do I start. Unless you are a band, think very seriously about whether you need a profile on MySpace.