New Twitter Background Designing

I took the plunge and updated to the new Twitter, it’s going to be rolled out to every user eventually, so I figured I might as well get used to it as soon as possible. One of the main things I noticed about the new design was less screen space.


The width is now 1040px which means there is less ‘real estate’ (as some seem to like to call it) on either side of the main Twitter body, the sizes I’ll be referring to are based on a 15.6″ (probably the most common size) laptop screen resolution of 1366*768, although, desktop resolutions are usually an average of 1280*960/1024, so what’s the difference?

sideThe New Twitter bar that’s constantly across the top of the screen takes away 40 pixels from the top that, as much as it’s nice to have less space where it’s not usually needed, it limits what you can put up there.

Backgrounds will start underneath the top banner, something to think about when choosing the ‘height’ of your background image.

The ability to put a little something next to the old Twitter logo has now been drastically reduced due to the space between the top bar and the main body is now only 20 pixels, just enough to put some text or those sig bars that used to be so popular a few years ago.

As for how much you can fit on the side of the main body of the New Twitter, well…side

Screen Res Side Width BG Height
1280*1024 120px 900px
1366*768 150px 700px
1680*1050 310px 950px

The ‘BG Height’ is a suggestion on how ‘high’ you want any images on your background before they disappear off the bottom of the screen. There is no bottom of the screen with New Twitter since it now has seamless scrolling, that means that when you scroll to the end of the first ‘screen’ of tweets, more will appear automatically and continue to do so for about the last 48 hours.

The reason for the height suggestion being 100px less than screen resolution is for the previously mentioned 40px of the top bar, but also your taskbar at the bottom of the screen (and the majority of other users) which (especially in Vista and Windows 7) is 30px or 40px if you use large icons. One thing I haven’t mentioned is the width of the background image, that’s entirely up to you and whether you want to have one big image or tiled, for the sake of having a single image background, just reduce the width by 10px of the screen resolution you’re designing it for.

Remember that Twitter has a flexible width and so you may not want to put anything on the right of the page, the right section of the main Twitter body is about 50% transparent, so images with a light background tend to work pretty good. I actually use a transparent .png image so that I can change the colour of the background, but keep the images that are on the .png.

For an example of a background that’s suited to a laptop resolution (1366*768), see my Twitter and don’t be afraid to follow me while you’re there! :p