I think a lot of the problematic websites out there (the majority) are poorly ‘designed’ because they are not actually designed at all.

A good understanding of graphic design (which is made up largely of typography) + a good understanding of web standards etc = the ability to design an accessible and usable website (like this one).

I see so many poor websites that have been put together by people that are NOT designers yet think they are, e.g. developers. However, they could be if they made the effort to learn and respect the art of design.

I think that technically, what you are advocating is a strong healthy stand. I am also happy to hear that you are well aware that there is a jungle of opinions on the matter and that people smarter than the two of us refuse to take an absolute position there. ;)

This is my point: You need to control both technology and communication design in order to create a successful website. Ideally, you manage to create a simple interface that, where it rebels against slavish submission to the technical rules, actually makes a good point (see Google’s “I’m feeling lucky” button).

As for typography: Correct. Classic typography needs to be translated not applied. But before we start translating, we need to understand the original text in depth and master the target language (which is a point I make in the original article on typography).

Classic typography is about readability and hierarchy; aesthetics is a logical consequence, not the main goal. It’s all about reading experience. Ironically, this is where lots of paper designers fail even in their own medium: Imagine, they’d allow us to do eye tracking and usability tests with newspapers and magazines!

Thanks for the screenshots of my My Opera site. They actually prove (for Safari/Mac) what I said: “you can see everything without a horizontal scrollbar even in a 800px-wide window.” Even though a horizontal scrollbar appears, it’s not needed to see any of the content. (The reason for the scrollbar is the presence of a container that’s wider than the viewport – Firefox does the same, but interestingly Opera 9.27 does not: there a scrollbar doesn’t appear until there is actual content wider than the viewport.) It’s good to realize though that My Opera offers various templates, and allows you to override or even completely replace the CSS, but gives you no control whatever over HTML, let alone JavaScript. I’ve done my best with that and even introduced accessibility features that had been disabled, but it’s far from optimal.)

My “absolute point of view” is that while I agree with your “text as user interface” I can see no advantage to the user of a fixed layout. I find it rather ironic that when I said “Optimized” for 1024×768 does not have to mean “horizontal scroll bar in a 800px-wide window”, you cite Jakob Nielsen (whom I stopped considering as a usability expert long ago, but that’s another story) with his “Optimize for 1024…” article: that article actually also makes a strong case for accommodating 800px-wide windows – which you don’t – and for a change I actually have to agree with him on that (but not his complete article).

Current terminology is a jumble: fixed (pixel sizes), fluid (percentages only), jello (???), elastic (adapting to user’s font size). Apologies for my earlier sloppiness in this. Your site seems to be “elastic” then but doesn’t accommodate anything smaller than 970 at which point text starts being cut off. (How is text a user interface if I need the browser’s user interface to be able to use it?) How does that benefit the user over a design that accommodates 800-wide windows (still some 12% worldwide)?

10 years ago we were discussing whether to continue to support 640×480, and for how long. Now some are discussing (and some no more) whether to drop support for 800×600. But guess what? 640×480 is back! And even smaller screens. Most of those are handhelds, though, which rarely have full support for JavaScript (or it’s turned off), so they don’t tend to show up in the statistics which need JS to report back on resolution or window size. To get at that information you’ll have to look at user agent strings and look up corresponding capabilities. So, maybe your target audience has a big widescreen monitor on their desk – but are you sure they aren’t browsing with their blackberry on the train home? You could at least add a “handheld” stylesheet (and while you’re at at, a print stylesheet as well).

What I am really advocating is adaptive design that is both “elastic” and “fluid” (without using only percentages) and adapts not only to the user’s font size (while keeping line length in check, or up to user choice, of course) but also to narrow browser windows. This will result in a “theme” (CSS + templates) for Xaraya (CMS and framework) which I will use for my new site as well as stylesheets for other sites. My first test pages can be scaled down to 518px wide without needing a scrollbar and without impacting usability too much – the major impact being too-short line length for most dyslexics. (Sorry, no ETA, or I’d give you a URL.) Only a few of the former fluid/elastic advocates’ sites actually still work well at that width, notable examples are The Autistic Cuckoo: Fixed vs Liquid vs Elastic and Clagnut: More on fixed widths.

I would like to hear what other “usability specialists” than Jakob Nielsen say (said!) to “Optimize for 1024″ since you use a plural there. One of the best usability specialists I know is Jared Spool who only says that he doesn’t say. ;)

What “CSS gurus” (many of whom are usability or accessibility specialists, too) say is all over the place. I actually found many advocating fluid/elastic designs, giving excellent reasons, who by now have reverted to a fixed-width design, seemingly without any reason. Robert’s talk is an excellent example of that.

Recently, I see more and more sites who previously had a fluid or elastic design reverting to a fixed-width one (ALA is a notorious example). What is happening? What is the advantage to the user? My guess is: none at all – it’s only an advantage to the designer. Total déja vu – I think it’s just fashion. So does Adactio in Fixed fashion:

I imagined that designers weighed up the pros and cons of fixed and liquid design and then, after careful consideration, chose to build a site with a fixed width layout.

Now I’m beginning to think that this scenario is wishful thinking. Could it be that most designers are simply making the decision based on what everybody else is doing?

If so, that’s a disturbing thought.

I am equally disturbed, and by other recent trends in web design as well. (What do gradients and mirror images have to do with the web? Why are web designers seemingly suddenly trying to apply rules for print design to the web, instead of investigating how to apply typographical principles to a new medium and optimized for that medium?) So, I don’t really care what “gurus” say, and I care more about what accessibility experts say than what web designers do who are apparently just doing what is in vogue these days.

Yes, the text is a user interface. No, the web is not a collection of pieces of paper.

As to your Japanese font problem, there are at least two ways to optimize your solution. Currently, you don’t have any Japanese text at all, and the image is a background image, which is obviously not accessible for Japanese users needing a screen reader. Since you’re using image replacement already, one obvious solution is to simply use the Japanese text as link text and continue to use image replacement for the benefit of your Swiss visitors. But given that your site is actually elastic, that isn’t quite optimal either: when one increases the font size, the image now starts to disappear above the text line. What I’d suggest you do is simply make it an image link, use the actual Japanese text as the alt text, and define the image’s size in ems so it will scale along with the text. I found the link titles to be confusing as well – they seem to be a mix between “location” and “language”; just language would be better, I think, it would match the link texts, too.

Yes, it’s always a fight, I agree. But there is also always something to improve. :)

I am happy to discuss liquid vs fixed with you, if you agree to cite some reliable contemporary sources that prove your absolute point of view. If you convince me, I’d even change my layout.

Here is my understanding: Usability specialists say: Optimize for 1024 and use fluid layouts; but even Jakob Nielsen’s website has become a hybrid one year ago (only fluid up to 1024, then it stops); the reason: line length matters for readability.

CSS-gurus suggest to make the CSS scalable or “elastic” (using EMs or% instead of px) and they usually say that fixed vs. liquid is a choice that depends on the website. Wouldn’t you agree? The most successful big websites (with the exception of Google) are fixed (and often designed for 1024), so it can’t be that categorically wrong.

Websites that follow usubility guidelines 100% go nowhere as they just look like standard HyperText protocol. Not even Google follows all usability guidelines (calling a button “I’m feeling lucky” is a major usability flaw, yet it creates identity and shows character). The art of web design in my understanding is to find the utilitarian balance between identity principles and usability hardcore. This is the real challenge.

Often there is no ideal solution. For instance: We had to make the Japanese link on the top of the page an image, since most Swiss PC-users have no Japanese fonts installed. This creates all sorts of usability issues, but in the end we figured it’s better to risk those than having scrubled funny text for most users. Every website I do has hundreds of those compromises. There is no golden rule for the ideal website. It’s always a fight.

And please try to stop talking down to me. There are many different opinions on the subject. What counts is to know the different points of view and making your choice case by case.

Monitor size does not matter. What matters is browser WINDOW size. That was true 10 years ago and it is still true. (My monitor is large enough to fit TWO browser windows at portrait format next to each other. The larger monitors get, the more people do NOT use programs full-screen because it wastes all that valuable screen estate. And most rigid web page layouts look really like that – as yours does: you’re not actually using that space.)

My Opera site is fluid enough that you can see everything without a horizontal scrollbar even in a 800px-wide window. (Thanks to my Opera for that – I customized nearly everything else but didn’t have to do that bit.) “Optimized” for 1024×768 does not have to mean “horizontal scroll bar in a 800px-wide window”.

Your layout is not fluid but fixed. Fluid design may not be simple (I know it isn’t and didn’t suggest it is) but it’s possible.

Rigidity was a problem in web design 10 years ago and it’s amazing and sad that it apparently still is. “Best seen with” is still a dirty word, 1o0 years on. And, really, I don’t care what “most leading web designers” do if it means they are ignoring the fluidity of the web. They should grow up to the reality of the web and design for that, not for some idealized image of what everyone’s browser “should” be like. Grids are good only if they adapt dynamically. It is simply very sad that so many designers STILL haven’t learned about the reality of the web and design page layouts that are suboptimal or downright bad for everything but a single browser window size.

The web is not a collection of pieces of paper.

And if you say that “meta titles on a lower hierarchy are perfectly OK” I have to disagree – they are simply hard to read. A long list of wrapping links is something else than small titles (such as you’re using for commenter’s names, where it isn’t a problem). I didn’t claim they are “always wrong” – I said they are wrong for your long list of links (which aren’t “titles”).

1. You are preaching to the choir.
2. I am not quite sure what horizontal scroll bar you are referring to. How big is your monitor? (iA’s site is optimized for 1024×768, and so is your Opera profile site)
3. To claim that small titles in CAPS are always wrong because they’re hard to read is a subjective oversimplification, that can be desimplified quite easily: It is hard to read body text in caps, but meta titles on a lower hierarchy are perfectly OK.
4. Also the discussion about fluid/rigid design is not as simple as you suggest: It’s a complex matter that I am perfectly familiar with. And after all, your Opera profile page is not fluid either.
5. Dissing grid based web design is a very tough stand, as you argue against most leading web designers.