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
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..
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
If you have enjoyed this post you can subscribe to the rss feed to read more about how you can monitor and protect your brand online
Comment link
SEO Mofo on Fri (12 Feb) @ 2:19 pm
Just what do you think you’re doing invading my query space?
How to Design a Custom Twitter Background Image
Although I have to admit, I really like the Distilled backgrounds.
The only major discrepancy between our posts is this:
I estimated this at around 25%, based on my own traffic, but according to the data from W3CSchools.com, it might even be closer to 20%. Where did you find the 50% statistic?
Nice job here.
Comment link
Barry Adams on Fri (12 Feb) @ 3:30 pm
Superb stuff, thanks guys. Will definitely start applying this to my twitter bg.
Comment link
richardbaxterseo on Fri (12 Feb) @ 5:37 pm
I’ve always been a sucker for a nice bit of design. Great post, Leonie!
Comment link
SearchCap: The Day In Search, February 12, 2010 on Fri (12 Feb) @ 10:11 pm
[...] What Everybody Ought to Know About Twitter Backgrounds, distilled [...]
Comment link
Raidensurfer on Sat (13 Feb) @ 9:07 am
Thanks for the insight, I have passed this onto my fellow designer.
Comment link
Link Moser on Sun (14 Feb) @ 12:23 am
Thank you. It was just this week we were working on a Twitter background for a client and my designer and I felt as if we were talking different languages due to the fact that she was working with a smaller screen res. then me! I will forward this to her right now!!!
Comment link
Olivian BREDA on Sun (14 Feb) @ 9:35 am
I have a 22″ monitor. What now?
Comment link
Leonie Wharton on Tue (16 Feb) @ 2:10 pm
Thanks for the comments guys, hope this post has helped.
Comment link
Ian R Smith on Thu (18 Feb) @ 9:05 am
Thanks! This is really useful. I’ve done a couple of backgrounds now…
… and the positioning of them was very much a trial and error.
Comment link
Leonie Wharton on Fri (19 Feb) @ 4:42 pm
@ SEO mofo
Glad you like the Distilled backgrounds
It would appear great minds think alike hey
Vertical left hand alignment of text is definitely best.
There is a lot of data about the percentages of people that use varying screen sizes, it is quite a subjective matter that changes a lot as screen sizes get larger (and smaller now with iphones and hand held devices). I may have been looking at outdated stats, but it’s worth highlighting that data from analytics only refers to screen sizes and not browser sizes which cant be tracked so easily, and could easily be smaller.
Thanks for pointing that one out though, interesting to keep an eye on the data as it changes throughout the years.
Thanks, Leonie
@ Link Moser
Glad to have been of help especially if it has helped to explain browser widths to a client.
Thanks, Leonie
Comment link
Glenn Friesen | Customer Service Training on Wed (24 Feb) @ 4:37 pm
Enjoyed the post — and great resource with the template!!
On your webinar now – Suggesting everyone else schedule these in.
Best,
Glenn Friesen
Impact Learning Systems
Comment link
Gabriel on Wed (3 Mar) @ 10:59 pm
Twitter has been one of the latest trend nowadays. Updating your own Twitter and making it more attractive to your followers and potential followers can create a great impact to your Twitter account.
Comment link
Tom Rado on Thu (22 Apr) @ 8:59 am
Great post Leonie, my background definitely needed some renovation. Interesting the info on copy and how to keep it totally visible, and the second of the two corporate designs is awesome!
Comment link
Taylor Potter on Thu (29 Apr) @ 4:33 am
Thanks for the template Leonie. It will be of help to a lot of twitters out there. There is already a lot of artistically appealing professional twitter backgrounds and retro twitter backgrounds out there and it is all the more exciting to know that we could add more style to them. Many entrepreneurs especially the one with a small business yet use twitter for advertising. They often use a professional twitter background as it suits the business mode, it is a sure good news to them to have knowledge on how they can play with it’s design artistically.
Comment link
Tyler Harris on Tue (11 May) @ 12:42 am
Great article, I missed it by a week as I worked out my background design last week in preparation for our launch. http://twitter.com/gogoandco
would have made it a lot less messing around having this to work off.
Thanks I’ll keep it for next time
Tyler
Comment link
Thunder Booms! Our SEO/SMO Favorites for the Week (5/14/10) | Thunder SEO on Fri (14 May) @ 8:21 pm
[...] What Everybody Ought To Know About Twitter Backgrounds By Bekka Palmer – I’m so glad some of the big guns of the SEO world acknowledged the importance of twitter backgrounds! We build branded twitter backgrounds for all of our social media clients, and it’s an important first step in any social media endeavor. In the past few years of using twitter, I have noticed a lot of spam or ‘fake’ company twitter profiles. One way to make your company look legitimate is to take the time and resources to have a designer create a custom twitter background that matches all of your company branding. [...]
Comment link
Mohsin on Sat (17 Jul) @ 5:47 am
I tried it very much before to put a great background but i always mess with this… thanks for this great article.My Profile is looking cool now