Tuesday, December 28, 2010

Twitter Backgrounds 101

After reviewing a couple of corporate Twitter profiles, I got thinking; what is going on in some peoples heads when “designing” some of these twitter backgrounds? As a designer and social media addict, this frustrates me to the fullest extent. Correct me if I'm wrong, but isn't the viewers experience suppose to come first in web design (or any design for that matter)? Are we not supposed to design for the web so it will work flawlessly across millions of devices? Okay okay, I know it's impossible to make things work totally flawless on the web. However when it comes to a Twitter profile background, it actually is possible.

I started writing a list tonight of key tips to remember when designing a Twitter profile. It's something that I view as common sense, but I suppose most of us forget that designing a Twitter profile background is just as important as the company website that's linked to it under the bio. Here's some rules I've come up with, and what I go by when designing those pesky Twitter profiles.

Design from the top left corner. This seems to be an issue that most people run into. Remember, not everyone has your size screen (you'll hear me say this many more times in the post). Below is an example of one profile that has broken this rule, along with many others.

Yup, that's MasterCards official twitter profile. They didn't just put any old text on the right hand side, they actually place their disclaimer there. Believe it or not, that screen is with my browser full-size at 1440px wide. Now, how are we supposed to read the legalities with all that profile action happening on top of it? Silly @MasterCard.

Below is Groupons twitter profile, which is beautifully designed, and follows the simple rule of designing from the top left corner, but unfortunately they broke the next rule.

Don't ever exceed 200px from the left when placing important information. This is the second most important rule I see broken...all the time. Groupon managed to follow the left-side rule, but with this “new twitter” now on the shelf, the 200px rule must never be broken for obvious reasons. I've actually found that it's better to stick with about 100px-150px of design space on the left side. This generally accommodates the smaller screen sizes since not everyone has a nice 1600px resolution, or uses their browsers maximized to their full size. Once again, my screen size is 1440px wide, and is common for 15.6” screens. What kind of sucks is this leaves us designers with a really small space to work with, but that's why we're the creative ones that can solve the worlds visual problems. Work with it.

Don't exceed beyond 500px vertically. Not only do you have to watch how wide you design, you need to watch how tall you design. Your information may fit fine when viewed on your screen, but when Grandma Gertrude gets on her netbook at Barnes & Noble, her browser isn't going to be able too see all of your beautiful design if it extends to far down. Bank of America is a perfect example of this.

Make the background extremely large. No, not the actual copy or primary images, but the decorative background that is supposed to bleed off the screen. Just as we have small screens that squish content, we also have extremely large screens that the content can't fill. Discover has a gorgeous looking Twitter profile, but when I viewed it on a higher resolution screen, it just ended. Nothing. Na-da. And if you're ever unsure about the background not being big enough, just fade it out with a gradient so it blends into the background color that you set.

Match your background color to the background image. Say you end up fading out the image background so it blends nicely into the set Twitter color background, but you didn't match the color in photoshop to the color on Twitter. Congratulations, you just did what half the other companies do to their profiles. Match your background in photoshop with a web safe color on the web. That way, when viewed just about anywhere, it blends nicely. This is really simple Web 101, but it happens so many times, and these harsh lines show up as an ugly box in the center of your profile. Exhibit A: SunTrusts profile.

When all else fails, use a soft pattern. Patterns can work, but they can also be distracting. If you make one right, you can just tile it in the background and have an endless profile background. Just make sure you keep it soft and easy on the eyes. Diggs profile background is an excellent example of a good pattern, though it's not actually tiled (it's nicely faded into the background color).

Keep it simple. Nine times out of ten, someone's going to get your tweets from a mobile device. It sounds kind of silly to say that now, but it's true. However, you want to make sure your company (or you) look good when viewed on in a full html browser. You can take one extra step that will carry onto the mobile apps and browsers though; make a clean and effective profile picture. So many people cram too much into their picture, crop it wrong or try to fit a full logo (text and all) into that tiny square. Use your companies logo graphic/icon if the full version doesn't read well when it's that small. If you don't have a smaller, condensed and simple version of your logo that translates nice when shrunken, you probably should go back over your brand identity and make some corrections.

That's all I have for advice on designing Twitter profile backgrounds, for now. It seems silly and some even seem like common sense, but so many major companies are breaking one or all of these rules. I'm not talking about small businesses like Big Burrito, I'm talking about massive companies like Bank of America, Snapple and Best Buy. It's important as designers to carry on our skills into social media, and not just toss them aside like a pair of socks at Christmas.


  1. Thanks for the post. There's definitely a lot of bad Twitter background designs out there (especially since the 'New Twitter'). It's good to see someone fighting bad design with a little educational post.

  2. You're most welcome! It does seem like the new twitter threw off a lot of profile designs, especially when it comes to overlapping issues.