Banyan Branch

Post Written by Jonathan Mumm, Banyan Branch’s Network & Technology Administrator.

Updated 1/06/2012 for the newest Twitter redesign!
Twitter named this latest redesign the “Let’s Fly” update.

Twitter’s newest redesign gives back screen real-estate to the background image, allowing branding opportunities to once again be a part of a Twitter profile.

Why are background images so important?

It’s all about the branding opportunities. Whether you’re an individual or a business, Twitter backgrounds let you communicate your personality, as well as information such as URLs to other properties.

Mobile users and users of Twitter clients will unfortunately not see these backgrounds, but many people still use Twitter.com, so it’s important to make sure you have a good background!

Steps for making a NEW “Let’s Fly” Update Twitter.com Background Image:

1) Twitter Backgrounds are still left-aligned. Keep important background content on the left of the screen.  Twitter.com content is still centered on the page.

This means that your background is fixed to the left of the browser, and when a user makes their browser window wider they may not see content on the right of the page.

2) Know Your Space Limitations: To reach most users, use between 66px – 194px wide for the left side of your Twitter Profile Background.

Twitter.com’s content has a fixed width of: 865px, leaving the rest for backgrounds.
This content width is lower than Twitter.com’s previous width of 1040px.  The pixels left over are ones we can use for our backgrounds, which I’ve listed below for easy access.

Here are how many pixels wide you can use on the left of the page to reach X% of Twitter.com visitors:

• 66px for 99% of visitors (1024px wide resolutions)
• 194px for 82% of visitors (1280px wide resolutions)  This is the size of the green box below.
• 238px for 56.1% of visitors (1366px wide resolutions)
• Up to 520px for 42.3% of visitors with resolutions wider than 1366px.

Note 1: These sizes take into account pixel loss taken up on a screen by a viewer’s browser. These values will vary slightly from browser to browser.
Note 2: Percentages of visitors above are using average screen resolution sizes via data from W3Schools, as of Jan. 2011. 

3) Make your background consistent with your branding.

Some of the best ways to keep your branding consistent is to use your company’s color theme and logos in your background and profile picture.

• Text on your background will distract from the text on your profile. Keep background text to a minimum.
• Keep it SIMPLE! Clear branding with your logo and colors will let visitors quickly associate your Twitter account with your other properties.
• Instead of including a lot of URLs in the background, Tweet about your other web properties!
  This ensures that all your Twitter users have a chance of seeing it, instead of just the users visiting your Full Profile Page.

4) Match your Twitter.com profile background color to your image’s color.

When your background color and image color are the same, you can have a shorter background image that blends right into the background color. It helps to start your background image with one color that matches the color you want in your Twitter design settings.

5) Use .PNG to save your Background Image

The JPG image format is a lossy format, meaning you sacrifice picture quality to save file size. PNG files will be slightly larger, but will keep your details in-tact; which is VERY important if you will be using small text in your background.

It’s great to see the branding opportunities once again allowed by Twitter’s “home profile” redesign.

Do you have any additional tips or tricks for creating a “Let’s Fly” updated Twitter background?  Leave your feedback in our comments!