{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 { 3 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 { 39 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.

O rule + golden proportion for calculating the gutter in the grid

Wednesday, May 27, 2009 { 8 Comments }

What is Gutter in Grid Design?

Gutter is the blank space that separates rows and columns in screen. Almost every web site is made of more than one column. The space between those columns is called “the gutter”.



So why is the size of the gutter important in web design or design in general?

I think that the space between the columns is extremely important and it can contribute for better reading, more elegant design and the harmony between grids (columns).

We (me included) almost every time ignore the gutter size. Usually we put 10px without thinking or if you have more designer “taste” you will try to adjust it manually and stop when “looks good”.

There is practically no (or very little) documentation about this problem on the web or in many typography or grid design books.

So I tried to resolve this problem.

First logical thing is that the size of the gutter should be bigger than one blank space of one letter. So the eye won’t jump to the next column.
But this space shouldn’t be too large to create the sensation of “empty hole” between grids.

I often ask myself why the site The Grid System looks so damn good. I keep turning back just to enjoy the view. I also love BBC and NY Times.

Every time when I tried to find the formula for the perfect gutter I finished with dead end. But last week when I made some experiments with the leading for Better Web Readability Project I find out that the perfect leading for my 16px gridlines was 1.625 very close to the golden proportion 1.618. I must say in the past I was very skeptic about this number.

Now I think inside that number is hidden the mathematical formula for beauty.

So I wanted to take the horizontal size of one letter and multiply the golden proportion. So what lowercase letter can we take that can represent all the letters? I think that the letter ”o” has the optimal form and is the best letter for this experiment.

Attention! Not all fonts have the same letter “o”. Different fonts have different horizontal size. Let’s try with Arial and calculate how many horizontal pixels it has.

This is the letter “o” 12px Arial zoomed 3200% so if you count the colored pixels you can see that are 8. So the horizontal size is 8px multiplied with 1,618 equals 12,944 or 13px.




So if you have 12px Arial the best size for the gutter is 13px. But this is just for Arial. For Lucida sans Unicode the size of the o is 9px so the gutter is 9 X 1,618 = 14,562 so you can choose between 14 or 15 px.

If you have bigger font you will have more pixel and bigger gutter.

All the sites I named before almost perfectly match this calculation. They all have beautiful grid system.

I called this rule O-rule.

Nota: The image of gutter is taken from Mark Boulton book "Designing
for the Web"

How we read on web and how can we improve that

Monday, May 18, 2009 { 12 Comments }

We don’t read! We scan!

80% scanning and 20% reading

We scan almost every time we are on search engine, blogs, news papers, various sites. And we read only when something is extremely interesting or useful.

When we scan no supercomputer is mach for us, we jump around the text, paragraphs, pictures with super speed.

Example from Google Search

I think we can consume entire chunk of text.

We scan a lot but we hate to read. Why?

Why the reading a book is so different from screen reading?

We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!

Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.

You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

Last week one of my students who was facing internet for first time sad that he had hated internet reading experience, so he is going back to paper.
So what can we do to improve internet reading?

First give more importance to the main content.

80% good reading content 20% noise

Make the sure that content is easy scanable and readable.

I was thinking to resolve this problem by some CSS Typographical solutions.

I made this open project Better Web Readability Project

I want to explain my solutions:

I started with the paragraphs - the main component of any text.

16px default font size. Oliver Reichenstein and Wilson Miner noticed before me and asked for bigger font.

I think we should wait for the big majority to pass to big monitors and then we can use bigger font for any site.

"lucida grande","lucida sans unicode", sans-serif are my personal choice for the paragraphs.

Other problem is: what should the leading or line-height be. I always use 1.5 line-height but bigger font needs bigger leading so I changed to 1.6em and ultimate correction was 1.625 in order to fit in 26px grid line. I was really happy with the leading - I tried bigger and smaller but 1.625 was perfect. Then I realized that I saw that number before, ahh, bang?! 1:1.618 is the Golden Proportion! First I saw the beauty then the number so I called the Golden Leading. 1.625em <> 1.618, but it’s OK for me.

I also wanted paragraphs to be super distinguished one from another for better scanning so I broke the typography rule - new line or indenting for new paragraph. I use both new line and indenting. 26 px or 1.625em was very big jump from one to another paragraph so I broke the perfect grid line and I reduced that jump to half 1.625em/2 = 0.8125em.

The color of the paragraph is #111111 and background-color #FFFEF0 in order to lower very big contrast monitor letters and to give worm book welcoming.

And the last thing Line Length work best with 480px column around 60 characters per line. Try to be near this number and not to pass 580(600px).

I used Serif (Georgia) for the Heading.

I took and recycled almost everything else: lists, tables, images, comments etc. from typography component of my The Golden Grid and Emastic.

And result: Better Web Readability Project - CSS Library

I’m waiting your comments and suggestion

Geo Twitter (#ll)

Thursday, May 07, 2009 { 4 Comments }

For days I was trying to figure out how to connect Twitter to Google Maps. Trust me is not an easy task because Twitter Apis can give very limited info. And that info is not very precise, for example you can tweet from New York. But New York is very bigggg. I wanted much more precision were exactly from New York you are tweeting or from any other place on earth?

Then I figured out that it’s “mission impossible”. No detailed Twitter API info means no project. And I quit my idea. When I was writing one of my previous posts: “Twitter is not about you, it’s about the community” - Bang! It all came to me. Twitter is community and community is twitter. The idea was born!

Why not just write the Geo coordinates inside your tweet!? It was so fuck*** simple!
After little work and thinking the result:

#ll 0.000000,0.000000

#ll tag stands for Latitude and Longitude. Every space is precious on twitter (that is why I’m using only two letters plus # for the search query) and the geo coordinates separated with coma with no spaces between them.

I think that this tag can revolutionize the way we Tweet. Imagine there are endless possibilities how to use this tag! You can tweet exactly from your office, coffee shop, restaurant, park. You can find who or where is the closest twitter.

Here are some possible scenarios(tweets):

I’m drinking delicious coffee at #ll 40.590362104893345,-73.96055102348328

A lot of traffic at #ll 34.079038136047444,-118.41562271118164

Who wants to join me at: #ll 40.7284295591591,-73.99197578430176

Don’t go there! Aliens just landed #ll 37.240332,-115.816032

For now I have built Twitter Geo that takes the last 20 tweets and inserts them inside Google Map.

The application Geo Twitter #ll

If this project has more community support I will build an application for iphone and other mobile devices that can support Google Maps.
For now you might have around 20 min delay, I'm working on twitter approval for faster apis.

But now everything is in your hands, folks.

If you like this idea you can help by ReTweeting!


P.S Special thanks to my friends Branko & Michele for their support and consulting

Handcrafted CSS + HTML Grid Calendar 2009

Tuesday, April 28, 2009 { 8 Comments }

Some time ago I saw this link Best of Calendar Design (via CSSGlobe) and I decided to make some experiments with css and grids in order to make CSS Grid Calendar for 2009. First I started to experiment with excel and in the end the result was: Google spreadsheet

I had two problems: the names of the days were in Italian and all the dates were taking too much vertical space. The solution: no names, no dates - just numbers. The numbers are universal. As a reference I took Sunday. It’s bold.



After some usability critics of my colleges I decided to change the concept and to add Monday to Sunday and I to XII. The result:



And you can download The Grid Calendar (zip)