Size Does Matter (or Your Twitter Background Doesn't Look as Good as You Think)

I heard it first when I was 9 or 10: When you ASSUME, you make an ASS out of U and ME. Little early? Sure. Hey, I grew up in theatre.

I recently took notice that someone was not just riding - but driving - the Assume Train a month or two ago. In my quest of ever-further understanding in social media, I noticed that there was a new Twitter Rule: Make custom Twitter backgrounds look bad my computer.

What is happening?
It's simple enough: Most custom twitter backgrounds I've seen assume browser viewing width of at least 1280 pixels. Why would that happen - how could that happen - so consistently? Most everyone is following directions based on very bad data.

About my setup
I've a lovely ASUS laptop setup, a workhorse that can easily run all of Adobe's Master collection. The max screen display resolution is 1280x1024. Because I run Trillian in my right margin and like to see people coming and going, my current browser display width is about 1100 pixels.

Browser Resolution Numbers
As of January 2009, W3Schools reported that 40% of internet users are still using a resolution of 1024x768 or less.

So that means that your custom Twitter background doesn't look good on 40% of browsers, right? Wrong. The number extends to everyone viewing at 1280×1024 pixels as well.

How can that be?
The template most people are using makes the following incorrect assumptions:

• Everyone works at a minimum of 1280 pixels wide


• Everyone views their browser maximized


• A maximized browser displays 1280 pixels of content

Wha-what? What do you mean the browser doesn't display at - huh?

Case of the Missing Pixels
This is a common problem in web design in general, with many people designing the width of their sites for exactly 1024 pixels. Why is it a problem? Because even when it's maximized, the browser itself can eat up pixels left and right. No, literally: The interface eats up pixels on the left and on the right. And Twitter is tall, which means you're losing even more pixels on the right to the up/down scroll bar.

For example, maximizing Firefox, including the scroll bar, my display area is 1262 pixels. So even maximized, custom Twitter backgrounds do not always look good when optimized for 1280 pixels. Meaning: I might not be able to make out your phone number in order to call you and buy your services.

And, yes, that means you should probably design your websites for a max width of 1000 pixels.

Why doesn't anyone notice?
This is a completely unscientific guess, but my experience shows me that the folks who are savvy enough to put up their own custom background are also savvy enough to use a Twitter tool, such as TweetDeck, and therefore have little or no interaction with their own profile. Being more tech- and web- prone, they probably also have a screen display resolution over 1280 pixels wide so when they do see it, hey, looks good to me.

How do I fix it?
Here's the easy part. Let's pull the pieces together, add some math, and we'll fix that Twitter background right up for you.

Twitter's central block is 762 pixels. And we've already discussed designing for 1024 means designing at 1000 pixels wide. That leaves you with 238 pixels. Half that for what you're left with on the left side and you've got 119 to work with. Give it a little breathing room in the worst circumstances and you should keep your left block of your logo or pic or extra information down to 100-110 pixels wide.

Is that a little tight? Sure. But you'll frustrate less people and open all of your extra information to 96% of internet users, even if they have to maximize it to see it. (Yes, some 4% of poor souls are still floundering at 800x600.)

Be flexible; be durable; but most importantly: don't piss off people looking for your information. The web is a subjective place, a reality seen differently by everyone who uses it. Do the research and do not assume anything.