For better understanding, I split this post into three parts. The first one may be skipped by experienced web developers.

Some basic XHTML tag-closing theory
In HTML, tags needn’t be closed. So this is correct:

<ul>
    <li>Item 1
    <li>Item 2
</ul>

But with XHTML, we have to respect the strict XML standards, meaning each and every tag has to be closed. A bit more code is needed.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Also, we have to take care of tags with no closing tag, such as <br>:
<br> is wrong, while <br /> is correct.

This way XML parsers can read our HTML code. And what’s more, the code is much easier to read and understand by human beings, such as ourselves. If done correctly it doesn’t affect the way our code is rendered.

Can every tag be self-closing?
According to W3, every tag can be self-closing, therefore <div /> is a valid piece of XHTML code. But can we use this in the real world?

Self-closing tags demo

As you can see in the demo, browsers get confused by self-closing tags. They treat them as if we never closed them. You can try navigating the HTML structure with the Firebug extension for Firefox, to see how confused they really get.

I’ve tested this with IE7, Opera 9.2, Safari 3, Firefox 2 and Konqueror 3.9. All produced the same results.

Conclusion?
Do self-close tags with no closing tag, such as br, hr, img, link, base or meta. For example, <br></br> is not valid. But don’t do it to tags that do not expect that. It may be valid, but you won’t like the result. Just do <a name="anchor"></a> or such.

Yesterday’s speech went pretty well I’d say. Accompanied with Andraž Tori’s “The future of web” and Jure Čuhalev’s “Introduction to interface planning and usability”, the listeners got a three-hour lecture on the web of yesterday, today and tomorrow.

I promised to post my presentation and notes, so here they are:
Presentation [PDF]
Notes [PDF]
(Both in Slovene language)

Additionally, here are links to a few article collections that I used in preparation for the speech:

• Alertbox: Current Issues in Web Usability - bi-weekly column by usability expert Jakob Nielsen
• User Science: Usability - A List Apart’s articles on usability
• Criteria for optimal web design at Software Usability Research Laboratory
• Articles by Mark Boulton - a collection of articles dealing with typography and web design

At the very beginning of laying out a website, we are presented with two choices. Shall we make the design fixed width, or fluid? For those not familiar with the terminology, fixed width is this and fluid is this. The first has a fixed width regardless of the browser window and the second stretches as browser window gets wider. Try resizing your window to see what I’m talking about.

Fixed width layouts look fine in your average-sized browser window, but there are two extremes to consider. On really narrow windows (cell phone browsers for example), one might get a horizontal scroller, which nobody is really fond of. It makes reading a website a real pain, especially when text itself is wider that the window. And when it comes to really wide browser windows (wide-screen 24″ monitors are just sexy), the layout’s background is stretched far left and far right. Usually this results in large white areas to the left and right. And I’ve had people going “I spent all that money on my display and now I can’t benefit from it”.

On the other hand, fluid layouts look fine in your average-sized browser window, but we have to consider two extremes (oh the irony). In really narrow windows they usually get very useless with each word of the text falling in a new line, objects overlapping, etc. And how would you like reading text stretched all the way from the far left of your new 30″ display (let’s not be modest with the 24″) to the far right. I’m sure your neck wouldn’t like that.

For some theory - Long time ago, people have realized that line length does matter in printed material. Short lines require most of our times jumping from one line to the next, which, I know it mind sound funny, but is time consuming and requires some concentration. And when lines get longer, reading requires much moving of the neck and finding the next line gets a bit tricky. So it was agreed that the length of the lines (or width of the text block) must fall within some optimal limits. And it’s no different with web sites. Ideal length of a line on the web is said to be about 30 to 35 em, where 1 em is “equal to the pt size of the current font”. So, with 12px fonts, 1em is 12px. Why am I talking about typography and text layout all of a sudden? Because with most web pages, text is the central part of the site, and therefore plays a big role in our original question.

Ideally, I would recommend using fluid-width layouts, but don’t let them get too wide or too narrow. CSS min-width and max-width rules come in very handy here. Problem is, guys at Microsoft don’t agree. I’m not sure about IE7, but IE6 just ignores the two, which makes them useless, really… So I usually go for a fixed width design, due to the points I described in the previous paragraph. It’s just way more readable. I usually make text lines a bit longer than the ideal 30-35em though, but compensate that with a bigger line-height, which improves readability. I also tend to make designs fit 800×600 resolution. There are still people using it, as well as people who are not so fond of full-screen browser windows. I still can’t understand how one buys a 24″ display to run everything full-screen on it. Multiple windows side-by-side, anyone? I don’t think there are many applications that would benefit from so much space, but having more windows displayed on the screen can be quite nice. So for people “not benefiting from their big 24 inch display”, try this. Websites are a bit narrow so you can use the screen space for something else, not so you can complain about the white space.

Fixed width layout comes with another question - where to align the content? Left, center, or right. Believe me on this one, but you don’t want to use right if your language uses a left to right writing system. I do think that designs aligned to the left usually look very nice (example), but I don’t recommend them since the problem of large white areas is even bigger here. And usually we look at the center of our display, rather than to the far left edge. So a centrally positioned fixed-width layout would be my choice. But I do think fluid layouts can be very nice when done properly. Just don’t let the text boxes get too wide. For a good example of such a layout, see Web Standards Project. Looks nice and reads very well on different browser sizes.

About a year ago I was asked to make a website for a primary school. No money was involved in the project, but I did my best to come up with a cute design. So this is what I showed them: OŠ Valentina Vodnika, as I saw it

I was quite happy with the design and so were the school guys… for a while. They did use my htmls and I explained a few things to them on how to add new content. So they learned some html basics. And since the design was very dull and given the fact this is a primary school, they decided to liven it up. So they got rid of the plain white background and added butterflies to it. And of course, the design itself needed more color. Red maybe.. and blue and another shade of green. But still the design was so static. So why not add some animation? Of course! And some caps to make the important data stand out more. And that green boy on green background… What’s that all about? Let’s just put something more interesting there. So that was the looks, but they had more up their sleeve. They played with the navigation, making it more dynamic. And the final touch, the most important of them all, oh yes, the counter. Voila. Much better. So here’s the result: OŠ Valentina Vodnika, v2.0, the lively version.

I didn’t take the time to congratulate them yet, but I did change the link in the portfolio, for I don’t like taking credit for someone else’s work.

Because not all people use the same browser, it’s not enough to test a design on only one of them. What’s worse, some people don’t even use the latest version of their browser, so we also have to test different versions. So here’s a list of most common browsers and links on where to download them (including older versions).

Mozilla Firefox
You can download different versions on Mozilla’s FTP server. Select your version and your operating system. As long as you don’t overwrite another version, you can have any number of versions installed. To run multiple versions at once, I believe you need to run each one under a separate profile. I usually check websites on 1.0, 1.5 and 2.0, but there are rarely any differences between versions. Camino, Netscape and Galeon use the same rendering engine so they will show sites as Firefox does.

Internet Explorer
This one is windows only. Linux users can use Vmware or Wine to install it, mac users can use VirtualPC on Ppc or Bootcamp/Parallels on Intel machines. I myself use a remote desktop connection to a Windows machine. You can install IE7 on your Windows (via Windows update) and use standalone versions of older versions, found here. These require no installation, just unzip the folder and run the exe. I can confirm them working on windows XP but can’t tell you about older Windows versions. To solve cookie and conditional comments problems with standalone versions, see here. I tend to make websites look ok on 5.5 and higher versions (since even Microsoft doesn’t make websites for older versions).

Safari
Apple offers only the latest (beta) version of their Safari browser, But click here to download any of the older versions. Some versions may not work if you’re not running the latest version of OS X, but everything seems to work fine on Tiger. Testing on 2.0 is recommended since 3.0 is still beta and it doesn’t automatically update. I do believe Omniweb and Shiira use the same rendering engine as Safari does.

Opera
You can download the latest version of Opera for your system on their website, but older versions can be found here. Again, if you don’t overwrite an older version you can install as many as you like. I usually test versions 8 and newer, since Opera 7 doesn’t really show up in statistics.

Konqueror
Linux users get Konqueror with their KDE. Mac users can also install KDE and use Konqeuror. Windows users can probably install KDE on Cygwin, but I haven’t tested this myself. How to get different versions is a mystery to me, but I’ve found Konqeuror to be the most standards-compliant browser, so if your page works on every other browser without hacks, it should work on any newer version of Konqeuror. Also, I believe that Linux users do upgrade their software regularly.

Lynx, screen readers
Lynx is a text-only browser for Unix that works in a command line environment. I guess Linux users know how to install Lynx… Mac users can find it in Fink, Windows users can give this a try. Lynx won’t render any css or tables, so I do recommend writing semantic code. Also note that people with bad or no eyesight use screen readers to “view” websites, so Lynx is your best approximation to this.