The Evil Twitter Twins

Back in September, Twitter began rolling out a sparkly new layout and a few new features to some of its users, and officially completed it in October. Users are still given the option whether to use "old" or "new" Twitter, and I'd personally kept to the old one for a while for a variety of reasons, including my typical resistance to anything my favorite services try to change for the sake of changing (if it ain't broke...) but also because of the "new" version's wider layout, which fills most of the screen horizontally.

Old Twitter

New Twitter

The implication is that less of the user's background image will be showing. A little *ahem* background... on Twitter's backgrounds. You basically get three options when designing your Twitter profile's background appearance:

• solid color (don't use a background image)
• background image that tiles (repeats vertically and horizontally)
• background image that doesn't tile and is stuck in the top-left corner of the screen

This is a bit different from normal Web pages, which allow you to set a variety of options in HTML and CSS such as whether the image will be centered or stuck to a different side of the screen, whether it will be fixed or scroll with the content, and more. To be fair, most social networks do limit customization in order to maintain some kind of consistency for the user experience. Twitter in particular has always had a very streamlined interface and sometimes an overly-simplified approach to its service. The great thing about getting millions of minds together online though, is that often people will come up with extremely cool ways to work within the provided framework and still show off their creativity.

In the case of Twitter, one of these ways was to create custom background graphics which either reinforced a brand image, pointed to other social networks (Twitter limits you to one hyperlink in your actual profile), or just looked darn cool. There are plenty of nifty "Twitter background" roundups and tutorials floating out there which highlight this trend, but they generally display the narrower layout which provided more real estate for these creative backgrounds.

Now, I had not taken the time to design myself a cool background before this point, and in a way I'm glad I didn't because it's a shame for all the people who did, only to have them hidden today. However, in light of the imminent "You’re using an older version of Twitter that won’t be around for much longer" message posted along the top of every page, I decided that there must be a way to have a cool-looking graphic that fits in the new space provided.

And so, in honor of Spring cleaning, my new MacBook Air, and the design community at large, I put myself up to the challenge.

Thought process:

• I am not including mobile users, as they would be using mobile Twitter or a third-party application, so they wouldn't see any change in "layout" from old to new or any user's backgrounds at all.
• For some users, 1024px is the highest resolution their screens will allow. Browsing new Twitter with a 1024px wide window on a normal device, though, means that you have 40px of background real estate on the left, and 40px on the right. Unless you're going to write something at 4pt font size or place your favicon there, I don't see this as being useful. It is practically the smallest resolution you can use in the new Twitter before getting horizontal scrollbars (ick), so I think it's safe to say this resolution will not be our target.
• Moving on to the next big class of users: 1280px wide screens. Realizing that someone could resize their window a bit smaller even when their maximum resolution was 1280px meant that I wanted a design which could hold up to somewhere between 1024 and 1280, but generally 1280 would become the new standard. This gave me 120px to play with on each side of the screen.
• The right sidebar in the new Twitter is now slightly transparent. I could do something cool behind there...

Time to sit down and design. Approximately three hours, one drunken roommate, some Pad Thai, and a few bathroom breaks later, I was finally satisfied enough to test my design...

Eureka! It worked! My design didn't call for any specific top padding, and I eventually trimmed it down a bit, but I was very happy with how this looked online, how it scaled with the window, and of course, how very "Amy," my new Twitter background was.

Now off to write a how-to reference for the design community on http://color-and-code.com