Whether you’re an occasional tweeter or a borderline tweetaholic, you’ve probably seen or at least heard about the #newtwitter. Twitter has recently made significant changes to the site’s user interface. This much needed improvement has had overall positive feedback, but there are some setbacks.  One of the most prominent issues being the background images are barely visible on most computer screens.

So what? How many people even use twitter.com anyway? Most people use programs like Tweet Deck, mobile twitter or Hoot Suite, right? This is true, but having a custom background image is an easy way to brand yourself or your business. Not only does it look more professional, but it shows customers you pay attention to detail.

So how does one design for the new twitter? Unfortunately, most custom backgrounds that looked great on the old twitter are now obsolete. The user interface width has increased over 275 pixels. This means many custom images and content is no longer visible on the left side. Here is a general guide on how much space you have to work with, and how many users will see your background at these sizes:

(100%) 41px on each side
(72.7%) 108px on each side (1280x800px screen resolution)
(28.8%) 200px on each side (1440x900px screen resolution)
(4.6%) 312px on each side (1920×1080 screen resolution)

Here are a few general guidelines for designing new backgrounds for the new twitter:

1. Keep content between 41 and 108 pixels on the left side. This may require you to cut images and content, but it can be done. It doesn’t matter how cool a design is if no one can see it, right?

2. Keep it simple. This is closely tied to tip #1. You don’t need a full bio or a dozen URLs in your design. Put them in your bio, or better yet tweet them!

3. Design for all screen sizes. Keep your content between 41-108 pixels, but create an image that will still fit larger screens. I usually design a background around 2000 x 1600 pixels. Don’t forget to set the background color to match your custom image as well.

4. Test your image. Try viewing your background on different monitors to make sure the important content is visible on all screens.

We put these guidelines to make a new background for Chief Outreach Officer Scott Meyer. As you can see, it may take a little more thought to create new twitter backgrounds, but it can be done.

Old Twitter

New Twitter