{Carrer web log}

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.

Integration of Better Web Readability Project with Readable

Thursday, June 11, 2009 { 5 Comments }

In the "How we read on the web" post, I explained my hypothesis on 80% scanning and 20% reading.

Until we find something extremely interesting to read, we’re always in scanning mode.

I remember that, when I first started to read heavily on my monitor, I was printing everything on paper. So the second phase was reading the text optimized for printing and the third (current) phase was "no reading": I just scanned the text, and if said text was not super interesting -- causing me to switch to printing – I was basically tired after just the first phrase.

So I tried to the help improve readability on the internet by making Better Web Readability Project - CSS Library.

However, in order to use this project, you need to rewrite your web site. So, in general, it is not very handy.

About 2 weeks ago, by pure chance, I discovered Readable (A jQuery based bookmarklet). I tested on many web sites, and I must say I was impressed with its performance. So I almost instantly suggested to Readable’s creator (Gabriel Coarna) that we join forces.

Readable is an excellent bookmarklet that extracts the main text from any page and contributes to “killing” all the noise around said text. You can learn more at this link.

Hopefully, by combining the typography of the Better Web Readability Project and the text extraction method of Readable, we’ve managed to build an even better project. We hope it helps you read more of the internet, more comfortably.

Our final result is this bookmarklet (works in every modern browser):

Readable - download & personalization


You can contribute to this project by giving us suggestions on how we can improve both our projects – both separately, as well as the integration between the two.

1 line CSS Grid Framework

Tuesday, June 02, 2009 { 48 Comments }

This is the challenge of writing entire CSS layout system with one line CSS class.

I just wanted to prove how easy CSS can be, and with little imagination we can be build cool things.

I started with the principle that every column can be divided by two, becoming half column or 50% column.

So how can we build CSS Layout system with this principle?

One column can become 2 (50%) column or 100% = 50% + 50%.

So we can make 2,4,8,16, … layout system.

Believe it or not we only need this line of CSS code:

.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }

A little explanation:

.dp50 means div 50 percent

and we have floated left 50% column, display: inline; *margin-right:-1px; is fix for IE.

So the result is:

• Example 1
• Example 2
• Example 3

Download link

The system can be made to work with any main default size(px, em, %) something like 950px or 550px or 90% or 50em. This system works even in IE5.5, so you don’t have problem of multi browser compatibility.

You can use the system in many different ways.

Limits of this Framework?

The main limit is that you can use only 1,2,4,8,16 columns system plus some combinations like (50% + 25% +25%). If you have something like 16 columns you will have many nested divs.

Conclusion: This is just technical demo and I don’t advise you to use it in production. If you need something very small you can use Malo, it is just 8 lines of code and uses the same naming system but has to offer much more.

Building some "real" css layout system(CSS Framework) is much more complex work. Usually you project your layout starting with the typography . On the base of the typography you make the grid and the gutter.

I spend a lot of time searching for the best gutter or perfect web grid and searching the answer to the question "how we read?".

So I repeat, this experiment has pure technical nature of building relatively complex css layout with minimum CSS code.