Twitter sidebars are a useful way of providing info about yourself to your users and many people have come up with some inventive designs. The problem which I’ve come across with most designs is that at a resolution of 1024 x 768 the sidebar can get cut in half and the extra information you’re trying to provide gets cut in half too:
If you have a side bar on your twitter background I recommend getting the Firefox web developers tool bar and checking to see what your profile looks like by using the resize function:
If your side bar is cut in half at 1024 x 768 then there’s no point in displaying it as it doesn’t provide any function. Best hide it and have it appear at any resolution above 1280 x 960 in a Peek-A-Boo fashion.
To make a Peek-a-Boo sidebar you need to utilise the space between left-hand edge of the twitter container at 1024 x 768 and at 1280 x 960:
For my background I took it a step further to support 1440 x 960 and made a 3 stage design which hides a kind of easter egg. When people move from a low resolution to high resolution and return to my twitter page it should put a smile on their face (unless they’ve read this and I’ve given it away dammit!). The images below shows what happens as the resolution progressively gets bigger:
So there you have it. If you carefully position your details, check your background at different resolutions and use my Peek-A-Boo method your profile page should look great to a larger amount of users.
If you’re itching to have a go copy the picture below and use it as a guide for your own background widths:
Here’s a couple of things to remember:
* Check your twitter public profile page rather than your twitter home page – the sizes are slightly different.
* 800 x 600 and resolutions below won’t have space for any sidebars.
* The Peek-A-Boo method doesn’t cater for people covering up the sidebar by manually resizing their browser but I don’t think anything can.
If you enjoyed this article please follow me on twitter (more design, less crap) and add D4DD to your rss reader! Thanks!
Tags: Great Design, Photoshop, Resolutions, Twitter