As someone who thoroughly enjoys the whole ’social media’ thing; I often found myself refreshing or updating my twitter page and looking for inspiration in the work of others. When it came to my latest iteration though, I decided to look a bit more carefully at what I really wanted to say and how I could do that. There were a few… problems.
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:
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!
Tags: clever, download, free, graphics, layout, photoshop, scalable, template, twitter
That is pretty clever. I’m going to try experimenting with it now.
I noticed your zip file contains a .PSD file which I guess is for photoshop. It should work if I convert to another format, right?