Carrer Blog

Opera 10.50 for one week - Summary

2010-03-15T02:10:00.014+01:00

Last week I started an experiment to use Opera 10.50 like primary browser for week.

Thank you all for the wonderful feedback and support.

Here are the results: Opera is really fast and fluid. And is real pleasure surfing the web.

If I need to define Opera with one word I would say: Opera is Linux. Why is that?

They bought have Scandinavian origins, both have small market share, passionate community support, Linux have problem with drivers Opera with plugins. Big companies have no interest developing drivers or plugins because of the small market share. So community developers must provide them.

And the final truth Opera is build from programmers to programmers.

So my slogan for Opera is "Opera from programmers to programmers".

Problems I encountered in Opera. Many advised me to use Opera 10.10 like more stabile version. This is probably true Opera 10.50 sometimes “forget” to render the page. Also RAM garbage collector is not fine tuned.

And the big issue the User Interface.

In Opera you can personalize everything and I have no problem with that. I have problem how you do that.

So I wont to dedicate this part of the post to express my Opinion on how I imagine Opera. I like to give my small contribute and help Opera improve.

First the plugins, because Opera small market share the developers prefer to build plugins for Firefox. So it will be wise Opera to build some tools for easy plugin development. So the developers can easy switch and build plugins for Opera.

I’m more fan of bookmarklets because they can work in every browser, but sometimes plugins can be very complex and can’t be replaced with bookmarklets.

The interface:

It can be pretty confusing. With the web we are used of the philosophy “Don’t make me think”. For me good interface is one who starts simple in the start but in the background you can personalize almost everything.

So I open Photoshop and tried to make my personalization of Opera. In other words mini redesign of Opera.

The main idea is when you start with Opera to have few things that you really need. Imagine some IE7 user who wants to try the new Opera browser because he heard that is fastest but with the first impression of Opera he is "dazed and confused" and he leaves Opera forever for IE8 maybe.

Keep it Simple and Don't Repeat Yourself

The default start

Opera with all the menus

Download the Photoshop file with the design

And this is it. I think there are many menus that actually nobody uses.

With the default settings of Opera you can navigate, search, zoom, print, bookmark. Nothing else.

If you need to configure Opera Turbo or Opera Unite go to the configuration options in the background options and configure it. If you are advanced user and you need to download torrents go to opera:config configure it.

So again "Keep it simple" for the normal user and leave all the complex stuff in background for advanced uses.

Dragonfly is cool. Specially for me like CSS guy Dragonfly is most important tool. Here are some ideas what can be added to Dragonfly. What about CSS redundancy checker? It could useful for many web designers. Also one thing that I can’t find anywhere, speed simulation directly from the browser. I think that Dragonfly need something exclusive and original in order to be used over Firebug.

Also I think can be handy to add some tools for Mobile development and testing directly from the web browser. I know that there are some online tools like Opera mini demo . But I think that having that tool inside the browser can be cool idea.

Few words about CSS3 - great job Opera CSS team. I really love the Opera strategy about CSS3. I will probably dedicate one post about this issue.

There are probably many other things that can be discussed and talk about but I will leave the comments for that.

Summary: Opera is fast and more important once the page is loaded the navigation is smooth and fluid.
Main issues are confusing UI and plug-in support that with little effort can be resolved. Opera is definitely going in right direction.

Will I continue to use Opera like my default browser? I don’t know. I’m plugin dependent I use plugins for everything (Twitter , Color, Seo, The Grid, Measurements, Spelling, Cookies all Social Network …) . Probably that is the only reason why I’m bonded with Firefox. So for normal browsing I will probably use Opera and for work Firefox.

Question I will you leave you with: What you love and hate about Opera? And what Opera should do to become better browser?

Initiative - Opera 10.50 for one week

2010-03-08T04:59:00.003+01:00

We people are very good in supporting initiate for killing things RIP IE6 but sometimes we fail to give support when something good and cool happens.

Maybe you heard Opera 10.50 is out and is fastest browser in the world.

I’m passionate Firefox user mostly because of various developer plugins and simply because I used to use Firefox.

For me Opera was just test browser for testing my web sites, but often thought that Opera deserves more attention . I was always fascinated by the small Norwegian company that had always good browser but very often bad marketing strategy. Opera was not always free and if they relisted the free version when we had only IE and Netscape, Opera would probably had different market share today.

I want to call up one initiative: Opera 10.50 like your primary browser for one week.

So give Opera a chance. Test it. Use it.

Why to use Opera?

Fastest JavaScript engine - Carakan

CSS3 and HTML5 Support – (For me personally like CSS Framework builder this is most important part)

Opera has invested a lot in full support of CSS and HTML standards . In early days Opera had big issues with compatibility and standard. If I hate some browser more than IE6 it will probably be Opera 7.

But today among Opera staff we have Håkon Wium Lie the father of CSS, Molly Holzschlag , Bruce Lawson , David Storey , Chris Mills and probably many more that I don’t know.

This people are guarantee that Opera will follow the path of Web Standards and HTML5 and CSS3 implementation.

There are many other features that Opera provides, but for me personally is interesting is dragonfly ( It is like firebug for Opera). ). I will try to discover new plugins and addons this week.

I recently discovered Opera Widgets it is something like Adobe AIR but with less RAM consumption.

I also discovered that with Opera you can download torrents, I probably will never trade uTorrent for anything but it’s cool to know that you can actually download torrents with the browser.

Why I’m doing this experiment?

Probably because I want to try to survive one week without Firefox and the second thing I meet two Opera team members last year on one web conference(Molly and David) who ensure me that Opera is going in right direction.

Again. The experiment is use Opera 10.50 for one week like your primary browser. In this week try to find all good and bad stuff about Opera. Than is up to you if you continue with Opera or not.

Are you willing to try this experiment with me?

Update: Opera 10.50 for one week - Summary

Quark – mini php CMS

2010-03-01T01:01:00.002+01:00

Quark is probably the smallest Content Management System build with PHP. It’s actually build of one PHP function.

It’s meant to help web designers to manage small web sites.

Why I build it?

I work mostly for one firm where we hand code everything. When we build web site we start from scratch. So we build the web site and the management behind the site for our clients, often the management behind the site is more complex then the web site itself. For every site the programming and web logic is different. That is why we need a lot of time to build everything, result we are expensive.

In order to be more competitive for the clients with the less budget we tried to use Joomla. We get very enthusiastic at the beginning specially the part where we don’t have to develop the admin part. But after two years we realize that the time for developing is almost equal but we charge less. Other problems we pray that hackers don’t attack us, that component developers give continuous support and the critical point how you debug 3000 – 5000 file monster. I repeat 3000 php files for one web site … WTF!? Don’t get me started about the quality of HTML , CSS and quality of major of Joomla templates.

So I tried to try to resolve the problem, first I tried to build system that will be able to automatically manage any MySQL database by creating MySql Lite Administrator. Only thing is you need primary key in the tables . Everything else is automatic.

Then I wanted to build CMS for the front, but I didn’t had time and I right “philosophic” ideas how complex should be the system . Then I sow CushyCMS and liked the simplicity but didn’t like that you should change the CSS logic in order to work. Then I saw the video on Drew McLellan's - Perch and I sad this is it! This is the principle that I was looking. So I decided to start from Perch idea and build something damn simple.

So I did it, one PHP function and one MySQL table. And this is it. I name it Quark after the Quark particle . A quark is an elementary particle and a fundamental constituent of matter.

The principle is simple you replace text or html with . So you can put plain text or html for links, images, link list and many more.

If you have very simple site and you want to edit few things like menu, some text this is right solution . I think with little creativity you can make a lot of stuff. The main point to this project is to add dynamic parts to your static small site. So you can build static HTML + CSS site and then make editable some parts like menu, text, links, images est.

Quark does not mange forms so you can’t use it like blog platform. Quark is not meant to replace big CMS like Joomla and Drupal.

And for the management of the DB you can use MySql Lite Administrator or build your own managing system.

If you need to manage forms, resize images ,multilingual support you can purchase Perch or some other small CMS.

Some technical details: Like I said before Quark is made of one php function and MySQL table. You can use PHP4 or PHP5. The php function is extremely simple to understand so everyone with little knowledge of PHP can understand it. My goal was to make very fast MySQL interrogation I was experimenting mainly with mysql_fetch_array and mysql_fetch_row and the results are there are no notable differences.

I tried to run 25 calls(20kb each) to database with total amount of 55.000 words or 85 word document pages with Lorem ipsum text time of execution 0.1 seconds and 0.09 MB Ram. My point is this thing is quick even if you have large amount of data.

How to use it?

There are three columns inside the DB table called quark_table one columns is content and another called name_tag.

quark_table
id	content	name_tag
	Put any content inside lorem ipsum, HTML ..	ipsum
2	Any HTML or text	any_name_you_like

So inside HTML you can call the or .

Important to remember that you can choose any name you like so you have absolute freedom of naming your tags. The names should be unique.

And that is it.

When to use it?

Imagine that you have 10 page pure HTML + CSS site the client ask you to add one extra page on the site and to put one link that that will lead to the new page. If you have the same link structure in all 10 pages you will probably go page to page and change manually all the pages.

Or with Quark you will make something like and change it just once.

Same goes for all the repeating multiple parts of your static HTML like header, footer obviously depending on your site architecture.

Download:

Download Quark +DB Structure + Demo

For managing MySQL table you can use MySql Lite Administrator

Disclaimer: I wasn’t sure how to call this project Is it CMS, Is it PHP Template engine or just one simple nifty php function. In some way this project Manages the Content so Content Management System it is.

The Golden Grid PSD Template

2010-02-10T02:40:00.006+01:00

If Emastic is my technically preferred CSS Framework The Golden Grid is my elegant pride and joy.

Recently I stumbled upon this Blog post that gives free PSD Template for The Golden Grid. Elegant and simple 20kb zip solution. I’m always super happy when I see that people are contributing and sharing things . Thank you Altzgamer.

I also had some unfinished PSD Template for The Golden Grid . I find some free time to complete it.

There it is:

You will find all the grids and recommended image ratio.

If you are not familiar to The Golden Grid here are some thing that this CSS Framework offers:

Simple naming system

You can build hundreds of grid variations

The CSS grid is less than 1kb (compressed)

Custom based typography

Works in older browsers

Download Photoshop Golden Grid PSD Template

WikiReader – bookmarklet for Wikipedia reading

2010-02-04T09:12:00.007+01:00

Probably there is no day that I don’t consult Wikipedia site. I think that we all frequently visit Wikipedia site and enjoy reading its content.

I wanted to create Kindle like reading experience for Wikipedia reading directly from your browser.
There are already two great bookmarklets who are doing great job at this Readability and Readable. The problem is they are optimized for every site not for Wikipedia.

So I liked to build Wikipedia only reader.

Here is an example.

Wikipedia before:

After:

How I did the bookmarklet?

I took Wikipedia CSS file for web printing and I made some changes and then I used this tool to make the bookmarklet . Pretty easy :)

What I changed inside print CSS style?

Bigger font. Black for the text. Gray for the links. Serif. Georgia. Bigger leading.

With few words Big Georgia font probably means super readable text.

I don’t want to bother with my design decision or typography decision if you want to find more about opinion about web typography browse these articles:

Serif vs. sans-serif legibility
How we read on web and how can we improve that
Azbuka - CSS Typographical Base Rendering Library

>> DOWNLOAD WikiReader bookmarklet <<

(Works in Firefox and Chrome in Safari 4.04 brakes for some reason does not work for IE)

How to use the bookmarklet? It is super easy after you Drag & Drop the link to your browser bookmark toolbar go to some Wikipedia article and click the button(bookmark).

If you still don't know what is bookmarklet and how they work here is Wikipedia article about bookmarklets.

Enjoy your Wikipedia reading.

CSS Shorthand Clockwise Rule

2010-01-26T04:23:00.009+01:00

When I started with CSS one of the most confusing thing was the shorthand rule. For example:

margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;

Also can be margin: 1px 1px 1px 1px ;

Which is which?

If I remember correctly I watched some videos on Lynda.com for CSS, that I heard about the Clockwise Rule end everything was much more clear.

Basically the first is the top margin and everything is going Clockwise right, bottom and left.

I know that many of you are familiar with this rule but also many others are starting with CSS so I hope this can be helpful.

I design this clock only thing to do is match the colors.

We have 4 parameters it starts from 12 o'clock or top-margin and goes clockwise 3 o'clock or right margin, 6 o'clock bottom margin and 9 o'clock left margin.

With 3 parameters:

With 2 parameters:

With 1 parameter:

Did I mentioned that you can do the same thing with padding.

That is it.

P.S If you are beginning with CSS you can also find this article useful: CSS Specificity - Cheat Sheet .

Calendar 2010

2009-12-23T04:35:00.010+01:00

First I will start some with some self-criticism this is perfect example when design fails to be effective. If the propose of the design is to be simple and self explaining this is not the case. This is the example when you need the manual to explain the design. And I hate that.

So why I did it. In this case I wanted to be design for design (L'Art Pour L'Art) maybe because I need to go around my "everything should be usable" principle.

I imagined that the design of the calendar should be circular, Earth takes about 365.25 days to go around the Sun making elliptical trajectory and that is one year.

In astronomy, unlike geometry, 360° means returning to the same point in some cyclical time scale, either one mean solar day or one sidereal day for rotation on Earth's axis, or one sidereal year or one mean tropical year or even one mean Julian year containing exactly 365.25 days for revolution around the Sun.
- Wikipedia

So symbolically I used "round" design and the final result is this:

The bolded numbers like 7,14,21,28,35 are Sunday. So the numbers represent the days of the week. So one is not one is Monday. The circle line starts from the first day of the month. For 1-st January (the white line closest to circle numbers) we have Friday or 5 so we starts from 5 + 31 days and ends up 35.

I also made a mathematical model and heat map of the average temperature range of all the months and seasons. To get more simple white is cold , black is hot.

You can see more details here : Spreadsheets

Play around with the Illustrator .ai file: Calendar2010.zip

Bookmarklet for Google Dictionary

2009-12-09T02:45:00.003+01:00

Few days ago Google silently publish their new product called Google Dictionary. It is very cool product because unites google web search, google images and classical dictionary.

I build one small Bookmarklet who can help you use this product in "remote".

How to use this bookmarklet?

First go to this page and Drag & Drop the link to your browser bookmark toolbar.

Then select any English word from any place on web and click on Google Dictionary Bookmarklet in your bookmark toolbar. And that is it.

What the bookmarklet does is saves you time for copy and pasting the word and searching the Google Dictionary page.

Here are some other bookmarklets that I made in the past and the explanation what are bookmarklets.

Also this one is very useful and I use it often.

Fine

To Do List (A4 Paper – Grid Design)

2009-11-30T03:50:00.005+01:00

In the office we all have A4 format white paper for printing and almost always we print only on one side. Happens often we are not happy with the print and we threw away the paper or the blank side can be reused for re-printing.

Lately I’m having trouble getting organized, many ideas little time. For my long term projects my Moleskine works great, but I need something super simple to organize my week. I know that there are millions of other electronic or paper solutions (notebooks, organizers) but they didn’t work for me in the past.

So I decided to build A4 grid based To Do List. So I made simple A4 modular grid.

Invisible grid:

The final result:

Or:

So now I can use the non printed side of A4 paper for creating my weekly To Do List.

Like I did in the past I will share everything with you. Maybe someone also will find this thing useful and try to reuse A4 paper.

Here are the files: .PNG (300 dpi) and Photoshop .PSD

You noticed everything is essential there are not hours like 9.00, 10.00 … to provide maximum customization.

How you can use it?

Open the .png file and print it in landscape mode. And that is it. If you want also pocket size format take the A4 paper and curve in half and other half and other half. The grid lines should match the white space.

And you have your own pocket size or extendible A4 to do list.

Enjoy!

Note: Feel free to optimize everything for your needs inside Photoshop PSD file . For the font I used Helvetica but in the .PSD is Arial for multi-platform compatibility.
If you are paper prototype lover check my previous experiment Sketchbook for web designers

Azbuka - CSS Typographical Base Rendering Library

2009-11-16T02:48:00.008+01:00

Azbuka is CSS Typographical Base Rendering Library. It’s meant to make meaningful web typography based on the golden proportion.

I recently ask myself about the true meaning of web typography and on what base was first projected. I had many question but few answers.

My goal is to re-program current standards of web typography using The Golden Ratio and Fibonacci sequence (0,1,1,2,3,5,8,13,21,34,55….)

There is almost no typography book that is not talking about the golden proportion. I was very skeptical about this rule in the beginning , but now I truly believe that there is something magical about this number.

For me the golden proportion is mathematical search for beauty.

This is why I choose this rule to be main base for this project.

Other question that bother me recently is the question of 12px like main standard for web text. Why we are using 12px for the text? Probably from the book standards 12pt.

But internet is not a book! I wrote more in my previous article "How we read on web and how can we improve that".

Big text size is more readable, small text is more elegant and feats better in the grid.

So the compromise can be 13px font size, text for universal use.

For this project I choose Arial for the main text. Why Arial?

Negative: Arial is not so legible like serif fonts. Arial is cheap Helvetica.

Positive: Arial is everywhere. Arial looks good on screen. Arial is safe web font.

Actually we have only few sans-serif safe web fonts who can be seriously considered for the text: Arial, Verdana ,Trebuchet MS and Tahoma.

I tried all web safe sans-serif and serif 13px and one thing that always strokes me is how incredible Helvetica in my case Arial is. Unfortunately I can’t use Helvetica because is not web safe font and also I don’t want MAC users to see Helvetica and Windows Arial. So for the text Arial for everyone.

Golden leading

Line-height: 1.618 . I first time I discovered the power of this number with Better Readability Project.

When I build the typography for Emastic I have one big problem the line length.

I couldn’t adjust the typography to work well for the bigger and shorter lines. But, with the golden leading for the first time I don’t have this problem the text inside 400px container or 800px looks good.

I think that with this number I achieved elegance and readability in the same time, probably the leading Is the key feature of this project.

Georgia for Headings

Georgia is elegant. Georgia probably is only safe web font that looks good on screen .

Every number for the Headings is taken from Fibonacci spiral.

Elements:	Size
H1	34 px
H2	26 px
H3	21 px
H4	17 px
H5,H6	13 px

Leading for Headings.

When I started to build this project I started with the idea of complete baseline typography, realizing after that baseline typography is probably not the right solution for the Headings.

Headings are very readable and with 1,618 leading will drawn unnecessary attention . So the point we don’t need extra leading for the Headings.

I did one thing witch I call it floss line height distancing.

Imagine that Headings are the teeth and the perfect distance between two tooth is the probably the length of dental floss for functional and aesthetical reasons.

Quotes

For Quotes I use Arial italic. But one thing that disturbed me was the readability issue so I tried to slightly increment the letter spacing.

For the rest of HTML elements the standard features that I’m using in all my project like Emastic, The Golden Grid and Better readability project.

To conclude: My personal scope was to make a typographical web library that will work in almost every occasion and looking elegant and functional (readable) at the same time. I’m perfectly aware that is no such thing as perfect and universal typography that will work in every case but aiming for always better web typography is my obsession. I hope you will find this project useful.

Download & examples: http://code.google.com/p/azbuka/

That's all folks!

Disclaimer: This blog still uses the Emastic 12px typography and will remain that way until the next redesign. Hopefully, very soon :)

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.012+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.

Update: New Bookmarklet Google Dictionary

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)