Twitter Mods Great News for Those with Custom Backgrounds

22 Sep 2012

In case you haven’t heard yet… hey, I don’t know, maybe you were in a coma… Twitter modified a few design elements earlier this week. The purpose was primarily to improve the mobile experience, but the two changes that are the most exciting for those of us who think it’s important to brand all of our social networking pages, are the addition of a big new header banner, a la Facebook, as well as the option to center our backgrounds, which opens up all kinds of new design possibilities and makes using the right side practical. It also means that the design elements maintain their position relative to the main tweet area no matter how large the viewer’s monitor.

The screenshot above shows my Twitter page as it looks when viewed on a 1280 x 1024 pixel monitor. I design all custom backgrounds for this size monitor. It’s one of the most popular sizes and also the smallest size monitor it’s practical to design for.

The image above shows how much space is available on each side of the main tweet area when viewed on a 1024 x 768 monitor. Although there are people using small monitors with this resolution, (iPad 1 and iPad 2 do but the iPad 3 is 2048 x 1536), as you can see, it’s just not practical to attempt to design a background that works on such a small monitor.

The next three images show how my Twitter page looks on progressively larger monitors. It’s important to design the overall image with plenty of extra background image on the sides even though you’ll want to keep the important parts within the area that is visible on a 1280 pixel wide monitor. I recommend saving the overall background image at 1920 x 1200. At that size your background should look great on even the largest monitors… except for those folks using something larger than about 23 inches, and in most cases when someone uses a monitor larger than that they’ll keep their browser narrower than full screen.