Posted: March 9, 2012
Branding your company’s Twitter page can easily be done by simply adding a background image to your Twitter Account in the Settings. However, getting the dimensions right so it displays nicely can be tricky, especially with all the different screen sizes and mobile devices being used online today.
The image width and height and what will be viewable really depends on the size of the screen viewing the page. I prefer to use a really large image in the hope that nobody is viewing on a device large enough that they will see the end of the photo. Therefore, I recommend a photo size that is at least 1800 pixels wide and 1200 pixels high. The trick is getting the image size down to the allowable 800k maximum of Twitter but this pretty much guarantees that 99% of site visitors will not see the end of the photo.
The Twitter Image is “pegged” to the top left corner of the viewing area of your browser, which allows you to add in a logo and some other brand information to your graphic. Most browser sizes today are 1280px wide or larger, so with this in mind, the optimal width of the left column that will fit your logo is about 200 pixels wide.
Anyone viewing the site at less tan 1280px will not see your logo as it will slide over and be hidden by some of the Twitter content areas but this is unavoidable and one of the realities of designing on the web. At least the majority will see it and it will not ruin other visitor’s experiences at all.
The trick to a great Twitter background design is to integrate it with the limitations presented above. Using Photoshop techniques like fading to a solid background colour or tiling to repeat backgrounds can really improve the overall look of ones Twitter page. These techniques will also allow you to use smaller images for the background, which will load quicker than large photos.
Remember to also adapt to changes as Twitter will undoubtedly change their design, which might affect your backgrounds and require you to adjust your design as well.