Custom Twitter Backgrounds: Tips for Better Readability

In this tutorial Hendry Lee from BlogBuildingU (follow him on Twitter at @hendrylee shares some tips on getting Twitter Backgrounds that are optimized for better readability.

Last time I spent some time tweaking my Twitter profile background, I didn’t change much. My goal was only to change the background and sidebar so they match my blog theme.

It appeared to be easy, but there are a few tricks to make the background appears nicely. Well, at the same time it is not as difficult as some people might think as it doesn’t require any specific HTML knowledge.

twitter-hendry.jpg

If you want a simple background such as my older Twitter profile (screenshot above), here’s how you do it. The tricks, summarized, are as follow:

  1. Create a simple background wide enough to cover most screen. When I made the background image from scratch, I didn’t think it through and decide 2,000px pixels wide should be more than enough but a quick check on my display setting shows that it supports up to 2,048 pixels wide. In other words, use 2,048 pixels just to be on the safe side so your visitors will never see the background color at the most right hand side of the screen — uncovered by the background image.
  2. Change the background color appropriately. This way, you don’t have to create a full background image with height 1,536px (maximum number of vertical pixels for my display). Gradient looks very well and it saves file size. It is basically a good idea unless you really want the vertical details in the image.
  3. Customize the background image. I created an image with 300px high. The shade was from a darker teal to a lighter teal. The background color above should match the bottom color of the background image, so it flows smoothly as if the background color is part of the image.
  4. Fill in the sidebar value. Peek into your CSS code — it is not hard to locate — and copy the color code of the sidebar and paste it in the sidebar text box. Note: Alternatively, use Firefox add-on ColorZilla to pick the right color from any pixel out of the screen.

That’s it. Change the background image but make sure you leave the tile background option unchecked. You don’t need that.

The following screenshot shows my saved options.

twitter-design-background.gif

Taking Twitter Background to the Next Level

I’m quite satisfied with my customization, but I think I could pack more details into the background.

While the bio and other information on the sidebar allow me to promote my web site, they don’t stand out as much as I want them to. So after seeing other Twitterers do it, I want one too.

And just because I can do it, why not! Besides, it looks so cool.

Allow me to take you through the process to create and update a Twitter background image.

Note this is not a typical tutorial on changing Twitter background, because I’d like to approach it from a different perspective.

It helps if you think about your future followers as site visitors and your Twitter profile page is the landing page. Your goal with the landing page is two fold:

  1. Turn strangers or lukewarm visitors into followers. That is the ultimate goal. There will be people who return back to your Twitter page to check your updates or other reasons, but most of them are not yet followers so your focus should be on the “strangers.” With lukewarm visitors, I refer to people who already read your blog or recognize your name somewhere.
  2. Get your brand out there. Color that matches your blog or company color scheme may help, but especially for independent bloggers and small business owners, most likely new visitors don’t know about you if they don’t arrive via your blog. For this reason, you also need to display your logo and other information as well.

Installing the Tools (Firefox Add-Ons)

Mozilla Firefox happens to be my favorite web browser, you will see why once you install the following add-ons. (This is just a handful of the extensions I have loaded on my browser.)

  • Web Developer. This extension adds web development toolbar to Firefox. There are too many features to list here. What you’ll use this for: locate which CSS class or id belongs to certain area and resize your browser window to specific screen size.
  • ColorZilla reads color from any pixel on the screen. You’ll be using it to pick colors from the screen and match your blog/site color scheme with your Twitter background.
  • MeasureIt is another small and neat Firefox plugin. Using it, you will measure how many pixels are available for you to display additional information in the Twitter background image.

Of course, you also need an image editor. I use Adobe Photoshop but you can pick any image editing software of your choice.

Once you’ve installed the above extensions, you are now ready to go. But before that, go to the Web Developer toolbar, pick ResizeEdit Resize Dimensions.

Add commonly used screen resolution to the list, as follow:

  • 800×600
  • 1024×768
  • 1280×1024
  • 1600×1200

Know Your Territory

Twitter was designed for browsers which have 800×600 resolution or higher. Below that, horizontal scrolling is necessary. Good news is, nowadays, nobody still uses 640×480. W3School confirms the stats from my web analytics.

Nowadays, the most common screen resolution is still 1024×768. Soon it will 1280×1024, but before that let’s focus this design on 1024×768.

You will be surprised to find that under that resolution, remaining space outside the Twitter content area is minimal. Examine the following screenshot carefully.

twitter-zone.jpg

A few important numbers you should be aware of (window resized to model the 1024×768 resolution):

  • The number of pixels before the main content is 83 pixels.
  • Remaining space on the left hand side of the content area: about 115px. I can’t be too accurate with this because not everyone maximize their browser window. Moreover, desktop theme may use up different width for window’s border and scroll bar. But 115px is a safe assumption, I think. Notice that I mark this spot as Safe Zone. That means if you put your content here, you will gain maximum exposure throughout different screen settings.
  • The amount of pixels from the left edge to the end of right sidebar is around 878 pixels. Again for the same reason as above, no one can be sure about the exact width seen on the user screen. You need this number if you want to use the Secondary space on the right.
  • The height of the screen varies. Currently, including the navigation bar, bookmark toolbar and tabs, I have six bars at the top of the content window, so those eat up space. Unless you install more toolbars, the minimal height for background image is about 525 pixels, including the header space.

Use MeasureIt to find out the exact pixels available for your background. If you want to be on the safe side, I’d recommend 525 pixels, as I believe rarely people would use so many toolbars.

Note: My working screen is now at 1920×1440, so I can afford to give away some vertical space for quite many toolbars.

Remember that the background image doesn’t scroll as the visitors scroll down the window. Everything has to fit above the fold if you want them to see it.

Twitter Background Image Mistakes

Before getting started, it is critical that you are aware of these common mistakes. Avoid these as they may confuse your visitors with your landing page.

The purpose of strategically placed content is to give your visitors interesting information about you. If they are confused, you risk losing followers.

Incorrectly formatted background image may hurt your profile more than it helps. Unless people have known about you before clicking on your Twitter page, they will look around to see if you are the right person to follow.

It is the purpose of the custom background image to add more information beyond what’s available on the sidebar. If you put text, make sure that it works on as many screen resolutions as possible. It can be frustrating to see the text cuts off the screen.

Here are a quick summary of common mistakes people make when customizing background image for Twitter.

  • Twitter logo actually runs over your logo (on some screens). This one is partially related to user screen size. I mean, Twitter logo will cover anything you put on the left side of the logo if the screen is narrower. Solution: start your background content below the header area (the 83 pixels mark).
  • Content area takes too much horizontal area. Users with higher screen resolution are able to see the whole thing but many others see only half of the sentences, URLs, or whatever. Again if you look at the stats (link above), that means you annoy at least 40% of your visitors.
  • Put main profile information on the right. You’d just hope that the visitors use the same screen resolution as yours. If they use a smaller screen, the content will be off the screen. And if their screen is just a bit wider, the content will be covered behind the sidebar, or even under the main content. Now you know why I highlight the space to the right of the sidebar as “Secondary.”
  • Displaying too much information. While the above mistakes are related to screen width, this one has to do with screen height. If you really have a lot of stuff to put in the background, make sure that the most important elements are up above the fold. Consider how frustrating it is when the visitors read your message, just to find that when they scroll the background doesn’t follow. After all, it is a background image. Workaround: Be concise and to the point. Fit everything above the fold.

It is important not to design for your screen only. Refer to the above link to see current statistics of screen resolution and then design to fit at least common screens.

Tips for Designing Twitter Background Image

Generally, you can avoid the mistakes explained above and end up with an image that is readable on most user screen. But just for the sake of completeness, let me list them again, with a few additional tips as bonuses.

  • Background image should be 2048 pixels wide. The height depends on your background image. I personally use 525 pixels.
  • Never touch the header area. Put your content after the 83 pixels mark. The logo will not cover up your content before and after the visitors log in. If the visitors haven’t logged in, lower resolution screen users will still see a bit of your content in the header area, so pulling down the background content even more may help.
  • Use the “Safe Zone” to put primary information. This spot will be seen by users with 1024×768 resolution or higher. See the above map for a rough guide. Resize your browser window and use MeasureIt to be sure.
  • Limit the width of your content to 115 pixels. Remember that you are aiming at users with 1024×768 screen size. As of January 2008, they were still 40% of the entire Internet users.
  • Put secondary information on the “Secondary” area. Decide on a screen resolution that you want to target and place your content on there. For 1024 pixels screen, it is about 878 pixels from the left, 115 pixels wide.
  • Don’t start from the first pixel. Add 8-10 pixels from the left edge for some padding.
  • Keep your content above the 525 pixels mark. Resize the screen resolution with “Web Developer” toolbar, choose Resize &rarr 1024×768 or any preset you configure above. Use “MeasureIt” to be sure about your viewable screen height.
  • Place most important piece of content at the very top. Put the content you absolutely want the visitors to see just below the header area (after the first 83 pixels).
  • Blue for links. This is a bonus tip. Web visitors are used to blue links. That’s why I use blue color when mentioning my web sites and blogs even in the image. Some readers will hover over the URLs, just to find that they are part of the background. But that’s intentional. By the time they do it, they will already read my URLs. If matching to your color scheme is necessary, skip this one.
  • Set the background color to match your background image. That way you don’t have to create an image to cover all the screen height. You can’t add vertical details that are more than your image height though.
  • Set sidebar color. Twitter highlights active tab on the sidebar as white, so if you set the sidebar to different color, the highlight will stand out.
  • Optimize image for the Web. There is a reason why you should limit your image height. Most people won’t see anything below certain height limit, so why make the loading of your background image slow? Optimize for the Web in all cases. Under 100KB if possible. A file of 100KB takes about 18 seconds to load on a stable dial-up connection, which is a bit too heavy already.

Once you’ve created your background image, just upload it and make sure you don’t tile the background. That’s it!

Resulting Background Image

After doing what I recommend above, you should end up with an optimized background image that works on most screen resolution.

People with 800×600 screen won’t be able to see the background content because the main area covers the whole screen, but for the rest, they will be able to see the whole message you try to deliver to the readers.

Take a look at my Twitter page to see what I mean. (@hendrylee)

twitter-hendry-new.jpg

The Drawbacks

With several limitations, certainly there are a few drawbacks to using this method to create Twitter background image.

  • Limited space. Because you try to design for users with lower screen size, you have limited space. That requires a bit of creativity to fit your information right in.
  • Narrow strip. At the same time, perhaps your creativity can’t be expressed freely because all you have is 115 pixels wide and a few hundreds of pixels high.
  • Not the best looking background. Users with higher resolution display will see your information strip close to the left side of the screen. Unless you have filled the background with tiles and other patterns, it looks quite dull. Remember that you may want to choose between smaller file size or better background so you may or may not use a pattern to fill the background.

My Twitter background image may not be the prettiest, but at least the content I put in the background will be read by more people than most others who don’t spend some time to plan for the layout of the content in the background image.

As a final note, it is possible to put part of the content to fit in the 115 pixels and then reveal more information for 1280×1024 screeb users, and so on. Instead of using one wide column, put your content into multiple columns. Again use MeasureIt to measure the screen size accurately, up to the pixel.

So is it worth the effort? Your choice.

Hendry Lee helps bloggers overcome strategic and technological challenges in starting and growing their blogs. He also writes about social media on his blog Blog Tips for a Better Blog – Blog Building University. While you are there, download your free eBook and subscribe to the blogging e-course!

Follow Hendry on Twitter (@hendrylee).

Comments

  • December 16, 2008

    That is very good post. I happen to see many’s people backgrounds or full profile where my eyes started hurting after 10 seconds , trying to read their bio or few tweets.

    Btw great post Darren.

  • December 16, 2008

    Very good article and the first one that I have seen that points out the problem with people making the left text area too big. Most people still run 1024 x 768, and almost every custom twitter profile I see is set for screens wider than that. Doing so tells people you don’t understand or care about them. Better to have just an image in the background than to put up information they can’t read. Thanks for pointing that out to people.

  • December 16, 2008

    Very detailed information — I love it. I have wanted to update my Twitter page, but wasn’t quite sure of where to start. This is a great how-to. Thanks for making this process easier for us that aren’t real savvy regarding web design.

  • December 16, 2008

    Whoops! That was a looooooong post! But I must say it was an interesting read. Let me see how I can make use of this knowledge to tweak my own twitter page!

  • December 16, 2008

    Great article, very thorough. I’ve started creating custom Twitter backgrounds using similar info found on Twitip a month or so ago. Thanks for even more detailed info!

  • December 16, 2008

    Useful and informative post.

  • December 16, 2008

    A great detailed post. It is actually one of the better posts that I have seen on here. The best part is where you say know your territory. Not a lot of people know how to figure out how much room they have on the screen for the background. That section of his post will definitely help those people. I think it is better to use a background that will somewhat show off your brand. Put your logo on the background so that people can remember you. Again, great post and great thoughts.

  • December 16, 2008

    pretty helpful!
    I made a custom background for myself a few weeks back and its up now. check it out!

  • December 16, 2008

    Great post! I had my own post about customizing backgrounds recently.

    Customizing your background

  • December 16, 2008

    A PowerPoint template to help you design your Twitter background can be found here

  • December 16, 2008

    Thanks for sharing how to do this. I enjoyed this post.

  • December 16, 2008

    Good post and you make some good points, Hendry. However, as you pointed out and Michael incorrectly states, “MOST people” do not use a resolution of less than 1280.

    We are at at similar juncture to the one we (web developers) were at a few years ago when we started increasing the widths of our web pages. At that time when we started designing using a table width of 800 pixels there were still some users with smaller monitors but at some point we have to start pushing the envelope. For one thing, it encourages people to get higher resolution monitors so we don’t have to design everything for the lowest common denominator.

    I remember when we had to design our pages so they’d load reasonably quickly on dialup modems. Thank God we don’t do that anymore and can create great looking websites using large graphics and Flash. However, there are still lots of people out there using dialup and they just have to deal with it.

    If a client asks me to specifically design a background to fit within the very narrow space we have to work with at 1024 I will do it, but in most cases we design for 1280.

  • December 16, 2008

    I’d like to point out that using a width of 2048 is not necessary if the background blends to a solid color because you just need to change the background color to match. Trying to save a background that is 2048 pixels wide — unless it’s a solid color — will result in a huge file and take too long to load. Even when I use photographic backgrounds I go with 1600 and blend the edge to a solid color so on large resolution monitors there will just be a nice fade at the edges.

  • December 16, 2008

    Really really interesthing. Thnk you i have to chaneg my twitter looks.

  • December 16, 2008

    One suggestion: Make sure you use a font large enough for people to read. I’ve seen several backgrounds where the person uses a nice small font to squeeze in a bunch of info. Too bad my old eyes can’t read it! And since it’s an image, I can’t change the font locally to make it any better.

  • December 16, 2008

    Discovered this 1024 x 768 problem when building my own custom background for Twitter.

    There are quite a few that need to heed the notes about the head of the background and the left side bar.

  • December 16, 2008

    Definitely great post here! I think that what makes it particularly valuable to me is the sizes on each side laid out in a grid. Knowing that I have exactly 83 px on the top and things of that nature really help me out while I *attempt* to design my twitter background. Keep up the great content here at TwiTips

  • December 16, 2008

    Thanks all for your kind words. I appreciate that.

    Hugh, please review the link at W3Schools for stats. I even have data from my own web analytics. Most still use 1024, while the number is getting lower every quarter. But still, I’m not going to annoy 40% of them.

    You made a good point regarding 2048px width. As you may see, my background has vertical gradient, so 2048px is necessary, and recommend people to cut on the vertical height of the background by blending. Similar trick can be applied to horizontal width, of course. Thanks for reminding.

  • December 16, 2008

    I designed my own twitter background with the help of tweetback folk s, who gave us a basic template. At the time I did not feel like spending $100 on someone else’s ( Twitters ) web page. If it is my own web page on which I have creative common rights, I wouldn’t mind hiring the best guy in town and spend $300

    With the help of the above post which is extremely useful,you too can design your own twitter page, and you know one day if its taken away from you, you have not lost much.

  • December 16, 2008

    Also make sure that you anti-alias your text!

  • December 18, 2008

    Great article, I never thought about the specifics of the header size and focus of url text.

  • December 18, 2008

    thanks for the tutorial. Is important to have a great landing page b/c most will visit only one time when they decide to follow you or not.

  • January 12, 2009

    GREAT posting, many, many thanks!!! Your presentation is excellent and very helpful!
    Many thanks too for recommending Firefox MeasureIt – another wonderful add on.

    Help me through one discrepancy… the left hand SAFE column on my (HappinessHabit) and Rachel Maddow’s (Maddow) Twitter site appears to be 250 pixels wide, not 115.

    Has something changed or is there something everyone takes for granted I overlooked?

    We’re new at this, we appreciate your reply! Michele Moore
    Twitter/HappinessHabit

  • January 12, 2009

    Egad! Now I see what you mean, it depends on the PC you are using.

    I looked at my Twitter site and Rachel Maddow’s site on another PC and the presentation was very different. I now understand why you said the left column could be no more than 115 pixels wide. Please disregard my earlier request. Best wishes, Michele Moore

  • January 20, 2009

    Loved this article. I don’t see the majority of the backgrounds on Twitter because I use 1024 X 768 resolution. Thank you for this information, it will help me in creating backgrounds for all resolution.

    And yes I will be shopping for higher res :P

  • February 6, 2009

    This was timely. I wanted to update my background for some time and had decided that today was the day. Then I found your article (through Twitter no less).

    Thanks for sharing all the hard work you’ve done with the rest of us.

  • March 1, 2009

    Too funny to come across this sec.. A few webpages back, I noticed a twitterer’s background said “Contact Me” and obviously had the information available, BUT.. His contact info fell below the bottom of my screen’s expanse.. Not a big as people could try tweeting at him.. You just never know, though, if there might be some circumstance in which it would matter..

    Peace and best wishes from North Georgia.. :)

  • March 5, 2009

    Wow! What a comprehensive and helpful post. I’ve been searching for Twitter background guidelines for months now and I am so excited to be able to to move forward making one for myself. And a huge bonus … learning about the Firefox plug-in MeasureIt. Thanks so much!

  • May 5, 2009

    Great resource. Thanks so much for compiling it and posting it for everyone.

    Steve Mullen
    EndGame Public Relations
    twitter.com/stevemullen

  • June 4, 2009
    muskratboy

    that “total width” of 2048 is ridiculous.

    i guess if you want to be sure all the people out there, who use that resolution AND maximize windows (ie. NOBODY) you can make that your max res. no one will ever use it at that, or ever see anything you make in that resolution. serious overkill.

  • June 17, 2009

    just what I looking for, time for creating one now for 1024×768 resolution
    thanks

    twitter.com/christonn

  • July 30, 2009

    the problem that I have is that when i make my background so it looks good on my monitor, if i were to use my sisters laptop (which is wide-screen) the layout changes somewhat and the design i have made becomes hidden under the feed box. also the right hand side you often see the back ground colour.

  • July 30, 2009

    aright after reading you post again i gather that this cannot be changed o well

  • August 5, 2009

    A Twitter background is a great place to show people in images who you are, to enhance what you’re telling them with your tweets. Thanks for putting together all the info anyone needs to get started!

    And, thanks, Jan for the link on creating a Twitter background in PowerPoint (http://theclosetentrepreneur.com/create-a-twitter-background-using-powerpointg). Although usually only designers have Photoshop and the skills to use it to create a background image, love it or hate it, everyone has PowerPoint!

    I’ve tried to make my background express my personalality on my background (http://twitter.com/kirstiscott) by using a simple photograph against some nice-looking paper. On my company’s Twitter background (http://twitter.com/hotdesign), I use the background to share news, links, and some info about us, and it matches our corporate site.

    Have fun with the project, try a bunch of different ideas, and eventually you’ll have a background that you like, plus that helps others get to know you a little better!

  • October 12, 2009

    wow.. great tutorial.. my background look so bad..

  • December 2, 2009

    I can’t get Twitter to accept my customized jpeg image (?)
    I basically just refined over a free background I got straight from TwitterImage. It loads in their original jpeg just fine, yet doesn’t accept the customized copy I made. Does it have some secret coding in the jpeg that makes it work or soemthing?
    BTW, we are totally new at Twitter – Do you or anyone you know give lessons on how to use it … even just basic ones to get us going? Thanks for any info on that.

  • December 3, 2009

    Michael– Sometimes it just takes a few tries to get your custom background to “stick.” I wrote a blog post on getting started with Twitter–it might help you get things going. Let me know if you need any more help! http://blog.hotdesign.com/2008/12/getting-started-with-twitter/

Sorry, the comment form is closed at this time.