In a recent blog post, I offered my new Twitter background template as a free download so that you can easily optimise your profile's design to be viewed as intended on whichever screen resolution a desktop viewer is using. That got me wondering... with teams dedicated to design and social media management, how do the Twitter background designs of some of the world's biggest companies fare?

Across a random sample, I screen grabbed the 1920 x 1200 (the biggest screen resolution at which people are likely to view a Twitter profile) and 1366 x 768 (currently the most common screen resolution, according to global statistics). The results were pretty surprising...

The Bad

Where the companies I came across had attempted specific Twitter branding on both sides of the news feed, i.e. not just a single-image background), lots of the designs had not been optimised for viewers on different resolutions. Here are a few examples:

Here's the Twitter page for Gillette. At 1920 x 1200 pixels, the design looks great but for the big black bar on the right-hand side which reveals that the navy gradient hasn't been made big enough to accommodate for large displays. And at 1366 x 768 pixels, the "Get the Look Women Want" branding is hidden behind the feed, while the image on the right-hand side of the feed completely disappears!

Onto SmartWater now. As with Gillette, its Twitter profile suffers from a big empty space on the right-hand side at high resolutions. At the most common resolution, however, a "SmartWater" brand logo appears... well, most of it.

Last up, here's fast food company, Wendy's, who get things half-right. At high resolution, its left-hand side Twitter branding is fine, but a second large image is obscured by the news feed. At 1366 x 768 pixels, the design looks as it was probably intended to.

The Good

It was surprisingly difficult to find good examples of optimised Twitter backgrounds from the hour or so I spent looking at the feeds of big brands, so props go to Gap and Sprite (kinda) for these examples!

Gap's Twitter background works at both the biggest resolution, and at the most commonly viewed resolution. While one person is chopped off either side in the reduced view, the design still looks great.

Finally, here's Sprite. Okay , the logo is chopped off the side in both examples, and the lemon-sipping-a-drink graphic is missing in the high resolution review, but both designs still mostly work!

Conclusion

From my terribly unscientific experiment, it seems that a significant proportion of big brands, while keen on branding their Twitter accounts, have not done so in a way that takes into account all of the different resolutions that people will be viewing their pages at on desktop computers, resulting in branding that is unusually slack for such big commercial voices.

If you want to stay one step ahead of Gillette, SmartWater, Wendy's, and many others with an optimised Twitter background design, have a read of my Twitter background Template blog post and grab a link to download the template there too.

ABOUT THE AUTHOR

Buy 500 Social Media Marketing Tips (Kindle or Paperback)

Amazon US: http://www.amazon.com/dp/B007L50HE6
Amazon UK: http://www.amazon.co.uk/dp/B007L50HE6

Follow Me:
http://www.fa cebook.com/500socialmediatips/
https://pinterest.com/500socialmedia/
http://www.twitter.com/500socialmedia
http://www.youtube.com/5 00socialmediatips

STOP! THE TWITTER LAYOUT HAS CHANGED AND THERE IS AN UPDATED BACKGROUND TEMPLATE AS OF APRIL 2014. CLICK HERE:

http://andrewmacarthy.com/andrew-macarthy-social-media/new-twitter-background-template-2014-psd-1920-x-1200-photoshop-download

free-twitter-template-2013-2014-psd-photoshop-1920-1200.jpg

NEW 2014 TWITTER BACKGROUND TEMPLATE NOW AVAILABLE: CLICK HERE.

Free Twitter Background Template Introduction

As with so many a hunt online for free social media templates, I couldn't find one for a Twitter background that provided everything I needed - specifically, a template that took into account how I might go about designing my Twitter background to cater for the many different resolutions at which it would be viewed on desktop screens (only the Twitter header, not the background can be seen on mobile devices). So, after lots of screen capturing, measuring, and testing, I designed my own and I'm giving it away for you to use too.

I know this post is long and you're probably eager to just download the template and get started, but I urge you to have a quick read to understand how the template works and how it will help you design as good a background as possible.

The Trouble With Twitter Background Branding

Twitter profile backgrounds are a a prime piece of real estate for brands, but creating one that is optimised to be seen as intended by as many users of the site as possible can be tricky due to the wide variety of screen resolutions that the site is browsed at on desktops. Problems include:

Design hidden behind news feed
Design looks different from one screen to another (brand message hidden)
Design not optimised for largest resolutions, leaving blank areas (see image above).

If you've had any of these problems, my free Twitter background template will help. But, before we get to it, let's take a look at the relationship between Twitter, screen resolutions, and Twitter background designs so that you can use the template as effectively as possible.

Explained: The Anatomy of A Twitter Page

No matter what resolution people view Twitter on their desktop monitor, the news feed - which is always 865 pixels wide - will always sit in the centre of the page. That leaves an equal amount of space either side of it for visible background design (the rest being hidden behind the news feed itself). How much of the design is visible by a user, then, depends on the resolution of their display.

Therefore, in designing your Twitter background, you should aim to cater to as many people using as many different resolutions as possible, especially if you want branding on either side of the feed that isn't just a plain or patterned background (promotions, slogans, product images, etc).

Global Stats For Screen Resolutions

According to the most recent global statistics, the most popular screen resolution for viewing the web is 1366 x 768 pixels (around 24% of the total) followed by 1024 x 768 (around 16%). From these stats (and those for less common sizes), we can deduce that for the vast majority of people viewing your Twitter profile will be able to view a background design optimised for a 1366 x 768 pixel resolution. Anything designed for bigger resolutions will be wasted on the majority of users.

Using the Template to Cater for the Majority

Now, let's look at the template I have designed. For display resolutions of 1024 x 768 pixels, 1280 x 800 pixels, and 1366 x 768 pixels (represented by the green, yellow and orange boxes in the cropped image of the template above), the amount of your background design that will be visible on either side of the news feed is 66 pixels, 194 pixels, and 238 pixels respectively.

Optimising Your Twitter Background Design

The biggest resolution people are likely to view Twitter at is 1920 x 1200 pixels, so the template is offered at this size and I urge you to design with people viewing at this resolution in mind, but optimised for the majority who only see up to 1366 x 768 pixels, i.e. when using the template, put your most important branding elements - logo, products, offers, URLs within the orange box. View the gallery above for examples of how the Twitter background will appear for users at different resolutions.

Of course, while 1366 x 758 is the most popular screen resolution for now, this is likely to change in future and so you may want to change your Twitter template with it.

How to Use the Twitter Background Template

When you open up the Twitter Background template in Photoshop or GIMP, it will look like the image above. Work above and/or hide the layers representing the Twitter news feed and screen resolutions, then remove them all before saving your design as a PNG before uploading it to Twitter. Remember to work using the whole space, but optimize your design for 1366 x 758 pixel resolutions.

Note: The Twitter navigation bar does not appear in the template. This sits above your background when it is uploaded, not on top of it. And while every effort has been taken to make this template as accurate as possible, prepare yourself for minor tweaking of your background design elements if necessary. Test and tweak is the name of the game!

One Last Thing - Centre Your Background!

Twitter backgrounds are left-aligned by default, but this template is designed for optimal viewing on all resolutions when the background is centred, so make sure to switch to this option when you upload, as shown above.

Download the Twitter Background Template

This Twitter template (and several others for all the biggest social networks - expertly measured, simple to use, and up-to-date) is available instantly as a downloadable zip file via the purchase link above. For more information on all my social media templates, click here.

Note: Payment is fast and secure via PayPal, but you do not need a PayPal account to buy and download. it!

ABOUT THE AUTHOR
Buy 500 Social Media Marketing Tips (Kindle or Paperback)