We’ve all read a magazine or a newspaper before. Noticed how text is usually split into multiple columns? Ever wondered why? Some folks figured that a human being can’t cope with really long lines of text and so decided that ideally, lines of text should contain about 60 characters. This is short enough for the reader to easily find the next line of text and still long enough to prevent constant transitions from line to line. And since newspaper formats are quite large and no-one would ever read them, if lines of text spanned the whole page, they decided to split text up in columns. And we like it that way.

A few years later, in 2001 to be exact, w3 said “Hey, our displays are getting too wide for one line of text as well”, and so decided to include multiple column layouts in css3. Years have passed by, and today, in 2008, Mozilla browsers and Safari support this feature. I’m not sure if any other browser does as well.

So how does it work? In a block of text, a web developer can specify either an optimal width of a single column, or the number of columns. He can also specify a gap between two columns, and… not much more. Given text would then be intelligently split into multiple columns of equal heights and widths.

So what are the downsides? As we all know, there’s one huge difference between a printed page and a webpage. A printed page will always look the same, no matter who or where reads it. A webpage on the other hand won’t. Some people may read it in a bigger text size, some prefer a different font family, etc. As good of an invention as columns were, some care has to be taken while using them.

First, and one of the bigger typographer’s fears, are the so called widows and orphans. These are single (first or last) lines of paragraph, which stand alone. Even though not all that disturbing to the reader, they look odd and are never supposed to be left in a printed page. The designer should take care of them either by modifying the text or applying a different design. But who’ll take care of them on the web, where lines may split differently for me than they do for you?

Researches show that text in columns is best readable when justified (you know, not left or right aligned, but both at the same time). But justifying short lines of text can lead to a few problems, such as oversized word spacing and rivers of white. This is regulated in desktop publishing by word hyphenation (splitting a word in two lines), but css draft of it is poor and “up-in-the-air”. But also with hyphenation enabled, a designer always has to check that something ugly doesn’t come out on the final print. Again, no-one can do this for websites.

I guess both problems can be minimized with proper implementation. But I have one more up my sleeve. In newspapers, text is optimized so when you reach an end of a column, you can easily move to the next one. That’s easily done by moving your eyes and head a bit. In websites, though, you read long texts by scrolling. Nobody can guarantee you that the height of a column won’t exceed you browser window’s height. So imagine scrolling around a page with 3 columns, all twice the height of your browser window. For all I know, you might have downsized your window and enlarged your fonts to achieve this, but that can’t be an excuse for ignoring this problem. It’s gonna be a pain in the ass. Scroll down, up, down, up and down again to read one block of text? No thanks. I prefer the “down down” technique.

So I’m not really sure I want to see any columns in web pages I’m reading. Except maybe if a website can guarantee a designer that’s gonna optimize splitting text into columns considering my browser, my preferred font families, my font size and my browser window size. It’s just not something a today’s browser could do on it’s own.

The need for columns is most obvious with fluid width websites, such as wikipedia and today’s wide screen displays. Mostly because people are still buying them to run their Internet Explorer in full 1920 pixels. Too bad no operating system allows us to run two windows side by side to better utilize the screen space.

And all this brings us to why I prefer fixed-width designs. Text is just much easier to read, when someone who knows what he’s doing takes care of it’s width. Just keep in mind, optimal line length on the web is cca. 30 to 35em.

This has always been a mystery to me - how to tell Safari I want to use two personal certificates, one for each site. Until now I’ve trusted Firefox with this matter. But I wanted to give Safari another chance, now that version 3 & leopard are out. And guess what - it can be done! I can now successfully acces both, Klik NLB online banking and e-Student, student’s portal of my university. To share the knowledge, here’s a short tutorial on how to do this, or at least how I did it. This is for Safari on a mac of course, I have no clue how to do this in Windows.

By default, prior to importing any certificates, Safari will fail to open https://klik.nlb.si/ and https://estudent.uni-lj.si/ won’t recognize you.

My first problem was a corrupted keychain. I’ve imported the keychain from my old system to Leopard and it seemed a bit buggy ever since, always asking me for my password, regardless of selecting “always allow”. But then I found the Keychain First Aid (It’s in the Keychain Access, in it’s application menu - the one that reads “Keychain Access”). I tried verifying my Keychain, but it failed due to login keychain not being in my home directory. Repair fixed this. Keychain seemed to actually remember things I told it to remember now.

But even after this fix I couldn’t get klik to load properly, so I just deleted my whole login keychain. You probably don’t have to do this - just remove any certificates that could play a role in the whole process. You’ll probably ind them in the login and System keychains. I also deleted Safari caches here. Just in case.

I had previously exported both my certificates via Firefox into .p12 files. So now I imported the one from NLB into keychain - Open Keychain access, click on the login keychain, then File -> Import items…

I closed Safari, opened it again and navigated to https://klik.nlb.si/. I was greeted with their certificate. I chose to always trust it and also always allow Safari to access my personal certificate from the keychain. Klik recognized me and I could log in.

Next, I imported the sigen-ca certificate (for e-student) into keychain, navigated to https://estudent.uni-lj.si, again clicked “always trust” when presented with a certificate, but I didn’t seem to get recognized. My guess is, Safari was reading the wrong one of my personal certificates.

So here comes the key part - In Keychain access, I right clicked my nlb personal certificate (the one with my name in it), and selected “New identity preference…”. Under location, I entered “https://klik.nlb.si/” and chose the correct one of the two certificates. The klik certificate is “Dusan Smolnikar”, while sigen-ca reads “DUSAN SMOLNIKAR”. Then I did the same for my sigen-ca certificate, where I entered “https://estudent.uni-lj.si” and selected the other personal certificate. I’m not sure wether the lack of trailing slash does anything, but I’ve read somewhere it makes a difference. Experiment if it doesn’t work at first. What I did here, is I matched the certificates with the correct urls, so Safari doesn’t have to guess.

Now, closing Safari and opening it again, klik and e-student both recognized me and I could log into them. I’m happy.

You’ve probably heard the news by now - Opera is suing Microsoft, saying “Hey, wait a minute! Your browser doesn’t support open web standards!” Basically, they claim that evolution of websites and web applications is being slowed down due to the fact Internet Explorer works a bit differently from the other browsers. They claim too much of the developer’s time goes into fixing code for IE and therefore want Microsoft to support open standards as well as remove Internet Explorer from default Windows installation.

As someone, who has ever done a website, I say I have to agree with Opera. I have spent quite an amount of time fixing some sites to work in IE. But Internet Explorer 7 is quite a step forward. Most IE6 problems are gone, so Microsoft is going into the right direction. And it’s the same with Opera. Version 7 has given me some headaches, but Opera 9 is mostly fine. The difference is, Opera users upgrade more regularly, while IE users don’t. But why is this Microsoft’s problem? As far as I know, they have alarmed their users about a “critical update” to IE7. What more can they do? Prevent IE6 from working all together (I wish…)?

I do realize Opera supports more open standards than Internet Explorer, but it’s not all that perfect, really. I think this quote from Kenny Graham at the web standards group describes the situation nicely:

How do you legally distinguish “standards-compliant” from
non-compliant anyway? IE is clearly the worst of the bunch, but I’m
not aware of a browser that doesn’t have any rendering bugs. Would
the requirement be “be at least as compliant as opera”? And if so,
how do you measure that? Acid2? Number of CSS selectors understood?
And which standard? IE renders HTML 3.2 pretty well, if not
perfectly, 4.01 like crap, and XHTML (as xml) not at all.

Microsoft has already had to remove Media Player from the default Windows installation, and now they’re asking them to remove Internet Explorer as well? For the end user this means his or her computer can’t play movies, nor surf the web… Great. From what I can tell, Opera is just being a bit jealous of Microsoft’s market share. But they’ve worked hard to gain it (no denying that). And as much as I agree that Internet Explorer is actually slowing web development down, I can’t believe what dirty ways people are using to bring them down - “Support my standards or I’m telling on you!”.

I’m constantly in search of the best browser out there. Which one to use? Tough call. Here are the candidates:

Mozilla Firefox 3.0 (beta)
The popular Firefox - This is the only browser that really got Microsoft worried about Internet Explorer market share. It really is a nice browser - It has a simple user interface (UI), copes with W3 standards quite well, is full of nice features and is very extendible. It also works and looks pretty good on various operating systems. Version 3.0 brings a few visual improvements which make it even more so. But Firefox’s main problem is it’s speed, or better yet, lack of it. As more and more features were added, Firefox has become slower and slower, when it comes to initial opening time, page loading and UI responsiveness. Installing a few add ons makes these even worse. Also, javascript is slow in Firefox. Or should I say was? Firefox 3 has brought speed improvements all-round. It’s noticeably faster when it comes to Javascript and pages seem to load faster. But still, compared to some other browsers it feels somewhat laggy and unresponsive. The betas are stable enough for daily usage but do crash every now and then. Feature-wise, considering all the add ons, I can’t think of anything you could ever miss.

Camino 1.5
This is a lightweight Firefox for mac users. It feels like a mac application should, which Firefox doesn’t in places. It seems faster and more native. But the slow rendering engine is still there - the “old” Gecko 1.8, used in Firefox 2, so it still lags down with complex pages and scripts. Some features of Camino are well hidden and require some work before settings them up the way you want. Spell checker is horrible when you speak more than one language.

Opera 9.5 - “kestrel” (beta)
Opera has always been known for its fast, feature-full browser. The new 9.5 is no exception. This thing really flies. Even if you have an older machine, Opera has no problem with that. But it somehow has a mind of its own with some of the features. It does things differently from everyone else - for example the url field, back, forward, reload buttons and search live inside a tab rather than above all the tabs, like everywhere else. This does seem obvious, since they do actually change with tabs, but it does take a while to get used to. Then text magnification isn’t there, only full page zoom. There are just so many little things that make Opera different from everything else. But the worst is its interface. It looks as if quickly thrown together without much care being put into it. It’s ugly on Windows and on a Mac. Read what Jon Hicks has to say about Opera’s looks.

Safari 3.0
Safari is very much like every other Apple product - Very easy to use, good looking, but somehow short of features and ways of customizing it. For instance, typing a few words into url bar won’t open the first google hit for that term, but will just return a “Failed to open page” error. And tricking it to use two or more personal certificates can be very, very tricky. All in all, mac version is quite nicely done, but the windows version is horrible. It uses its own UI, its own font rendering, its own quicktime (sigh), … And I thought Opera wasn’t looking native.

Konqeuror
I’ve never thoroughly tested this one, since it only works for KDE users (Which basically means you need to use Linux or BSD), but as far as I have, it seemed very fast, responsive and I’ve never had any problems with website rendering.

Internet Explorer 7
As much as I hate Internet Explorer (Don’t all web developers?), I have to say that version 7 is quite a step forward. It comes with the features you’d expect from a browser and works quite well with W3 standards. It works faster, but still shows some lag when it comes to javascript and DOM. Its main problem is, that it was not released when IE6 was getting old. By the time the new version was out, many users have switched to a different browser, so they just didn’t care about the IE6 to IE7 upgrade. From all the browsers listed I’ve used IE7 the least, so I can’t tell you much more about it.

Conclusion?
The best browser is…? None of the above. I love Firefox for it’s features and extensions. Many extensions break with the 3.0 beta, but Firebug is still here. What bothers me is that it’s more of a cow than a fox - too lazy and slow. Opera tries to solve that, but forgets what usability is. So safari fills the gap for me. It’s fast and works natively with everything else. I do still use Firefox for some complex things, like website debugging and sites that require certificates. But for these Firefox 2 works better than Firefox 3 beta. I guess we’ll have to wait for the final 3.0 release version. On Windows, I prefer Opera over Firefox, though.

The future? I think Mozilla has a few problems too many with their layout engine, so I do hope they fix these first, before doing anything else. Some believe fixing this may mean rewriting it completely, though. Apple isn’t likely to add too many features to Safari in fear of making it too complicated for the simple user, while Konqeuror is never breaking away from KDE. Guys at Opera have their own philosophy so I don’t think they’ll be changing their interface any time soon and Microsoft just isn’t a company that would care that much about their browser.

But I’m happy that so many browsers are competing so tightly. After all, competition is always good for the end user.

In the spirit of statistics class that started for me yesterday, I found some fresh browser statistics.

First thing to notice is how many people still use 800×600 resolution (8% of users) and how many tend not to maximize their browser windows (The author states 50%, but don’t take that too seriously). This is especially interesting because some people keep claiming how 1024×768 is a standard nowadays and how lower resolutions don’t matter any more. Well, think again. Myself, I’m using 1440×900, but usually keep my browser window under 1024px of width to save precious space for other windows.

Secondly and sadly, Internet Explorer 6 remains the most popular browser with 46% of user base. CSS nightmares anyone? Internet Explorer all together holds a terrifying 78%.

But take a look at the map of Europe. Slovenia still holds the first place in Firefox market share and we’re almost at 50%.

Conclusion? Not much has changed for web developers. 800×600 should still be considered a minimum and IE6 should still be our main priority when it comes to cross-browser compatibility. Except you only want Slovenian users, I guess…

Oh and… I’m quite proud of readers of this blog as well. 63% Firefox and only 26% of IE :) I’m sticking with Camino, though.

To start with, some theory
Nowadays, most browsers come with a default font size preference. We can change this setting, but browsers usually come with a default value of 16px, or 12pt. These two are usually the same, due to the 96 DPI assumed by most systems. You can test this here.

Another option that some popular browsers have, is the ability to change font-size on the fly. This means that while reading a page, user can press a certain key combination (usually ctrl + / ctrl - or cmd + / cmd - on a mac) to quickly adjust the font size. This is quite handy when only a certain website supplies fonts too big or too small.

The third important preference is the “minimum font size”. By setting this to, let’s say, 12px, we assure that no text on any website can be smaller than 12px.

What they tell us to do
With the default font-size setting of 16px, a large percentage of internet users is able to read text comfortably. A few facts might explain this. Also, W3C suggests designers to avoiding sizes smaller than user’s default font size. This would make sure website visitors have no trouble reading our site and are reading it the way they like to, since this is their preferred font-size setting.

The problem
All this sounds just too nice to be that easy. So, what’s the problem? Try asking your mother what her default font-size setting is. I bet she has no clue what you’re talking about. Most people don’t even know they have such a setting. And how many of the ones that do, have bothered changing it? The problem is, most sites don’t respect this setting so it would make no difference anyway. Therefore we can assume most internet users use a default font size of 16px. By following the W3C suggestion mentioned earlier, this should be the default look of most websites. But is it?

Is the default size okay?
Some designers, including myself, agree that 16px is a tad large for normal reading. For example, would you really prefer reading this over this? On the first screenshot you see an article on A List Apart with 16px set as minimum font-size and on the second with default settings. I prefer the second. But according most accessibility experts, the first screenshot should be the way to go.

I’ve been following a discussion on the WSG mailing list about using 16px or not. I’d just like to point out a few things:

• Of course, there are people with bad eyesight who have trouble seeing smaller text. But shouldn’t they be the ones to adjust the text? They can still set their minimum font-size to a value they’re comfortable with. No need for everybody to be reading enlarged text.
• On the topic of people with bad eyesight - Don’t they wear glasses or contacts to help them see better?
• People tend to enlarge text (as described in the first paragraphs) when too small rather than to shrink it when too big.
• Why don’t operating systems use 16px fonts if that seems to be the optimal size?

Are there benefits of smaller font sizes?
Yes, 16px is very legible, but it can cause problems. As you can see in the above screenshots of A List Apart, with bigger text, there is fewer content on the screen at a time. It becomes hard to quickly skim the page, a menu or a paragraph since there is just too little visible content. Also it requires scrolling more. Especially if you consider the 800×600 resolution.

The real world
So yes, in my humble opinion, 16px is too big to be the default size for most users. But on the other hand, it’s very good for them to have an option of customizing it. Users with bad eyesight have probably heard of the option to resize fonts. And they are probably using it. But I do think there are still more users that rather read smaller text. How did I come to that conclusion? Look at the web as it is today. How many websites really use 16px fonts? Not many. And I bet there’s a good reason for it. People obviously prefer it that way. And when making a website for someone, I’ll usually follow his or her guidelines, not those of W3.

I know, I’m confusing the default 16px size with user’s setting. But as mentioned earlier, sadly, these two values are mostly the same. If all users set this value according to their preference and not just keeping it as it is, the story would be different. In that perfect world, text size would be the same everywhere - the user’s preference. But such as it is, user’s find 16px too big and blame the designer for it.

A while ago, since I find 16px too large, I set my default font size to 12px. And what did I find out? That even though some sites respect this setting, they usually specify their fonts to be about 70% of the user’s default value. Which meant I suddenly had to read font sizes of 8 or 9 pixels. Now that is a bit small. So I went back to 16px.

Browser problems
As with just about everything nowadays, browsers have problems here as well. The first is, surprisingly, Internet Explorer. Along with 7.0, IE doesn’t have an option to change font-size on the fly. It does have a font-size option in the menu, but this is actually the default font-size setting. What it means is it will get overridden by something like font-size:12px; True resizing of fonts on the fly takes that value and enlarges/shrinks it as long it doesn’t go bellow the minimum size. Default font size is there just in case nobody ever tells the browser otherwise.

One other problem I’ve heard of just recently, is a problem with minimum font size. Some browsers seem to treat it badly. For example:

body { font-size:10px; }
p { font-size:120%; }

would mean that paragraphs should have a font 120% the size of body’s font, making it 12px. If we have minimum font size set to 12px this is ok. But some browsers would apply the minimum font size to the body, making that 12px and then apply 120% over these 12px, making the paragraph font size 14.4px. While testing this I noticed IE doesn’t even support setting minimum font size, safari and firefox do it correctly and opera doesn’t. See the test case. The text size should be 15px if minimum font-size doesn’t go over that. In opera you get a font-size of 45px with minimum font size set to 15px.

Web developer’s point of view
There are two ways of describing the font size. Absolutely, setting the font size in pixels, or relatively in percentage of browser’s default size (where font-size:1em; equals font-size:100%; or not setting the size at all). I used to do it relatively, to overwrite the (silly) 16px default size. But I figured there are two reasons why not to do that. First being IE users, who can’t resize the fonts this way. Secondly, I figured, should I really overwrite those 16px? Of course not. Now I usually set my fonts to something like 70% or 80% (of the default). This means that people who don’t know how or why to change the default size see fonts as I’d like them to and the ones who do probably already know that this rarely works as expected and also know how to enlarge the text if they have to. This is not the standards compliant way, but according to my calculations pleases the most users.

So I tend to keep most of my text at around 12 or 13px, but keep in mind that some users might change this. For example of what not to do I always like to link to this website. I find the design very lovely… until enlarging the text. It looks a bit funny after that.

Different fonts, different sizes
One more think I’d like to mention is that different fonts demand different font size. See a little demo here. It presumes you have all 4 fonts installed. Notice how Verdana still looks legible at 11px while Arial can barely be read.

Final thought
It’s nice to know the rules. Only with knowing them you can truly explain why you are breaking them. But don’t take it as an excuse. Always keep in mind that some people might not have the same eyes and the same display as you and that even though one font size is fine with you it might not be fine with your users. Font sizes can vary according to the content or type of users reading the page. And do try to offer the user an option to scale the font according to his or her likings.