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.
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:
- 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.
- 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.
- 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.
- 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.
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:
- 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.
- 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 Resize → Edit Resize Dimensions.
Add commonly used screen resolution to the list, as follow:
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.
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)
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).