If you’re serious about Twitter you’ve probably changed your background and instead of using one of the standard backgrounds, you’re using a photograph or some artwork or maybe even a custom background promoting your business. Good for you. One question. Do you know what your background looks like on different size monitors? What’s that you’re saying, you thought it looked the same to everyone? *Insert game show buzzer sound here.*
The problem with Twitter backgrounds is that they aren’t centered even though the main tweet area is. The backgrounds remain anchored to the left side of the screen, unlike most blog backgrounds that are set to remain centered no matter what size they are viewed at. Depending on the viewer’s monitor resolution more or less of the background can be visible on either side and most importantly, anything that’s on the right side might show and it might not. To illustrate this point I’ve created some sample screen shots of what some backgrounds look like at two common monitor resolutions and how you can compensate for what happens on the right side. The images on the left are as they appear at a resolution of 1280 x 1024 and on the right, the way they look at 1600 x 1200.
I’d like to point out that there is no perfect solution and even if your background looks great on any monitor larger than 1280 pixels wide, the left side may be partially covered on small laptops and notebooks, but to paraphrase Abraham Lincoln, you just can’t please some people.
The image above illustrates a fairly common practice, which is to run a logo vertically up the right side. Looks great at 1280 but the image would be covered by the main tweet area on a larger monitor. The solution? Repeat the image so that if the first one is covered, the second one becomes visible. This is not a perfect solution because of intermediate size resolutions, like 1440, in which case you’d probably see some of both image, however, it’s an effective solution for most situations.
Some people like to have a photo collage on the right side. Again, if you line all your photos up so they look really nice on a 1280 wide monitor they’re probably going to be covered up on larger monitors. The solution is to include enough photos so that some of them show at any size.
The two examples above illustrate another popular technique of showing a realistic arrangement of items; strewn on a desk or pinned to a corkboard, for example. The important thing to consider when doing this is that the overall image is large enough and there are enough objects so that at least some of them are visible on any size monitor.
I used Chris Brogan’s background to highlight another thing I can tell a lot of you didn’t think about when you created your background or uploaded a photo. Many of you forget that not everyone has a big 20″ desktop monitor. Many have smaller monitors or view your Twitter profile on a laptop with a widescreen monitor which may have a maximum height of 800 pixels. By the time they add a few browser toobars they may only see 600 pixels or less of your image. For that reason I try to avoid putting anything important any lower than about 550 pixels down from the top of the graphic.
There are certainly many other factors to consider when you’re creating a cool custom Twitter background or picking a photo to use as your background but these are two of the most common mistakes I see. Now go change the photo you put on your background that shows you on the left and your girlfriend on the right so your friends know you’re still dating her.
Shameless plug: If you would like a custom Twitter background and just don’t have the skill to do it yourself and don’t have a graphic designer on staff, please check out Social Identities. We also customize Facebook, YouTube, Tumblr and most social networks and blogs.