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.

The trouble with most grid-based designs on the web is that they’re rigid – but the web isn’t rigid: there’s an endless variety of devices, display technology, screen sizes, window sizes. Grid design will work only if it’s fluid, and if you consider it as a collection of block and allow those blocks to rearrange and resize themselves depending on the user’s browser and screen.

You say: “Don’t make me think, ok, but don’t make me resize my window either.” Why do I get a horizontal scrollbar then? I have to scroll to the right to be able to see the links in your sidebar, which will then hide part of the text (and the link text is hard to read because you’ve styled it as ALL CAPS). That is not good web design, and not good web typography either. You’ve designed the page like a piece of paper but you can’t do that on the web. And surely you know that ALL CAPS is hard to read?

I continue to be amazed how many designers still treat the web as a series of pieces of paper, but know /nothing/ about how to do a fluid design (or why that matters), how to design site structure and navigation (and that link design matters, too, or why), or how choice of color is not just a matter of taste (or why). Looking at your pages, you seem to firmly belong to that group of designers.

No. You really don’t. Nobody does, actually. You see the web contains digital information that’s going to be rendered in one of an infinite number of ways. One user may have set their browser up with custom stylesheets to bump up font sizes, use a different default serif or sans-serif font, maybe change colors as well. You have the users that don’t read the text, be it a blind person or a search engine bot crawling the site to index your content. You’ve got a million different screen resolutions. What might appear as white-space on a large monitor disappears on a smaller one with a lower resolution. Or maybe the large monitor user has bumped up their OS DPI so that fonts scale up to meet their higher resolution screen. Meanwhile your images don’t scale.

The point here is that every article (including these) that I read in which the author preaches about typography and getting web developers educated in the field all come with a very big, very wrong assumption: That the web developer controls how the text is rendered on screen.

The simple fact is, we don’t. We can certainly do our best to steer browsers in the right direction, but the perception of control is just a perception.

When you start focusing on the presentation of information you loose sight of the information itself.

“Is this information well written?” “Is this information pertinent to the subject I’m covering?” “Is this information important or superfluous?” “Is there too much information?” “Is there too little information?” “Is the information well structured?”

None of these deal with typography.

All of these are more important than typography.

Typography is visual representation of data. It does not deal with data itself. To try and say typography is 95% of web development is short sighted and elitist.

Web development is about managing information. Collecting, organizing, and structuring the data is, by far, the majority of it. Typography is only just the visual presentation of the information.

“JUST?!” you say.

The problem with a majority of web developers is they see the web as a visual medium. Perhaps the majority of users do process this information visually (actually, when you start to factor in web crawlers, screen scrapers, RSS feed readers, and other decidedly non-human consumers, it may not be a majority after all!), but if you treat it as JUST a visual medium you’re going to paint yourself into a corner.

The web browser is going to quickly evolve into something quite unlike the browser you’re using right now. It’s going to become an information processor. You will give it web sites to monitor. It will process the pages and reorganize the data into a format you define to make your consumption of that information easier.

You don’t go into a restaurant and just wait for the food to be given to you. You have choice. You choose what you consume and how you consume it. We don’t do this on the web. We force users to consume the information the way we tell them to. This will have to change. We will give them just the ingredients (the information, the data) and they will choose how they consume it. At which point typography from the developer’s perspective becomes completely irrelevant.

The point is simple: Web development is 100% information management. 99% of that is creating, organizing and structuring that information. 1% is presenting that information. Typography is 95% of that 1%.