By now I will assume that everyone knows the value of Twitter, whether you are a brand or an everyday person. Optimizing that space behind the feed, your background design, is an obvious step to extending the reach of your brand and making it that much easier for others that may be interested in you or your brand to make a connection.
Some may say, “I only see someone’s background in Twitter once, so who cares what it looks like?” To that I say, first impressions are key. Besides, I find myself going back to view someone’s profile on Twitter from Tweetdeck to catch up on some missed tweets.
Changing background designs and color options is simple to do in Twitter Settings, and there are a few ready-made designs or themes that they offer to you as well as tons of paid services. But why stop at ready-made when you can be unique? I will go through the basics of what Twitter offers, then dig deeper into the more creative ways to liven up your design by using patterns, photographs, a business card style background, or a combination of all.
The Basics
Within your main navigation you have Settings; this is where you can change your Design by following the link on the bottom to Change background image or selecting a preset theme.
Once you click on Change background image, you can then upload or delete your current image.
Clicking on Change design colors takes you to settings that control colors for all the other components like text, background, side bar, etc.
Graphic Fade to Color
This technique can be more lightweight than a huge photo and still pack a stronger punch than just a solid color background. By adding a graphic to your background you add visual interest. For the graphic to work well with higher screen resolutions, you would need to fade it out into a solid color. This solid color would then be set as the background color from the Twitter basic settings for design colors.
Below is the graphic used for @obox’s background. A color selection, hex color #, from the very edge of the graphic will then be used for the background color in Twitter’s settings.
Photo and Pattern Backgrounds
Photos are a great way to give life to your backgrounds. They can be purely fun like Twilk, which is a background generator that will create a custom background made up of your friends’ profile photos. The downside is you have to pay a fee of $5 to get the Twilk.com branding removed.
A very large photo can be powerful and effective in creating a certain mood or feel. The examples below show a crisp, clean interior shot of an airplane, interesting books on shelves and a stark simple cup of coffee. All of these relate directly to their brands.
You can also tile your photo or image so that the picture repeats itself like a pattern. Simple, effective and fun.
A repeating background pattern is a sure way of knowing that your background will display on any monitor at any given setting. Upload a repeating background and check the option for Tile background.
Business Card Design
This is the better background design option to ensure branding and design consistency is tied together throughout all your design and media.
When I started creating the 10e20 Twitter background design, I began with a template in Photoshop with a canvass size of 1635 x 1288 pixels. This large size ensured that even the biggest screens/resolutions would see just design or solid color.
Then I set up margin guidelines where the main text and additional company information would be, like “10e20’s on Twitter,” etc. The size of this space is 234 pixels wide. Again, this gutter width varies from screen to screen depending on certain variables, but if you design for at least 200 pixels wide you are playing it safe.
After uploading the 10e20 background design, I left the option for Tile background unchecked. This means that if someone has a huge screen/resolution they won’t get endless repetition.
I also set the Change design colors to White for Background, so when the design did end the white in it would continue on in either direction. This is essentially a Fade to color technique.
Some creatively designed business card backgrounds that I feel work great:
When you’re viewing someone’s background and you see links to other social sites as graphics that you can’t click on, it gets a bit annoying to have to type in that URL just to get there. It’s almost like using a rotary phone. I wonder if Twitter sees this flaw with the backgrounds packed with information and in the future allows a more in-depth customization of the background with fields for specific links and other information besides the right-hand side bar.
Your screen resolution does matter when it comes to seeing some of these information-packed Twitter backgrounds. Like anything designed on the web, you will run into inconsistencies with various screen resolutions, monitor sizes and how big the browser window is that the viewer is using. These are all variables that constantly change. The assumption that the image size available is determined by monitor size is not 100% correct. It is determined by the window width, which the designer has no control over.
Still, there are some who say “DON’T DO IT!” about backgrounds at all, but where is the fun in that? I say get in there, play around, have fun if you’re starting out. If you’re a business then get it together and use your existing branding that allows your audience to recognize where they are.
Bookmark this post:
58 Responses to “4 Ways to Optimize Your Twitter Background”
Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!
Wow, great post! I am also bookmarking this in delicious
. Great collection of well done Twitter backgrounds. I hate how the background left align instead of center like YouTube. O well.
I am offended my twitter page was not used as an example Pat. ha ha! Mine isn't as good as these though. Maybe I will rework it. ; )
how do you keep the bkg image from being over 800k?
Great article. Who doesnt want to have a unique style to thier site? SELF EXPRESSION IS ONE OF THE GREATEST human desires and motivations!
Jesse
http://www.threemoneymethods.com
Oh do these settings hold true for illustrator too? or just photoshop?
thx so much for including my little background
Those are some great examples. Twitter backgrounds are becoming such an important part of designers and company's brands. We should all strive to have such amazing backgrounds
Great post! Given I own a Twitter Background company I love seeing people posting great ideas that involve Twitter backgrounds. It is becoming very important to update your background if you are trying to market yourself in anyway on Twitter. If you aren't trying to market yourself, then it's always fun to be able to add a personal touch to your profile. It really shows who you are.
Does Youtube center the background, interesting? Thanks for writing!
@whatcutandwhere has a great background design!
Using Photoshop you have the option to Save for web, and play with the compression of your Jpeg or Gif. It is all about image quality verse compression or file size
not sure I get the question, however I used Photoshop for this but Illustrator can be set up like the template I used using guidelines and rulers.
Great background, prime example
Agree 100%.
Yes, might as well add some flare
very useful
thx
Hello Patrick, you have some great ideas. One thing I wanted to share with your readers is there is an add on to any browser that can make those annoying links on your Twitter page Clickable! Not sure if you are aware of this: http://clickablenow.com/ only problem I have noticed is everyone needs to join in order for this to work. lol (big problem actually) But, nevertheless great idea.
Patrick, what do you recommend a company do when their company name is too long to fit horizontal? Is it a good idea to do what I did with mine? http://twitter.com/cyandle
You have the right idea, looks great! I would only suggest tweaking that yellow text on white background, hard to read on my screen. Also, have you tried to see what the logo looks like even bigger?
Interesting, thanks for sharing!
thanks for sharing and tips, will optimize my twitter this week=)
[...] 4 Ways to Optimize Your Twitter Background, 10e20 [...]
nice! thanks for the sharing.
This is absolutely perfect direction towards optimizing twitter background.
I am working on optimizing my twitter background ( http://www.twitter.com/mujeebkhumawala ) for every standard screen resolution. I haven't yet completed working on it.
Everyone is welcome to check it out – midway.
Thanks for sharing these tips.. Great indeed
Great post. I like this twitter background http://www.twitter.com/bickov
any ideas on how I can improve my background…thanksOscar Wright, TangoTeacher, from Rome..http://twitter.com/
Wow, great post. I will use it in mu twitter
Yeah I've been told the yellow/orange is a little hard to read so I'll need to fix that. Never thought about making the logo bigger or even breaking it up for that matter.
Thanks for linking my DON'T DO IT! article. As long as people are aware of the caveats in the preceding paragraph about what you can't control, hey, go for it.
[...] 4 Ways to Optimize Your Twitter Background I thought this was a fantastic post and something I have overlooked. As Twitter becomes increasingly important to your business and can act as a gateway to your site it is important that you brand it. This post demonstrates with some great examples ways in which you can optimize your Twitter background something we will be looking to do very soon… [...]
[...] 4 Ways to Optimize Your Twitter Background | 10e20 [...]
Glad that you took something away from this! Thanks for writing.
Yep, makes me hungry
Can you send me a link to your page?
Yup, that's why I linked to your article. Great thoughts
Nice post. I've already tried it. Thanks.
[...] Patrick Winfield/10e20: 4 Ways to Optimize Your Twitter Background [...]
[...] Patrick Winfield/10e20: 4 Ways to Optimize Your Twitter Background [...]
[...] 4 Ways to Optimize Your Twitter Background [...]
[...] 4 Ways to Optimize Your Twitter Background [...]
[...] 4 Ways to Optimize Your Twitter Background [...]
[...] 4 Ways to Optimize Your Twitter Background [...]
[...] 4 Ways to Optimize Your Twitter Background [...]
sweet. check out mine! http://www.twitter.com/DigitalSkraps
[...] 4 Ways to Optimize Your Twitter Background [...]
Nice post. Simple but very usefull indeed!
thank you for such a wonderful tips.
nice tips, keep posting more!
[...] simplest ways of showing and telling potential followers what you or your business is all about. Design a Twitter background that reflects your ideas and slap on a nice picture of yourself or your company logo, mascot or [...]
I thank you for your article.
I followed these links and found, that you don't actually have to pay to get cool Twitter backgrounds. I found many web pages, which also offer cool and interesting design for Twitter and you can get them for free.
I hope that this will help you and the readers of this blog. Thank you again and I encourage you to write even more articles like this. They inspire a lot!
Here is the link to article an article, which I wrote
I thank you for your article.
I followed these links and found, that you don't actually have to pay to get cool Twitter backgrounds. I found many web pages, which also offer cool and interesting design for Twitter and you can get them for free.
I hope that this will help you and the readers of this blog. Thank you again and I encourage you to write even more articles like this. They inspire a lot!
Here is the link to article an article, which I wrote
[...] your social media profiles as extensions of your brand and of your website. Take the time to make custom backgrounds for Twitter or create rich Facebook tabs that support your current marketing initiatives. Just because your [...]
[...] your social media profiles as extensions of your brand and of your website. Take the time to make custom backgrounds for Twitter or create rich Facebook tabs that support your current marketing initiatives. Just because your [...]
[...] success, and it can be, but you don’t need to have the most web 2.0 looking website or the most decked-out Twitter background to be great. You could have the most visually appealing site and profiles in your industry, but if [...]
Hey Pat,
Brilliant Post!
I was looking for the sizes of the background for long time.
Thks and all the best
[...] your social media profiles as extensions of your brand and of your website. Take the time to make custom backgrounds for Twitter or create rich Facebook tabs that support your current marketing initiatives. Just because your [...]
[...] 4 Ways To Optimize Your Twitter Background [...]
[...] Patrick Winfield/10e20: 4 Ways to Optimize Your Twitter Background [...]