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!

Below are listed five free applications for the iPhone that are exceptionally useful for the creative type and that all designers should have.

Units
Sometimes the best design is simple design. This app is one that I use very frequently for all sorts of things, whether when in the workshops, doing research or just in general conversation.

At its most basic it is a conversion tool. Pick any sort of category; length, time, weight, speed, and convert one unit into every other format. Instantly millimetres can be changed into miles and hours into milliseconds. Exceptionally easy to use, simple and a necessity for designers.

Wired
Almost all products since the turn of the new millennia have had a microchip in them somewhere, and those that don’t probably will do soon. Because of this, it makes sense to keep an eye on the latest innovations in technology related products.
With reviews, videos and my personal favourite WIRED blogs, this is a brilliant way to keep on top of tech and inspire you on your next project. It is also a great read when you are sat on the bus in the morning rush hour.

TED
Speaking of inspiration, this is the ultimate source of design related inspiration you will find either on the net or on the iPhone.  TED frequently post talks by creative individuals on a whole range of topics; from inspiration to why they chose to do something in a particular fashion.  All of the videos are well worth a watch and work remarkably well on the iPhone, meaning you are never short of known designers to influence your work.

Bump
Social networking always comes across as sounding dirty. It sounds like something you do to get ahead rather than because you want to get to know people. It isn’t. Bump is a little application that helps you with the networking side of your life.
The way that it works is, like most of the best apps, remarkably simple. You meet someone with an iPhone, you make sure that they have bump too, then you ‘bump’ the phones together. This swaps your contact details, much like handing out a business card.

SketchBookX
There are lots of drawing apps out there, all with varying features and interactivity.  This though is the best one I have found thus far.  The little brother of the £1.79 SketchBook Mobile, this drawing app is like Photoshop for the iPhone.  You can zoom, you can use varying brush sizes and colours, you can even do layers.  Want to do an illustration on the fly? This is the app for you.