My old host was getting slower and slower. It could take up to ten seconds to get any response, so it was rather annoying. But I got an offer with this new server, which seems much speedier. :) Along with it I’m changing the domain to dusan.fora.si (New blog URL is dusan.fora.si/blog). I’m making a redirect from my old domain as soon as I finish this post, so visiting dusan.livecd.net should bring you here as well. If everything goes as planned, DNS records should also get updated within a few days.

While at it, I’ve upgraded to WordPress 2.3. Can’t see much difference, except for the new “tags” input field while writing this post. I still have to figure out how this differs from categories, though.

And for those wondering, how one moves a blog to a new domain, here are the steps I took:

1. Get a new host & a new domain, have your php and mysql set up.
2. Download WordPress and follow the simple installation process.
3. At this point you could just import the whole database, but I took a different approach. Open the administration pages of your old blog. Click Manage -> Export and export your blog into a file. Now in your new installation, go to Manage -> Import to import this file. I selected to move all my posts to the newly created admin user.
4. Now go to users to edit the admin user.
5. Delete the demo post (Manage -> Posts) and the default about page (Manage -> Pages). If you get a “No permission” error, try the AJAX Referer Fix plugin.
6. While in administration, go to options and personalize them.
7. Use the Search and Replace plugin to replace all instances of the old domain with the new one. This will fix any links to uploaded files.
8. Make the wp-content/uploads directory writable to the web server and copy the contents of the folder from the old server.
9. Move your theme to wp-content/themes directory and enable it in administration pages (Presentation -> Themes).
10. See if everything works.
11. Make sure to redirect to the new domain correctly. Fix the DNS records, or use your web server’s redirect functions. How to redirect visitors to a new page? - See the “To Move an entire site” part.

It’s probably obvious from the URL, but I’m kindly hosted by Fora d.o.o.. Thank you Fora! :)

One of the main things to consider when designing a blog is most certainly the post layout. This usually consists of the following parts:

• Post title
• Date & time
• Tags / categories
• Author (not always)
• Comments link
• The post itself

So, we have to decide how to combine all these to make it as nice and usable as possible. And here comes the problem - where do I put everything? Most commonly people seem to place things where they look best, regardless of their usability. That’s wrong, I tell you.

First we should consider what we are telling the user with our elements and in what order he wants to collect the information. Let’s go step by step.

First of all, before reading anything else, a potential reader of our post will want to know what we’re writing about. He’ll look for the heading, hence that is why it is always on top. Another thing of great interest is the post date. This helps user to determine if the information is still relevant. For example, if I’m looking for reviews of the Ars Electronica 2007, a blog post from 2005 is not what I want to read.

So now the user knows briefly what he’s reading. Let’s ease his life up a bit more. Give him some keywords, tags, or categories. however you want to call them, just give your post some context. Some put these bellow the post, but what are they telling there? After I’ve finished reading it, I already know what the post was about.

Some people tend to throw the comments link below the title as well. Why? I haven’t even read the entry, why would I want to comment on it? Or read what others thought of it? First show me the article please, then I’ll comment. I often notice this. After reading a blog entry I’d like to drop my opinion. But instead of simply clicking the link where it should be, I have to find the top of the article to click “comment”. It gets annoying.

I’m indifferent about where to put the post author though. On one hand it’s nice to know who’s writing, if you know the author, but on the other hand your name on the bottom acts like signing a letter, and is a nice traditional approach to writing. But if you’re the only author of entries on your blog, you don’t really have to put your name besides every post. It’s probably in your header anyway.

Of course there may be other things to consider, or cases where the above opinions are totally irrelevant. But the thing I’m saying here is, don’t just throw everything where there’s empty space. Think of where you would expect things to be and at what point they are important for the reader.

Peter beat me to it, but I’d like to share my impressions of the Ars Electronica Festival 2007, the “festival for art, technology and society”, that is being held every year in Linz, Austria. I was there on Monday and Tuesday (September 10^th to 11^th).

The festival isn’t about the latest of technological achievements, as I first expected. Rather than that it’s an exhibition of modern art. It’s about the artists who find drawing or painting boring and try to express themselves in alternative ways. For me, the technologies used were not new. Most abused concepts were definitely the Graphics tablet, 3D glasses and object detection.

A large part of the festival was the so called Second City, a real life imitation of second life. Seems ridiculous, how not long ago we were trying to bring real life into computer generated worlds. and now we’re doing the opposite? Another thing I didn’t quite get was this. People met at a sand beach in the center of Linz to play second life and talk to each other on that same beach, but digitalized. Hmm hmm hmm.

I did really like some projects. Here are a few of my favorites:
I never did quite understand musical notations. But this project did it in a more user friendly way - by putting objects of different shapes and sizes on the desk and adjusting the beam speed we were able to produce music. yay.

A futuristic looking water dispenser. This thing was nothing special but it looked so damn cool. Usage photo

A sculpture illuminated by a single projector. This was 10 minutes of animation which showed an artificial light source movement. Just like playing with 3D software, but more real.

A simple 2D projection showing a still image and some moving camels. I’m not sure why, but I really loved this.

All in all it was a good festival. If nothing else, to show that art is evolving too. Mona Lisa is great, but she’s been smiling at us for centuries now, we’ve seen it. Maybe it’s time for something new. And Ars Electronica shows that this “something new” isn’t necessarily a filter in Photoshop.

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.

Typography has been one of the main aspects of design ever since circa 3000 BC, when writing was invented. One can make quite some beautiful things by just choosing his font right and styling it correctly. But can we do it on the web? Can we use our own fonts?

Microsoft already solved this problem, way back in 1997. Internet Explorer version 4 brought support for embedding a font into a website, using css. Click here to see what I’m talking about. By using a special program, such as WEFT one is able to embed any True Type font with proper permissions into a website, by converting it into a .eot format. Nifty.
Let’s look at the css that does it. This is the main font style:

@font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}

This would define a new font-family Piefont. It can be used as any other font:

p { font-family: Piefont; }

This would render all paragraphs in the font PIE0.eot. Now for some demos (IE screenshots lack font anti-aliasing, this is not necessarily always so):

• Demo 1 shows a simple page with an embedded font. See how it renders.
• Demo 3 illustrates what we can achieve by using special fonts. See screenshot.

Now this is great, I hear you say. Sure it is… for Internet Explorer users. But it doesn’t work in any other browser.

And what does W3 have to say about this? Well they defined very similar (if not the same) support for font embedding in CSS2, but it was removed by CSS 2.1, due to lack of browser support (or so they say). It’s being reintroduced in CSS3.

What about browser support? Currently font embedding is only supported in Internet Explorer, using the way described above. The w3 way, using True type fonts, however, is not supported anywhere.

I also recommend reading this ALA article for what can, or better yet, should be possible with font embedding.

So from a designer’s point of view, it’s a real pity we’re only limited to a few web-safe fonts. It does limit creativity. But from a surfer’s perspective, after seeing all the animated gifs, marquees, background sounds, etc., I’m really glad font-embedding isn’t widely supported.

To summarise what you should know as a developer - Using the simple “font-family: verdana, sans-serif;” to specify a font (and a font family, just in case) is still about the most you can do today on the web. But keep in mind that adjusting the spacing, line-height, etc. can do quite a lot. If you haven’t already, I suggest reading this website for a handful of tips on web typography. You can also use images for special fonts, but it comes with usability deficiencies, such as lack of font-size adjustments, broken searches and low quality printed pages.