When you browse twitter you see so many badly designed twitter backgrounds, and if the design doesn’t suck, sometimes the coding does. How do you design a twitter background? Let’s take a look at smashill’s new twitter background. As you can see this is a single picture with black background. Why did I choose to design this way?

1. I wanted a good quality image without many compression artifacts, that’s why I choose a smaller image size.

2. I didn’t want a background that repeats itself over and over because I decided to add text.

3. I didn’t want the background color having troubles with the image.

The rules for thoughtful twitter design

First of there are two things to consider:
1. you are limited to 800k background images and 2. can’t alter much of the CSS. Due to these challenges you will have to adapt a bit.
There are two possible designs you can create at twitter that will look good, no matter which resolution.
One way is to create a tiling background, tiling as in to every side, as it will repeat to every side. A good example for this is the twitter background of Ray Frenden, he uses the same background on his homepage Frenden.com, you should check that one out as well



As you can see the Zombies on his background are repeating perfectly and no matter which resolution, the background will always look the same. Besides this the size and compression of the background image is good, as it is crystal clear and has no signs of compression artifacts.

The other way to create a background design is to create an image whose borders have the same color as your html background color. Let’s look at my twitter design for this example.



To make a long story short, you can see how the background image merges with the background color on the right side. You can add images only to the left side, that makes image to background relation-considerartions a necessary evil.

Conclusion

• Don’t use gradients. Gradients are so web 2.0, but they suck at twitter! Don’t think of the browser as some 1280*x or 1680*x background, some people have far far far bigger resolutions, and those people see a harsh border on your otherwise beautiful design.
• Match the color of your background image with the html code color, pick a websafe color.
• Don’t make the image to big, rather go for a smaller compression. Huge images assume the reader has a certain resolution in case they don’t blend with the background, and the compression articfacts make them usually look rather ugly. Rather go for a small but clean background.
• Tiling backgrounds are fun and you can easily create cool images, just google it there are plenty of tutorials. Don’t break the golden rule though and put your contact information on a tiling background.
• A twitter background is not hard to design, take some time to make it look good and professional, or simply stick to the generic twitter background.