Problem number one; I am not a graphic designer.

I didn’t want anything fancy with swirls of light and clever patterns splattered all over it. I didn’t want a complicated and distracting background.  All I wanted was something simple that tied in with everything else and got the small bits of info across without being too nightclub-poster-ish.

This then lead to the second problem; how do you make sure everything is visible?

The advantage of complicated graphics and one flowing extended background is that it looks correct no matter what size window you open it up in; all of the bits tend to flow into each other.  If you want something simple though, you run the risk of discriminating against people with different screen sizes. This is especially important if you are putting text on your background. It is a personal bugbear when you open up a twitter page and part of the background with something you want to see is hidden by the main feed.

Above: a twitter page that crops the text and images when displayed on a 1024×768 screen.

I wanted it to look right no matter what size screen it was opened up on.  Yes, there would always be compromises when people have different size browser windows, but if you maximise the page on any screen, I wanted the page to look right, whether on the iPad or on a wide-screen desktop.

Problem three; making it fit most screens.

The solution that I came up with is this;

It may look simple at first glance, but it is actually more than meets the eye.  Whether you have a 1024×768, a 1280×1024, a 1680×1050 or a 1920×1200 screen, this layout should fit all of them and still look correct.

Above: My twitter page on a 1024×768 screen.

The main twitter bar moves and covers over certain sections whilst revealing others.  No cutting paragraphs or images in half.

This was all done by creating ’safe areas’ that will not be cropped, and determining which sections will be visible for different screen resolutions.

On the smallest screen (the same as the iPad at 1024×768), the background has a very thin visible section on the left and right hand sides…

However, the next (and most common) screen size of 1280×1024 adds another section…

When you increase to the next screen size of 1680×1050 you notice that the right hand yellow bar is covered by the twitter stream, with a replacement section appearing on the left in blue…

Finally, a few little bits become visible on a screen of 1920×1200…

In order for the transition between these different ’sections’ to be seamless, the background image works best with a white section cut out of it.

When the twitter stream and side bar are in white, it appears that they are just slightly wider than normal without looking too cluttered, whilst never leaving the white section.

Now for the good bit; I thought I would release the template so that all of you aspiring tweeters out there could do the same (and twitter layouts are surprisingly hard to come by).

Download it here:

twitter_template_hrhv

Please feel free to use the template to create your own versions; and tweet me a message or leave a comment to let me know how they come out! Any feedback is always welcome.  Twitter is about being social after all…

Full disclosure here; the original idea for this came after reading and playing with a tutorial by Chris Spooner – worth a look at too if you have time!

Twitter has plans on how it is going to make some money <

A fantastic array of Twitter ‘Fail Whale’ inspired art <

A product that does almost exactly what my Greener Gadget competition entry did is <

How bad energy consumption is in manufacture <

The Atkins Project in rapid manufacture <

And finally, as not all of my life revolves around design (although granted, most of it does), here is the link to the Just Giving page that myself and a few friends have.  We have entered into the Oxfam Trailwalker event, and I shall spare you all the promotion, just read the page <