Creating a twitter page that fits

Starting this latteperday blog today was great but we also wanted to add a twitter account and needed to create a cool twitter background.

There isn’t an awful lot of info out there (or a lot to sort through) so hopefully this will be helpful to those who are looking to add their own branded background to their twitter account and keep that brand consistency.

1.  Create a background to 1800 x 1600 pixels

1600 x 1200 may be enough or even 1680 x 1050 (20″ monitor usually) but we wanted to ensure that there isn’t too much white space on those bigger monitors.  Obviously not many people would have there browser open across a 24″ iMac, but you never know!

2.  Design the left hand side info to fit the smallest screen

A common trend is to end your brand message, contact details etc to the left hand side of the background.  If so, bear in mind that if the space between the left edge and your text / images are too wide then users on smaller screens won’t be able to see your artwork – there twitter information will be sitting right on top of it.

1024x768 screen resolution

The above screenshot shows you what happens when you don’t pay attention to screen size and just drop graphics onto a background to suit your own display / monitor size.

3.  Download Firefox and the Web Developer Plugin

A great way to test websites is with the Firefox Web Developer Plugin.  This is highly recommended for all sorts of web design but particularly in testing a page in different screen resolutions.

1280 x 1024.. almost there

4. Don’t worry about everyone

You can’t possibly format your twitter background to be suitable for absolutely everyone if you’re looking to add quite a bit of info and want to cover both large and small screens.

Instead, look at the lowest common denominator.

According to research, 76% of browser resolutions are higher than 1024 x 768 so only worry about 1280 x 1024 would be our advice.  People on 1024 x 768 and lower can still see your tweets, enjoy the colours of your background and will just need to readjust their browser size and scroll if you have some branding under your tweets that they want to see.  You’ll be placing info in the right hand column too; and they probably have this problem with most twitter homepages so it’s not a big deal.

1280x1024 readjusted design

We went for 1280×1024 in the end but had to reduce our graphics to fit onto the page.

5.  Don’t forget the colours

Don’t forget that you can also customise the colours of your twitter font, links and so on under the same section (settings > design).  This allows for complete branding.  Nice.

The Real Thing

Feel free to download our attempt at our twitter homepage here as a .jpg file (1800×1200) and hope it helps you create a cool background for your business.

Drop us some comments below or a mail if you have anything to add or any more tips for twitter backgrounds.

Check out our twitter page here:  http://www.twitter.com/latteperday

Good luck creating your own masterpiece!