Carrer Blog

Serif vs. sans-serif legibility

2009-10-27T01:03:00.023+01:00

Probably one of everlasting discussion is legibility issue of serif and sans-serif fonts.

So I made some experiments in order to clarify the issue.

First thing I tried Jost Hochuli theory that we need only upper half of the letter in order to understand the text.

What is this?

Can you recognize this four letters?

What about now?

Left to right ( C Arial, C Georgia, O Arial, C Georgia)

So we have the upper part of the letter C and O (sans-serif Arial) and there are looking exactly the same.

C and O(sans-serif Arial) have exactly the same shape.

Our eye will try to close the missing part of the letter C and make O or circle.

There is one beautiful article about this: Gestalt Principles of Perception - 5: Closure.

In the case of C serif the barb will prevent our eye for closing the full circle or O.

Conclusion: Our eye can read faster serif because the logical line stops and we can faster "close" and determine the shape.

Serif and sans-serif on monitor

There is general opinion that sans-serif work better on screen.

That is probably because the monitors are displaying px so sans-serif look much cleaner. Serif fonts, specialy on low resolution monitors can look "noisy".

Can you notice the pixels in the right I letter?

In my opinion sans-serif give sense of order and clearness and display better on monitor, but clear and beautiful is not necessary readable.

Maybe the real question is do we prefer beautiful or readable.

Other interesting study( theory) was that we are fast reading Times New Roman because Times New Roman is everywhere specially in the newspapers and books.
In other words we are use to read Times New Roman and with time we get better and faster.

And probably the most important thing is the quality of the font. No matter if it is serif or sans-serif poorly designed font will give poor results.

Summary: A priori probably well designed serif fonts are more legible then well deigned sans-serif fonts. Then comes the experience factor, how often we read that particular type of font and how much we are use to it.

What do you think?

CSS Specificity Coding Method

2009-10-12T02:16:00.009+02:00

Few days ago I was reading the interesting Four Bubbles Model that inspired to think some alternative ways to organize CSS code.

One of the first thing you learn is the lower is better or:

.name {color:blue;}
.name {color:red;} /* the winner */

The class .name with red color overwrites .name with blue color.
So our logical assumption is the lower the objects are in the CSS they are more specific.

In the age before firebug I was spending a lot of time determining why "the color is red" and what part of CSS determines why should be red.

So if I order my CSS by their Specificity the search should be very easy, I should start from the bottom to the top. If you don’t understand how CSS Specificity here is CSS Specificity Cheat Sheet and some useful links.

Example:

Elements
p{}
a{}
ul li {}

Classes
.name{}
div.name{}

ID’s
#header{}
#sidebar{}

#footer{}
#sidebar li {}

Maybe most popular method now of CSS organization is thematic approach or we have something like:

CSS Reset

CSS Layout

CSS Typography

CSS Other

There is nothing wrong with this model and we can improve it by adding CSS Specificity.

Elements

Reset + Typography other elements

Classes

Layout Classes, Typography Classes other classes

ID’s

Layout ID and other ...

Here is practical demo .css file: CSS-Specificity-Model.css

Also live "lorem ipsum" working example: CSS-Specificity-Model.html

or you can download .zip of the example.

Note: The code used for this example is mainly taken from The Golden Grid - CSS Framework

In my opinion there is no perfect model for organizing your CSS, this model is just one way of approaching CSS.

Some other useful link and coding models:

Practical, maintainable CSS
Progressive Enhancement with CSS

What you think about this model?

Designing typographical wallpapers for iPhone

2009-10-06T12:21:00.003+02:00

I recently discovered http://typenuts.com site about iphone & desktop wallpapers for font freaks.

I couldn’t resist and right away started to design typographical wallpaper for iPhone.
I what to share the design process with you.

First I discovered the size and resolution of the iPhone(480-by-320-pixel resolution at 163 ppi).

The second question what to display on the wallpaper?

Why not just simply "iPhone".

Lately I’m obsessed with the golden proportion and search of perfect proportion. So you can understand why I choose Helvetica for the first experiment.

Also I wanted to try Jost Hochuli theory that we need only upper half of the letter in order to understand the text.

The letter "i" is 89mm and "Phone" is 13mm who are part of Fibonacci numbers sequence .

Prototype:

and result:

The second is wallpaper is dedicated to Georgia and that beautiful ""g".

And the third is Ampersand from Palatino. I used 5mm for palatino and 55mm for amp sign.

You can view and download all at Flickr iPhone typographical wallpapers

or download everything .PSD(source) and .jpg

You can play with photoshop file and personalize everything.

Enjoy!

CSS Specificity - Cheat Sheet

2009-09-29T02:30:00.009+02:00

One of most common difficulties with CSS is determining what CSS rule will be applied on the page. That was my nightmare when I started with CSS.

But actually is not so hard to understand how these rules are applied and the order of CSS Specificity.

I created CSS Cheat Sheet that I hope it can help you understand CSS Specificity better.

Download:

CSS Specificity - Cheat Sheet(.png)

CSS Specificity - Cheat Sheet(.pdf)

CSS Specificity - Cheat Sheet(.xls)

CSS Specificity - Cheat Sheet(.ods)

There are many articles talking about this issue, here are some:

Calculating a selector's specificity

CSS Specificity: Things You Should Know

CSS: Specificity Wars

Everything You Need To Know About CSS Selector Specificity

Link Specificity

Specificity | HTML Dog

Understanding Specificity

Cheers!

Blog prototyping with Emastic using the Golden Proportion

2009-09-22T01:57:00.025+02:00

Our goal is to build blog web layout using the Golden Proportion and Emastic – CSS Framework.

More details on the Golden Proportion you can find at:

Golden ratio - Wikipedia

Golden Ratio in modern CSS - CSS Globe

Design and the Divine Proportion - Mark Boulton

I build 6 CSS Libraries(Frameworks) but Emastic is probably my favorite, because it is most likely one of the most complete CSS Frameworks.

Few things about Emastic.

Emastic is built with ems to improve usability.

There are three layout systems inside Emastic the basic built width em, one based on % and one based on positioning.

Emastic supports fixed and fluid columns.

The typography is based on baseline grid.

Let’s start prototyping!

First we need some measurements in order to start. We can take some modern layout 955 to 980 px . We know that the golden ratio is 1 : 1.618.

How can the golden ratio fit in Emastic?

If we take that the default width is 980px than will have: 606px and 374px columns. Closest to 606px in emastic is 600px(or 50em) and we add 600px to 371px which is equal to 971px(GP).

Ok,so we have one 50em(600px) column. What about the other 371px column?

No problem, we can always use the fluid column and the problem is solved.

So we need main column(container) with 971px or (917/12 = 80.916em). One column of 600px = (600/12 = 50em) in emastic is dl60 meaning div left 60em and for 371px column we need to use the fluid class.


<div class="main">

<div class="dl50"></div>

<div class="fluid"></div>

</div>

And this is it. We have blog template respecting the golden proportion.

Download the template (.zip)

4 useful Bookmarklet for Twitter, Google, CSS, SEO

2009-08-04T03:11:00.009+02:00

What is bookmarklet?

Bookmarklets.com:

Bookmarklet is a tiny program (a JavaScript application) contained in a bookmark (the URL is a "javascript:" URL) which can be saved and used the same way you use normal bookmarks.

Wikipedia:

A bookmarklet is an applet, a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page.

Techniacly speaking bookmarklet look like this:

<a href="javascript:alert('put some javascript after javascript:');"> bookmarklet </a>

The cool thing is bookmarklet is not a plug in and you don’t need to install it and works in every browser.

This week I was playing around with javascript and bookmarklets and I created some bookmarklet for my personal use. I think they can be useful for everyone.

FastTweet. I generally use the web interface for twitter posting. When I find some cool link on the web I normally do copy paste of the title and url. With this bookmarklet the process is automatic, inserting the url and title inside twitter. And you don’t need to give your twitter username and password.

AutoTranslate. Often happens some of my work to be translated or posted on some blog written on some language that I don’t understand. So I use Google Translate doing copy paste of the url and parameters setup. Now this bookmarklet will autotranslate any language(supported by GoogleTranslate) to English.

RedDIV. One of first things I do when I visit some new web site is to check up the site structure and CSS. Specially interesting for me is the DIV structure. So I build this "primitive" bookmarklet for fast DIV profiling, it will just put red border around the DIV. It also works in IE6 who has no fancy tools like Firebug. This tool is inspired from Jens Meiert post Diagnostic Styling Reloaded.

NoFollow is for SEO geeks. It simply colors nofollow links to yellow.

You can >> see and downlad bookmarklets here << .

Useful links:

How To Make a Bookmarklet For Your Web Application
Make a User Style Bookmarklet (I used for RedDIV and NoFollow)

Note:Like often happens I find out that "The Simpsons Already Did It" 5 minutes before the post.

Twitter Unofficial Redesign

2009-06-23T01:49:00.008+02:00

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

2009-06-11T05:10:00.003+02:00

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

2009-06-02T00:58:00.008+02:00

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

2009-05-27T12:34:00.010+02:00

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

2009-05-18T13:26:00.012+02:00

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)

2009-05-07T00:56:00.003+02:00

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

2009-04-28T03:04:00.000+02:00

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)

Is it time to move beyond 960? Not yet

2009-04-24T12:22:00.000+02:00

Yesterday Cameron Moll in his post asked – "Is it time to move beyond 960?"

Probably not yet.

Why?

Because there are still around 40% of users using 1024px monitors. We can NOT ignore that fact.

Maybe after few years when very big majority will have 1280 or bigger monitor then we can think about changing the 960px who has become standard for fixed design.

What will be the number new number to replace 960px?

I already said two months ago in my "The Golden Grid" post.

The number is 1200px

The number 1200 is divisible by 2,3,4,5,6,8,10,12,15,16,20,24,25,30 …
Also this number can generate clear and more compressible numbers like (100px for 12 column, 75px for 15 columns, 200px for 6 columns)

Look at this table

This means you can generate symmetrical web site with 4 columns(4 X 300px) or asymmetrical with 3 columns (3 X 400px) or 30 columns(30 x 40px).

You will probably say: But who needs 30 columns web site? Is it 1200px just to big?
You are right 1200px Is very big, but only if you are using 12px font!

Oliver Reichenstein and Wilson Miner sad before me Internet is not a Book!

We can finally drop 12px as standard and use 16px like default .
Also 1200px can open new forms of multi column grid design. More space can be used for more columns.

I’m not saying that then we all should switch to bigger fonts and grid design I’m saying don’t be afraid to change and experiment with new things.

Panta rei os potamòs

Twitter Compressor

2009-04-16T12:58:00.000+02:00

How much time you needed just one more character when you tweet? Always when I must transmit something important at twitter it is always more than 140 characters. Damn Murphy Laws!

Solution/s?

The solution is simple: Capitalization and Compression

Example:

RT @ArthurRimbaud: And everything grows, and everything rises!

RT @ArthurRimbaud: AndEverythingGrows,AndEverythingRises!

Yes this solution will not produce pretty readable text, but if we have a tiny url (who doesn’t tell much what you are clicking) why not use something like compressed text.

I built one small application that will compress and capitalize your text and will leave the spaces if you have: http:// , # or @.

Twitter Compressor (beta)

The Twitter is not about you, it is about the community

2009-03-31T02:34:00.000+02:00

The first time I joined twitter it seemed like some useless web 2.0 project. Why should I write to myself!?
I didn’t get it at that time. Now I get it: Twitter is not about me, it is about the community.

I want to share some personal suggestions about Twitter:

Put picture or avatar on your twitter page, you know how do you look like, we don’t .

Put link to your web site/blog, so that we can learn more about you. If you don’t have web site/blog put link to your profile on Flickr, MySpace, Facebook …

Limit yourself to 10 twitts a day. You are not only one who twits. And don’t do more than 2 post in a row. Give space to the other users.

If you are following something like 4000 people, you probably don’t care what people are saying because you can’t follow 4000 people .

Final thoughts: Twitter is truly remarkable tool of communication it is my opinion fastest and most effective to get your thoughts on web. Twitter is now growing super rapidly and I think we should all respect the Twitter “eco system”.

I know it is challenging to have many followers and to spread the word very quickly but In my humble opinion you should try to build natural links with other twitters, share your thoughts like you share them with your real friends and give space to other users. And remember twitter is not about you, it is about the community.

Google redesign (Google in a grid)

2009-03-12T03:15:00.000+01:00

Google line based results have served us well all these years. Line based results are great for text. But with increasing internet speed line based result are little outdated. Often we have pictures, videos (maybe sounds one day) inside the search result.

I think grids are much better when we want to integrate text and pictures (videos).

Why not give the users possibility to switch to grid layout?

What else can be improved in the Google result?

What about bigger font size and bigger input text box.

Here are four different examples(links):

Google Santana

Google Elvis

Text + AdWords1

Text + AdWords2

This was just a little experiment, when working on possible real redesign many other factors and tests like monitor size, number of columns in various monitor, were to insert various videos or pictures should be considered.

Why google shoud implement the grid based system?

First, grids can use the space better horizontally and vertically.
Much better experience for users.
More visibility for AdWords Sponsored Links, hence extra money for Google ;)

For this experiment I used Malo - CSS Library

F pattern or just simple triangle

2009-03-03T01:47:00.000+01:00

Couple weeks ago I read in Google Blog about their eye tracking research.

Jacob Nielsen called this pattern F – Shaped Pattern because it look like the letter F.

I was often wondering what is so special about the letter F. Probably Nothing. Because the shape is more like to be the triangle not the letter F.

Triangle is one of the most common shapes in nature, it will be more logical if we form same triangle pattern not to mention when we focus we always make triangle with our eyes and the focus point.

Ok, this "triangle" assumption is not based on some research study is just my observation.

I think if we need to make more serious research study on how we actually read on web we need to cover various parameters.

Then little psychology. What are we searching, what are our interests …

When you enter in some newspaper site what first do you look?

I think if you are football fan you will look for football sport results, if you like Obama you will search first for Obama.
Ok, big bold typeface may trick you for an instant but you will go and search for the things you actually care. And in this case we can’t have default reading pattern for all the users.

I started with the Google example. Lets analyze Google results.

First thing to do searching for something completely new. We shouldn’t have any knowledge about the topic otherwise we will select the things that we know. We need something like Turritopsis nutricula . Did you click on the Wikipedia site first? I did. We probably should eliminate all authority sites from the search result.

Let’s try with Saccharomyces cerevisiae. This is just the Latin name for ....
I actually scanned from top to bottom and I didn’t click anything. I think this is perfect way to get near to the possible default reading pattern. If is any.

What do you think?

The Golden Grid

2009-02-17T03:06:00.000+01:00

For some time now I’m devoted completely to Web Grid Design. First I built Emastic then Malo and now The Golden Grid.

Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features. Then the question is why build another grid system.

I was searching for the prefect web grid, playing with golden proportions, rule of thirds, symmetry, asymmetry, usability, monitor proportions, typography and the result came spontaneous - The Golden Grid. Why not share it with you :).

Philosophy

Dimensions

One, Two, Three - jump. Where is four? We usually stop at tree. Why? Three is the magic number. Three is a lucky number. Three is the fourth of Fibonacci. It is the first number that breaks the symmetry of 2.

I decided to build the golden grid based on this number.

3 + 3 and 3 + 3 + 3 +3 => 6/12 grid system

Default width 970px or 10px + 960px

780px is the number of past, 960px is the number of today and 1200px will be the number of the future (see the table link). 1200px is the perfect number for my grid system, but it's too soon for that. First I must wait the usage rate of 1024 X 768 monitors to drop under 10%.

Columns

In the 6 columns grid min. width column is 150px and the gutter of 10px.

In the 12 column grid min. width column is 70px and the gutter of 10px.

I stopped at 12 columns because I think 12 is ideal number for one web grid. 4 x 3 = 12 .When the harmony and symmetry of 4 meats chaotic 3 the result is 12.

Rule of Thirds (golden rule)

Wikipedia:

The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.

I love Wikipedia's interpretation of the golden rule -> creates more tension, energy and interest. But why?

This question still troubles me. Is it in our DNA, is it just the way we look at things or some fractal space and time distortion. Joke aside, I don’t have the answer, but that will not stop me to implement this rule on my grid :).

Typography

Using typography.css is optional in this project. Not all web sites have the same typographical needs. The main purpose is to give character to this project. If we imagine the grid as the naked body than typography would be the clothes.

I used ” lucida grande","lucida sans unicode" like main typeface. For titles H1 to H6 I used Georgia. I like to mix Serif and sans-serif fonts.

Image and Video size

You might consider some popular formats (4:3) and (9:16)

CSS building technique and naming system

There are two known div building techniques: floats and position. The Golden Grid uses float:left.
Class names g160 means golden 160px or grid 160px = 150px + 10px margin.
ml80 meaning margin-left:90px or 10 + 80px
Inside for needed divs and clear.
And this is it.

Similarity to other CSS project

There are many who will notice the similarity to some other CSS Frameworks like Blueprint and 960.gs and in some parts like my Emastic. Yes, the building principle is very similar - float:left, margin-left, structural naming system, px based columns... If you are familiar with these systems, you like their philosophy and you are not min. css file size maniac like me I don’t see the reason why change anything. They all do a great job.

The Golden Grid is not about how I build CSS web grids but why. It is result of almost one year research of web grid design.

The Golden Grid + Examples
Download

Cheers!

Sketchbook for web designers

2009-02-12T03:09:00.000+01:00

Recently I saw one cool sketchbook for designing web site mockups. The problem was I couldn't find out how to order one copy. The idea of that sketchbook was to simulate web browser on paper.
So I decided to build one.

First problem that we encounter when we are building web browser on paper is - what size should it be? We have monitors with different size. And we also have different paper formats A4, A3... First thing I did is to compare the most common A4 format with my 15' laptop. And i realized that A4 (210x297mm) width is actually my laptop monitor height or 210mm. A4 is perfect for building our sketchbook because it fits perfectly on monitor and is most used paper format.

What web browser should we simulate? From the ergonomic point of view I prefer Chrome or Safari. My final decision is Safari, because it is gray and it is perfect for B/W printers.
Ok, we have Safari on A4 paper and we can print B/W. Little work in photoshop and the final result is:

sketchbook(blank)

sketchbook(lines)

sketchbook(web 10px)

sketchbook(grid 100px)

In PSD file you will find everything you need Photoshop
Don't forget to set landscape when you print.

Enjoy!

Prototyping with Malo CSS Library

2009-01-26T23:16:00.000+01:00

Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites.

Benefits:

Ultra small (compressed is only 0,25 kb or 8 lines of CSS!)

Personalized width of the page in (%, px, em)

Super flexible

Easy to use

Malo is build of simple CSS reset and the grid system. You can personalize everything else.

Malo works on the principle that every column can be divided into two, three, four and five parts. It also supports nested columns meaning divided columns can be divided again and again forming complex grid.

Practically if we have one column of 100%
100% = 50% + 50% /divided in two

100%=33,33% + 33,33% + 33,33% /divided in three

100% = 25% + 25% + 25% + 25% /divided in four

100% = 20% + 20% + 20% + 20% + 20% /divided in five

Or more complex:

100% = 50% + 50%(33,33% + 33,33% + 33,33% ) / second half is divided in three

Can you see the potential?

Lets Prototype!

We want site which has 955px width (we can use % or ems), centered layot and looks something like this:

Header

Navigation

2 – columns

4 - columns

3 -columns

Footer

First you should the naming system of Malo we have only .dp (div percent) and .clear class. Meaning dp20 is div 20%.

And that is it!

Some code

Ok we don’t have the main center container, so lets build it:

.main {   margin:0 auto; width:955px; }

And the structure:


<div class="Main"></code>
<div class="dp100">Header</div>
<div class="clear"></div>

<div class="dp100">Navigation</div>
<div class="clear"></div>

<div class="dp50"> 1 Column</div>
<div class="dp50"> 2 Column</div>
<div class="clear"></div>

<div class="dp25"> 1 Column</div>
<div class="dp25"> 2 Column</div>
<div class="dp25"> 3 Column</div>
<div class="dp25"> 4 Column</div>
<div class="clear"></div>

<div class="dp33"> 1 Column</div>
<div class="dp33"> 2 Column</div>
<div class="dp33"> 3 Column</div>
<div class="clear"></div>

<div class="dp33"> Footer</div>
</div>

And the structure is ready!

We can add some text, pictures and navigation. In that case, we need some css:

We need to connect the main css library malo.css:


<link rel="stylesheet" href="css/malo.css" type="text/css" media="screen">

Then to add some extra css for navigation, images and border:


/* top border */
.dp100,.dp50,.dp33,.dp25{ border-top:1px solid #111;}

p { padding:1em 0 1em 1em;color:#111;}
p img   { float: left; margin: 0.3em 0.5em 0.5em 0.5em;  }
p img.right { float: right; margin: 0.3em 0.5em 0.5em 0.5em;  }
blockquote { padding-left:1em;  font-style:italic;  }

/* navigation */

#nav {
margin: 0;
padding: 0 0 0 10px;
list-style-type: none;
font-size:1.2em;
font-weight:700;
float: left;
}

#nav li {
margin: 0;
padding: 0;
float: left;
width: 70px;
}

And the final result:

The Result

Malo is tested almost in every browser. In IE you have around minus 1px for only column. IE doesn’t handle percentage calculation very well without this fix there is a possibility that the grid won't work correctly.

You can download Malo at: http://code.google.com/p/malo/

Formy CSS Framework out of Beta

2009-01-15T14:17:00.000+01:00

After long beta1 and beta2 test period Formy is in 0.8.

What is new?

I merged reset.css into form.css. I fixed some bugs in form.css and the code it reorganized giving you more space for personalization.
Now the form.css is made of reset, structure and color palette.

What is the idea behind Formy?
Formy is build to help you mange web forms in more natural way. No lists no tables just CSS and br for the structure of HTML .

What to expect from the new version?

More personalization(color palette)
Errors management

Examples and download at:http://code.google.com/p/formy-css-framework

2008 Summary Report

2009-01-01T20:31:00.000+01:00

This was one creative year!

Now my colleges cool me "Uomo Framework" or Framework Man. Probably because I build 4 CSS Frameworks at 2008 :)
I started with Hartija CSS Fraemwork for web printing.One client ask me to improve the printing layout for his site. I gathered all experience from the project I did some additional research of all best practises for usability, readability and web printing with CSS. And the result was Hartija universal CSS for web printing.

I always had hard times with web forms, rebuilding the same CSS code over and over. Why not this time build it once and use it in all web forms? Formy - CSS Framework for building web forms.

Than I couldn't stop here I needed new challenge. To build CSS Grid Framework who will resolve all the problems of the current CSS Frameworks( Blueprint, 960 and YUI).
The framework who will have minimum size, who will be fluid and em based (elastic).
And the result is Emastic giving optional main width, fluid columns, less then 4kb size, baseline typography, totally em based(elastic) structure, possibility of nested DIVs etc.

In the second and third version of Emastic in the plugins I added percent grid system and absolute grid system (based on absolute, relative positioning). Building one complete framework who will handle almost all CSS structural problems.

Then I stooped asking myself when you need so complex CSS Framework, probably if you building some newspaper site or site with very complex grid. But I presume you don't build newspaper site every day.
I took percentage-grid.css from Emastic I did some CSS refactoring and I build Malo super small and simple CSS Library(Framework).

One other PHP project completely deluded my expectations: MySql Lite Administrator, I worked very long and hard on this project but I didn't receive much PHP community love. Maybe there is already so much PHP code out there, but is always hard when your free project doesn't get much feedback.

Statistics:

Statistic 2008
Project Name:	Visits	Pageviews
Hartija - CSS Print Framework	21,987	35,731
Formy - CSS Form Framework	18,939	38,832
Emastic - CSS Grid Framework	34,391	78,444
Malo - CSS Library	17,195	35,731
MySql Lite Administrator	2029	4051

Plans for 2009:

Emastic,Formy and Malo out of beta.
I'm working on some new CSS things :)
Also on one PHP Framework.
I have at least 2-3 new ideas every day and little free time :)

Thank you!

I wish you lot of love and understanding at 2009 !

In the search of Holy Web Grid

2008-12-03T02:26:00.000+01:00

How can we build perfect web Grid?

Probably we can’t. There is no such thing as perfect web grid. But we can try.
What do we need? First we need some info and parameters.

The web grid is limited in horizontal and unlimited in vertical. Vertical limitation depends on monitor size. We have various kinds of monitors with 800, 1024, 1280 px vertical spacing.

We should choose one standard that will work for most of the monitors.
I think that 955px is the optimum width for a web site viewed on 1024 px and bigger monitors.

What about 760 (800 x 600 px) monitors?

Why not put all important info in the first 760px, for users with 800 x 600 px monitors to see all important info instantly.
Another more important motif for this is that we usually read from left to right starting from the left upper corner. Ok, if you read Arabic you will start from right to left or Japanese, Chinese up -> down.
Some researches say that we read in F-pattern.

Ok, we have the grid 0 -> 760 -> 955 px. The first 760 px are very important.
We need to divide the first 760 px, but how? What about using golden proportions?
The golden proportions are 1 : 1.61803 or 38.2% : 61:8. In our case will be something about 470 px : 290 px = 760 px.

Ok, now we have 0 -> 470 -> 760 -> 955(470 + 290 + 195 = 955) and this is our basic grid.

What if we want to break our columns into smaller units? We can use "The Rule of Thirds" dividing the first column(470px) into 3 units. The second column (270px) in two units. And the last live it like it is .

What do you think?

Emastic CSS Templates

2008-11-27T00:11:00.000+01:00

Free CSS Templates(Layouts) designed with Emastic CSS Framework

View
Download