{Carrer web log} ←

Blog about web design & development

Twitter Unofficial Redesign

Tuesday, June 23, 2009 { 10 Comments }

I often ask myself why twitter software clients have so big success. Is it something wrong with Twitter management system or is it just trendy to use twitter clients (Api).

So I decided to try to improve Twitter’s management page. The problem with the Twitter management page is that it’s almost exactly the same as the twitter profile page. But the goals of these two pages are completely different.

Let’s start

The first thing that bothers me the most is the number of tweets per page on the visual screen. I use 1240px monitor and now I can see 7-8 tweets without scrolling. Twitter is all about the tweets. So the main point of my redesign will be to give more vertical space and importance to twitter messages.

I usually start with the typography and then build everything else. Currently in the twitters CSS we have something like "font-family: 'Lucida Grande', sans-serif and the line-height is: 1.1em " meaning that MAC users will see Lucida Grande and Win users will see browser default font (probably Arial). So, two completely different fonts for two OS. I love Lucida font and I will continue to use it for this redesign. But now with something like "lucida grande", "lucida sans unicode", sans-serif; so both Win and Mac users can see Lucida.

One other thing: line-height(leading) or the space between the lines now is 1.1em. Normally on the web we have 1.5em leading but probably for symbolic reasons (text compression) on twitter it’s 1.1em, but here readability suffers so I decided to increase it to point 1.3em for better readability.

The 1.3em for leading was not causal number but it was taken in base of twitter profile photo dimension. Now profile photos on twitter are 48x48px and that is great dimension. We have exactly 140 characters or three lines with about 50 characters per line. 40 – 60 characters per line is considered perfect line length in typography. There are some new theories that we read faster with longer lines but I think that 40-60 is most pleasant line length for reading. That is why I took 320px or 50-55 characters per line and to make sure that can be max three lines or (140 characters). So we have 48x48px profile image and three lines.

If we have 12px as default and 1.3em leading 12 x 1,3 = 15,6 per line, 15,6 x 3 = 46,8 or 47px. So three line of text with 1.3 leading will be perfect for 48x48px profile image and we will have better readability.

In order to gain more vertical space first I moved twitter logo to left and canceled the vertical menu merging it with right sidebar. Then I realized that having the twitter logo on left was bed decision and asked myself why I need the twitter logo on my management page? I know that I’m using twitter, the twitter logo will always be on my profile page but I don’t need any logo on my management page. So I eliminated the logo.

I wanted to implement partial grid design in order to distinguish profiles from the messages and giving more white space to accomplish harmony. And finally I had chance to try my new "O" theory of gutter size giving 14px for the gutter.

I started this redesign around February this year but I give more importance to other projects. Other thing was to reorganize the many and cancel mini profile images (to reduce HTTP requests) and insert direct search on the page, but Twitter in the meantime fix it.

But I did little re-organization of the menu (I can write another post only for that :) ) , for the number 140 I used Monospace font I wanted to simulate the numbers of old gas station. Also I think the message "What are you doing?" can be disturbing for some people. Why someone wants to know what I’m doing? Someone can fill he is being interrogated and turn on his protective mode. Why should I share? But one big Hi or Howdy or Hola can open many doors. So now is something like Hi Vlado! What are you doing?

And that’s it. From 7-8 tweets now we have 10-11 tweets without scrolling. There are still many things and details to be considered. But I read somewhere something like: "The result is when we are tired of experimenting… I’m tired :)"

Here is the page and you can download the page with CSS and some early versions of the redesign.

Link

Download project files

Please fell free to comment and suggest, twitter is all about the community :)

Note: This is just the prototype of the page. The people inside this page are some folks that I follow and respect on twitter I hope that they have no problem with this.

10 Responses to “Twitter Unofficial Redesign”

// Anonymous // 6/23/2009

I do appreciate seeing more tweets per page, but my eye has to cross the page more frequently. It's much easier to do a quick scan when the username is inline with the text of the tweet. For me, seeing more per page isn't helpful if it takes me longer to consume. On the other hand, it does make it easier to scan usernames alone.
// Vladimir // 6/23/2009

@capndesign: That is exactly my point. Tweets on one part username on the other. First you read the message and if it is interesting you search who wrote it. I had strange sensation that nobody was reading on twitter anymore. I don't know if this idea can help build better twitter but I little brainstorming can be helpful :)
// Andy // 6/23/2009

Personally I never read the message first. I follow 100 or so people but they are not all equal, and in my mind I associate their tweets with a reputation based on my previous knowledge. Some of my follows for example only tweet banal day-to-day activities, while others are sources of interesting links and/or their interests have a greater amount of overlap with my own. Thus, I almost always scan the username first before deciding if their tweet is worth the read. Having to look in two separate places in order to carry out this process is very tiring on the eyes.
// Vladimir // 6/23/2009

@Andy: I usually scan the profile photo or avatar. We all have twitter "favourite users" who earn our respect. I maintained the distance of the tweet and the photo. But with the main text(tweet) there is username, time and medium for tweeting altogether. Too much noise for my taste. I'm not saying that my solution is perfect, but I think that current twitter design specially management page can be improved. So lets all make creative discussion and help twitter. How do you fill about current twitter management page?
// About Me // 6/23/2009

check this out:

http://tr.im/pqew
// Jason // 6/23/2009

This is a really great start / idea.

I personally look at the pic/icons more than the name, and I definitely don't need to know when something was tweeted (most of the time).

Have you considered hiding the name / tweet-time unless user rolls over the user image? Might clean up the page even more and avoid the eye-jumping that most people are commenting about.

Of course, it won't be good for those that read the username.
// Unknown // 6/23/2009

What you really need is a formalized way to add URLs to the tweet.
// Vladimir // 6/23/2009

@Jason: I think user name is useful when you have many people that you are flowing.And you can not connect the photo with the profile name. Any extra action with the mouse (mouse over) will cost extra time. Also I did almost everything with CSS using java script (JQuery) is probably the next logical step of this design.
// Unknown // 6/23/2009

really... i don't like it. The trick for so much content, is a good use of white space ...

The design you just shown is just too confusing.
// Vladimir // 6/24/2009

@Pedro: I appreciate you honesty. But I think is easy to say: "The trick for so much content, is a good use of white space". I rather say the trick is making just "beautiful and efficient design". That is our final goal.But the question is how can we achieve "beautiful and efficient design"? You are saying that with "good use of white space" everything will be fine. I will keep that in mind.