What Everybody Ought to Know About Twitter Backgrounds

What is your Twitter background? A random photograph strangely filling only a quarter of the screen? Or perhaps a slightly pixelated company logo in the top left hand corner? Or maybe you’re a minimalist… just a plain colour background for you?

We have been doing something fun with our Twitter Backgrounds, read on to find out more.

We have developed a FREE Twitter background template available to download. This will help you design a background the works well with the current twitter design:

FREE Twitter background template

This work is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License. All we ask is if you use this image on your website or blog that you link back to this blog post.

This template will help you to design your background with Twitters existing layout in mind. The template helps to ensure that all the important information you need to include is visible even at small browser widths.

At Distilled we have been trying to make our Twitter backgrounds more cohesive, both with each other and with the Distilled brand. We want to promote our company in a fun and visually appealing way  - you can see the background in action via our list of Distilled staff on Twitter.

This is how we applied this template to the Distilled brand:

It is important to design your Twitter background with the existing twitter layout in mind. The main column on Twitter is centred regardless of browser size. The main column has a triangular notch at the top (giving it a speech bubble affect) that points towards the centre of the letter ‘w’ of the word t’w‘itter.

When designing a Twitter background the constraints to consider are:

• Any copy within the background must be clearly visible at the smallest of browser sizes.
• The Twitter logo has a transparent background behind it; this must not conflict with the design. This means keeping any other copy lower than the Twitter logo level (20px) from the top of the page.

This is something that Will had not considered on this old Twitter background:

Will Critchlow’s old Twitter background

• The background should be a different colour from the main Twitter column. This helps to ground the text on the page and also to clearly show the columns width which prevents copy looking like it is floating in the middle of a massive expanse of white space.
• A pattern or colour should continue to fill the whole width and height of the page. using a limited amount of colours or repeating a pattern will keep file size, and therefore loading time, to a minimum.

First it was important to design a format that could easily be applied to everyone as an individual. Everyone should still feel their Twitter page was theirs so individuality was important. It was decided that everyone would have an illustration of their choice but the rest of the background would be a uniform design. The template design incorporates the Distilled colours and the individual names are styled the same way as the Distilled logo. People visiting both a Twitter page and the Distilled website should make a connection between the similar visual styles:

Twitter background template

The person’s name is aligned vertically to ensure that it is visible even at smaller browser widths.

Our Twitter background at a small browser size

The image should be visible within the darker grey section within the page structure but as this is a very small area the main content of the image can extend to the end of the lighter grey square. The width of the Twitter central panel is 765px wide. Positioned here within the 1024 average, you can see that the most important information the name and Distilled website address is still clearly visible.

I have provided the Distilled team with a style guide so that they can easily make the side bar and other elements on their twitter page fit in with the background design and the Distilled brand guidelines.

Check out Will on Twitter

Distilled on Twitter

Tom Critchlow on Twitter

Andy Davies on Twitter

Stephen Fry is, by most standards, a power user on Twitter. His Twitter background has an illustration and a few image links to other websites. The illustration includes his interests, and the links to other sites are great too, if only they were more easily visible! The problem is that your browser has to be at a wopping 1263px width to be able to view this important information.

Stephen Fry’s Twitter background at 1263px

Unfortunately, knowing the screen size of your users is a constant battle as it is always changing. One of the most widely used website formats is a 1024px width and roughly 50% of internet users are thought to have a screen this size or smaller. Therefore, roughly speaking approximately 50% of Stephen Fry’s visitors will only see a few random letters of the background copy.

Stephen Fry’s Twitter background at an average screen size

Sticking to our template guidelines ensures that important information is visible at small browser widths:

Unfortunately Stephen Fry’s important information is hidden with the browser at this size..

Stephen Fry on Twitter

Feel free to visit us all on Twitter and check out what we are getting up to. I would love to hear what you have done with your Twitter background, and also how you get on using our FREE Twitter background template

Leonie Wharton Senior Designer