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

Mad Men Yourself: Implications of the Swanky '60s Style Avatar Creation Site

This post is for anyone interested in Web 2.0 technology, trends in social media, graphic design, the TV series Mad Men, or marketing.

It appears I have a knack for finding new "[Insert Title Here] Yourself" services on the web. These Cartoon-Yourself, Yearbook-Yourself, Elf Yourself, and avatar generators let us show off our tweeting, friending, narcissistic selves as profile pictures without seeming the least bit vain (à la myspace). And darn they're fun to use.

The latest is AMC's "Mad Men Yourself," and this one has an interesting backstory.

In case you don't feel like reading my 20-page "Representing and Misrepresenting Yourself on Social Networks" report about online identity, a little background might help. Mad Men is a television series on AMC, now in its third season, which centers on the high-powered world of Madison Avenue advertising agencies in the 1960's. Think David Ogilvy.

The series quickly developed a following in both real and virtual settings, e.g. Twitter, because it appeals to agency/media/marketing people who also happen to be early adopters of Twitter and other social networks. A lot of these creative-types did some really neat things with the characters on the show, and AMC did some really stupid things and then took it back and a year later, wised up and created the following awesomeness, a perfect reflection of the "brand" that is Mad Men, and the "fans" such as Dyna Moe, who created the illustration for the site:

Congrats, AMC. You finally "got it," and your show is saved.

PS - Does the music remind anyone else of the old The Sims when you were in "buy" mode? Ahh elevator music. Never goes out of fashion.

PPS - Eight O'Clock Coffee gets a Brand + in my book for a perfect sponsorship deal:

Normal Conversations Now that Twitter's in Our Lives

My roommate and I both got into Twitter. Neither of us really knew why we started (do any of us really?) but our mutual following and real-life conversations have kept us in the nest, so to speak. Here are some of our more interesting offline conversations that would have seemed really strange a few months ago:

1. "CNN posted an article about Lance Armstrong today regarding a cycling incident. I checked his Twitter account to see if it was true, and he hadn't posted about it so I dismissed CNN's accusations until I saw his Tweet."
2. "I had 99 followers, and I really wanted 100, so I made my boyfriend a Twitter account and followed myself. I don't think he knows yet."
3. "Did you see my Tweet today?"
4. "We're Tweeple now."

What offline conversations do you have now that you didn't before? Do you ask people to "follow" you in real life, as you once asked them to "friend" you? Would your daily conversations be acceptable or weird to a non-Tweeter? What else has changed about the offline world with these online social networks? Will we ever go back...?