Design Spotlight: New Twitter

Twitter is slowly rolling out their new, more application-like interface. Some of you may already have had a chance to give it a test drive, but there are still plenty of tweets along the lines of “I want New Twitter! Why does everyone have it but me?” It seems like now is a good time to take a look at New Twitter, before everyone has it.

The bar floating at the top is statically positioned, so it’s visible as you scroll. This is handy, as you always have a button to post a new tweet within easy reach. Clicking it launches a pseudo-window overlay. It’s nice to have when you’re off looking at someone’s profile or putting together a List.

Profile pages look nice, but the wider page layout hides most of the background image on smaller monitors now. True, there are more people running around the internet with 27″ LCDs than there were five years ago, but there are also plenty (like me) using 13″ laptops. It’s perfectly usable with a 1280×800 screen resolution, but most of the background image ends up underneath the content area. The partially transparent right-side pane is a nice touch, though.

What did making the page wider gain in trade for the background issue? Nifty (and useful) sliding panes. When you click on a tweet in the timeline, a panel slides out to cover the now-wider right sidebar. It shows the tweet along with the conversation it’s part of, replies to the message as well as the post it was in reply to itself. The pane is also used to preview linked images or video right on the page.

If you click on a username, the sliding pane shows a miniature profile page, which seems to replace the “Hover Cards” seen in the previous incarnation of Twitter. A “view full profile” link takes you to the full profile page.

The panes remind me a little bit of the screenshots I’ve seen from Tweetie for iPad.

The new Twitter is much more AJAX-y. The data in the panes is all loaded via AJAX requests, tweets are loaded dynamically with an “infinite scroll” feature, and the page constantly polls for new tweets. When new ones show up, a little message bubble appears (and the page title updates, like GMail, with a little count) and prompts you to load them.

This is actually good for Twitter. It takes less server resources to generate and serve a tiny JSON response than an entire web page. If you multiply the savings over the millions of daily page requests the Twitter servers have to handle, the load has to have lifted significantly.