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:
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.
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:
- 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.
How have I designed the Twitter backgrounds within these guidelines?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.
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.
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..
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