Not so Yellow

View Project

By

Prateek Rungta

Published

11th June ‘10

Description

Twitter is great. Definitely my kind of social network.

As good as it is, the current web interface does not make it easy to browse historical data. Anything older than the latest 100 or so tweets requires a lot of clicking and manual scanning. Their search too, understandably, only covers updates spanning back a week or so. Anyone who’s tried to revisit their tweets from an year or a couple of months back has surely felt the pain.

There had to be a better interface for browsing tweets. What surprised me, though, was that no one had created such a service for the nostalgic folk on Twitter. I did come across a few custom solutions: Doug Bowman (the design lead at Twitter) for instance, set up a WordPress archive; Andy Graulund built a custom LAMP app.

The idea of my own Twitter archive appealed to me, didn’t sound like a massive amount of work, and out came Not so Yellow.

Not so Yellow homepage

Design

This project was the result of my grievance with browsing old tweets. Before anything else, it had to have a super easy interface for getting to tweets from any specific month or year.

I toyed with several ideas: listing all the years and months upfront; as drop–down menus / expandable lists; months from the current year upfront, with the full list on a separate page or down below; and, side by side.

Not so Yellow screenshot of tweets in the centre flanked by archive links on both sides

As you can see above, I ended up adapting the side-by-side option. This design keeps the content (tweets) centrefold and topmost in the the visual hierarchy, and the year and month links as second-class citizens. Yet these navigational links are persistent and always available as soon as they’re needed.

Short Abused URLs

URLs are important. URLs are part of a site’s design. Cool URLs don’t change. An unfortunate consequence of Twitter’s awesome 140 character limit has been the blown-out-of-context URL shortening craze. While these shorter links definitely do a great job of conserving precious tweet characters, they are usually less readable, obfuscate useful information and — as was dutifully demonstrated by tr.im — provide little guarantee against massive link rot. They should, in my opinion, be used sparingly, only when absolutely necessary.

Well, here was a chance to do something about the shortened URLs under my control. And something I did. It wasn’t as straightforward as I hoped though.

My initial plan was to simply follow and look for redirects for all incoming URLs, and replace the tweeted link with the address of the final destination. Turns out:

So, I scratched my URL replacement plan and decided to provide inline expansion, similar to the ‘(expand)’ short URL suffix on Summize (now search.twitter.com). Expanded URLs, when applicable, are added to the tweets as [+] links.

Screenshot of expanded URLs on mouseover

Tooltip via the generated CSS content:attr(href) property.
No JavaScript.

The fully expanded link addresses are displayed as tooltips when the mouse moves over [+]. Thus, a user has the option to simply click the original short URL or preview and directly click through to the final destination.

Should, Could, Would

Should

Search, obviously.

Could

As Rakesh graciously pointed out, this could be opened to support any user, and do for Twitter what Justin Ouellette’s ihardlyknowher does for Flickr. Not so Yellow does archive tweets from multiple accounts (and can support a few more), but it wasn’t built as a public service.

Would

Perhaps at a time when I haven’t got 4 other projects stretching me thin.

For now, if you’re interested in archiving and/or browsing through your own tweets, take a look at Doug Bowman’s instructions for WordPress. Alternatively, download and install Andy Graulund’s well designed, fully featured, open source LAMP project Tweet Nest. Or ask me nicely.

Credits