Twitter Background Design Specifications

This is a rough guide to Twitter backgrounds. I’ll keep adding to it as things occur to me. :)

Size

  • Background images can either tile or not. Tiled images will look best if they’re seamless.
  • Since you have no idea what resolution someone will be browsing with, it’s a good idea to make non-tiling backgrounds fade nicely into a solid background color on the right side. The other acceptable option is to make them very wide (2000 pixels or higher), but that’s definitely a fall-back option.
  • Non-tiling images should either fade nicely to a solid color on the bottom edge or be taller than 1700 pixels.
  • Twitter says: “Images must be smaller than 800k. GIF, JPG, PNG.”

Alignment

  • All background images (tiled or otherwise) are positioned starting from the top left of the screen. As far as I can tell, there’s no way to center the background.
  • Backgrounds remain fixed when scrolling.
  • The profile content is 764 pixels wide. On an average-sized 1024×768 display, that gives you roughly 100 pixels on the left side to work with. However, because the background won’t be centered, you could have significantly more space on the left. You also have no idea where the right margin will start.
  • You can count on the vertical position of some of the permanent elements (listed in the next section).

Permanent elements

Twitter includes some fixed elements that you need to keep in mind as you design:

  • The Twitter logo (starts 15 pixels from the top and is 41 pixels tall); it’s always the same color
  • The top nav bar (starts 24 pixels from the top and is 30 pixels tall); the background is always white
  • The main content (arrow starts 71 pixels from the top; main box starts 82 pixels from the top and height varies); the background is always white
  • The sidebar (starts 82 pixels from the top and height varies)
  • The footer nav bar (can’t predict starting point)
Twitter parts, labeled

Twitter parts, labeled (click to enlarge)

Users can control a few color options for these elements:

  • Background
  • Text
  • Links
  • Sidebar
  • Sidebar Border

If you have specific recommendations for these colors (and you most likely will), you can simply list them with the appropriate element type.

Content

What kind of content you’ll put in the background will vary significantly based on who the background is for. You won’t, of course, put any personal info in a background intended for wide-spread distribution. However, you still might include a snippet of poetry or generic photos.

On custom backgrounds for an individual or company, I don’t recommend including anything that looks like a link (a URL or any underlined text). The reason is simple: visitors try to click it, and are confused when it doesn’t do anything.

My personal preference is to use the background to communicate a mood or personality, rather than conveying a lot of specific information. Obviously if the client wants specific information, we’ll include it (after explaining how it might confuse visitors), but in an ideal world, I prefer more abstract information.

Any content (particularly images/illustrations) you include needs to be appropriately licensed:

  • For custom backgrounds for an individual or company, you need rights to use the content. At a site like iStockphoto, that means buying the image with their regular license.
  • For backgrounds to be widely distributed, you need rights to use and distribute the content. For iStockphoto, that means buying the Extended License, which is expensive enough that it’s probably not worth doing for distributed backgrounds. What I usually do instead is find a good image on stock.xchng and get permission from the photographer to use it in a freely distributed background. They’re often willing and it’s a good, free option.

If I’m paying you for your background, I’ll need proof of the relevant license (call it an ounce of legal prevention). In any case, it’s always a good idea to keep that proof around for yourself.

Leave a Comment