Reactions to 95% Typography
An avalanche of comments, hundreds of applauding blog entries, honorable mentions from cooler and more sublime and hotter and higher places, forum discussions, translations in Chinese and partially in Italian and even blunt plagiarism was incited by one of my recent notes. In order to not answer to each commentator individually, I decided to write a summary that answers most of the raised concerns, accusations and questions. As a result I think that managed to make things a little clearer.
Sensationalist and unfounded!
Justin: My issue is quite simply your title. I don’t disagree that typography is important in web design, but you are implying that non-typographic concerns are unimportant. That is sensationalist and unfounded.
I didn’t intend to be loud or (un)popular. Until recently, mostly friends and clients were reading my notes. I had about 100 visitors a day. This article found its readers almost by itself. Within 30 minutes after posting it on reddit I had 1,500 users on my websites. That is not a given. Reddit is a tough place. From then on it all went by itself. Because it came from the guts, because it was passionate. Internet users appreciate that. And it must have had some truth to it…
I am writing these entries with the goal of publishing a book on usability and branding one day. And I am really enjoying the input, as it helps me improving my writing, my book, as well as my work. I learned more from the readers’ reactions than from many smart books.
Am I the only one saying so?
Joran: Type as interface. Such an obvious idea. So obvious everywhere. Google. Etcetera. Yet it’s obviousness is only articulated by some, i.e. I.A.
“Text as user interface” is a concept and notion coined by Cameron Moll. From the many positive many reactions I got, it’s become clear that I am not the first and not the only one to think so.
The Grid
The 95%-idea first came to my mind while designing. I realized that even after defining the information architecture in detail, frantically pushing around boxes and changing colors for days is an inefficient method. In order to find a nice grid, into which I could fill the usual modular navigational and content elements, I should start with the text mass and organize it with a grid that guarantees optimal readability.
Most websites try to get text across, and most websites fail in that regard. And the “cocky designer” website fails as much as the usability specialist’s with its unfriendly text sahara.
Usability alone won’t do
In 2004, design by fire started a little contest: Design eye for the usability guy or how to make useit nice. Via N. Derksen. Here is Cameron Moll’s suggestion: In the mean time, Nielsen finally seems to have dropped the 100% scaling of his old articles and added whitespace to his new articles.
Where usability gurus usually fail
- The text lines (measure) are too long
- 100% scalable is not a reader friendly solution: Don’t make me think, ok, but don’t make me resize my window either
- Lack of whitespace
- Lack of active whitespace
- Linespacing is too narrow
- The text blocks are not well aligned
- Too many font sizes
- Pictures are badly placed and disrupt the reading ease
Where designers fail
Scrivs, you are the dude 2.0—and your company does amazing stuff, but what were you thinking when you downscaled the font size on wisdump? I know that I can scale it up with a simple key combination, but I don’t want to. I used to read wisdump (ex whitespace) weekly. I don’t read it anymore because I am too lazy to adjust the font size.
Common art school graduate’s mistakes are
- Text-background color contrast
- Lazy handling of titles and subtitles
- Text sizes
- Text blocks that are not split up into enough small, scannable, digestible parts
- Indiscernible links. Visited and non visited links are not discerned
- Text is not treated as an interface but as decoration
- It’s not clear if the text is a navigational element, a link or plain text
- Fancy navigations marking the center of attention (content is the center of attention, content deserves the most love from the designer)
Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience.
Web designers are not reading enough books. We are hunting for interesting snippets and quick solutions via Google and Wikipedia and Alistapart. Yet typography is an old school discipline that requires a lot of studying, repetitive concentrated effort and looking at printed materials. Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal reading experience.
And typography is not so much a matter of taste as of rules and the method of applying them. There are clear rules for leading, spacing, kerning, and measuring font sizes. And if you know and apply these rules, the text will look better and will be easier to read. And if you know and apply them well, you have the right to work against one or the other rule as well.
Yes, these books are expensive, but they can make us much more money, as they will make our clients happy right away.
femmebot: Hmm, if we’re taking basic design elements, I’d say it’s more 95% (if not more) grids, not typography.
While researching how to methodically define a reader friendly grid, I realized that defining grids is a typographical issue in the first place. Particular revelations were Ruder’s book and Mueller Brockmanns book.
Mike: Sorry, web design is not 95% font selection.
I agree, Mike. But you didn’t quite get it. Master typographers don’t get tired of repeating that the main rule of the typographer is to make the text as easy to read as possible. I was pleased to read that what they describe as the typographer’s job is what I understood being the information designer’s job. ‘So after all, information design is not something we made up’, I thought. I said it before: Typography is not about choosing fonts.
Making the text easy to read is the design method I was looking for
As an experiment I followed this one rule (make it easy to read) for an afternoon, when ‘realigning’ the iA website. I realized that making the text easy to read is the design method I was looking for. In a medium that usually makes it very hard to read you have to know the original rules of typography by heart. The rest (colors, line or not, boxes, what picture and how big etc) falls into place by itself.
Even though we all know that reading is what we mainly do on the web, we thought that online we could snub the rules of typography. Some said that due to different platforms, annoying resolution issues and lack of fonts there was no point to even start to care for typography. What a cheap excuse! What a severe misunderstanding of the medium.
We don’t need to make sure that a website looks the same on all platforms!
Some think we need to use 100% flash to ensure that the site looks the same on all platforms. We don’t need to make sure that a website looks the same on all platforms! Again: What a severe misunderstanding of the medium. What we need to do is make sure that it is as easy to use and as easy to read as possible on the maximum number of devices through which it can be accessed. In Japan, it is a given that a professional website works on the cellphone.
We were too lazy
Nowadays we don’t need to fully define the grid before we set the type, we can always “still adjust it later on”. Instead of using the new possibilities, the new ease of defining a solid typographical grid, the commodity of laying out on the screen, and the possibility to adjust later on made us lazy and sloppy.
Instead of using the precious know-how that has been accumulated, tested and cultivated over the years and adapting it to the web, designers are playing around with boxes and colors and lines and flowers and funny ornaments, like kids, to be later on dictated to by hard headed artless usability nerds in beige trousers and pocket protectors how to deal with text, structure and color.
Because it is so hard to read online, the web thirsts after the typographical wisdom from people like Tschichold , Ruder, Mueller-Brockmann, Weingart , Bringhurst more than any other medium. And it is the numbers and facts of the typo bibles that should be aligned with the facts and numbers of the usability prayers. Then and only then we will start making websites that are easy to read and easy to click.
Why 95%? Why not 97? Why not 80?
95% stands for a method: Focus on typography, ask yourself, which text is functional, which text is passive, systematize them, order them hierarchically, simplify, create an interface, the rest will add up automatically. Until you have resolved the readability issues, don’t even think about changing colors, thickening lines, pushing pixels, choosing pictures. Start by designing grids on paper (this tip comes from a computer addict).
Justin: What got me angry, specifically, is John Gruber’s comment on Daring Fireball, linking to this article. That’s how I found out about this article in the first place. I read the guy’s blog every day, and there he is, basically saying that what I (and many others) do everyday is wrong. He used your article title and beat me with it as though it were a stick.
Maybe changing the title was a mistake
Looking at the state of web design today, and the wasted know-how we have about typography, that is what should make us angry. Maybe the title was a mistake after all. Instead of saying 95% of web design is typography, I should have kept the original title: “Webdesign is all about typography. Period”. That was probably the most efficient way to express what needed to be expressed. And then again, to leave a 5% margin for good taste can’t hurt. And as in the tech world 95 is a number occupied by Microsoft.
I agree: 95% is a punch in the stomach of many fancy web designers (and usability parrots), but a deliberation for a few designers and for many more users. I’ve been called four, seven and eight star words, a hero and an idiot, just because of my little article. Well, I learned how to deal with it: Adapt quickly, ignore impoliteness, take everybody seriously. That’s my advice for all designers, not only the fancy ones.
You have no idea about the medium
It’s true: Most people still do not understand the medium. Clients with random Internet experience often have the misconception that a website is like a cheap TV-ad that leads their customers directly into the store. All I have to say here: Explain to them what the medium is about. It’s about information. It’s not about shopping, it’s not about advertisement, it’s not linear. It’s about communication in one of its most competitive forms. Communication and not effects - that is what we should be concerned about as designers.
But then again: When a designer goes for 1024 and fixed width with his designer’s blog, if the designer optimizes his design for his audience, if a designer disrespects some major usability rule, even if he uses full on flash with a funky navigation - that’s fair enough. It doesn’t mean he doesn’t know what he’s doing. It’s not efficient, but that’s his choice. If he does the same for a website with a wider audience, then maybe he disrespects the medium. In any case, there is no need to insult people that are passionate about what they do.
The designer has to organize his design with regards to the message, i.e. the text he needs to transport - and with regards to the audience he expects it to read. Theoretically, it’s not much different from good paper design. In practice, we have to be much more aware of the medium than the paper designer. Our medium is very tricky. Even though we design for the screen: Websites have nothing to do with TV. That’s as true for this website as for yours or for Youtube. Even though we can choose among millions of colors, it’s not art, what we do, its product design.
Nice one. And now go for part III, Oliver…
I was pleased that my prior comment was of use to you. I think I did “get” your prior post, though. It seems you have improved it quite a bit since I saw it last.
I agree with your statements “… make the text as easy to read as possible,” and “typography is not about choosing fonts.” (My complaint was that you seemed to focus solely on fonts in your prior note, after making the case that “typography is not about choosing fonts.”)
Most of my criticisms of your current thoughts boil down to an issue of theory versus application. Specifically, I think that “web designers” and typographers who try to assert their ideas too forcefully in the web medium end up annoying some users, and we find it rather condescending when that happens. But the solution to the problem may not be acceptable for everyone, with the platform we have now. I say a properly designed site should be simple, leaving the font selection, spacing, width, layout, etc. mainly up to the user. Of course, people who actually have to make money in the website business must make these choices for their users (who often don’t configure their font settings to match their preferences) and must make their decisions work well “on the maximum number of devices through which it can be accessed.”
In some cases, or in the hands of an under-skilled “web designer,” this still leaves some minority of users (on unpopular browsers or platforms) looking at a mess, or worse, at a “your browser is unsupported, go away” message.
Unfortunately, it seems to me that the ratio of skilled to unskilled web designers is rather small, and the ratio of Typographers who work on the internet to all web designers is vanishingly small. I wonder if you would agree with this statement? Anyway, until this situation improves, I’m not leaving font selection up to the whim of the website.
Looking for common ground here, I propose that the proper (but difficult and unlikely) solution is a better platform than HTML/CSS that more readily meets the needs of the typographer, the web designer, the information architect, the graphic artist, without taking control away from the reader, and without looking horrible in the hands of an amateur publisher. I’d love to read a website that is as beautifully typeset as (say) a Knuth Mathematics textbook or a professionally-designed flyer… so long as I could still crawl it with a script, or display it on my cellphone, or turn it quickly into plain text.
In any case, I as a programmer would be interested to hear a “Master Typographer’s” answer to the question, “If you could create a rich hypertext medium completely from scratch and a browser for it, what would it look like?”
Best of luck to you on your book.
Thanks, Mike. Actually, you totally get it. I’d love to see that Knuth Mathematics book too. And yes I did improve the first article. Lots of spelling mistakes there, and some clarifications were needed. In its body it is still the same. But input from dedicated and pragmatic people like you helped me clarifying what I really intended to say. Thanks to everyone for that.
As for your last question, “If you could create a rich hypertext medium completely from scratch and a browser for it, what would it look like?”
I never seriously thought about that until now (I was too busy trying to figure out how to deal with the current one), and I won’t pretend that I’d have a better plot than the actual HTML/CSS combo that I could shake out of my sleeve, but I know that people who think more about that, sure do. You should ask Bodhi, a high end progrogrammer with a good eye for typography and pictures.
But I do know, that part of the problem is the font rendering of stupid Windows - or Linux for that matter. Fonts on the Mac are rendered as they’re supposed to be, they’re smooth, well spaced out, well kerned, the anti-aliasing is delicate and that makes them easier to read.
I am still waiting for that Mac ad where the PC is Times New Roman all pixelled and torn and out of focus next to the Helvetica (standard on Macs, doesn’t exist on PCs), promoting its superior font rendering. “Hello I am a Mac.” - “…and I am a PC.” No voices, no faces, no sound. Just the clicking of a keyboard. And then: “95% of the time we spend on the computer, we read.”
So if we blame the designers for bad design or fonts that are too small, we also have to consider that they use Macs developing the designs. Websites that look awful and are hard to read often are readable and nice on a Mac. That is no excuse , but we shouldn’t blindly blame them, as it is really painful to look at Windows if you have a delicate eye for typography. Hopefully Vista will change that.
Of course we agree that a webdesigner has no other choice than testing his designs on a PC, because unfortunately that is where most people will see our work.
So here is a good tip for young web designers from a dedicated Mac user: When defining the CSS of a website, do it on a PC. If it looks okay there, it will blow you away on the Mac.
I believe that developing on a PC could lead to better results, because you are working in such a hostile environment, that you have to give your best to make it work. Which, as we’re talking about quality work, has never hurt.
We have a couple of PC at the office to check our work (called “dirtyPC1″ to 5), and I recently use a PC at home as well. And everytime I have to read something on this machine it’s like going to the gym.
Come on, win XP is not that bad, a few tweaks and furthertaking software and it runs like hell. Unfortunately it’ll never be a clean mac, that’s right.
I am just talking about the font rendering. The interface as such is horrible too, but that’s another story.
Quick question for anyone. What is the name of the the grid layout book which was pictured twice in this article?
I fell in love with it immediately.
Grid systems, by Josef Mueller-Brockmann, in itself a work of art.
Steve rules!
Great follow up - should have at least waken a few people up!
[...]Web Design is 95% Typography，iA用了这么一个耸动的标题来强调’字’在网页设计中的重要性，提醒我们注意这样一个的事实：网络上95%的信息是以文字的形式呈现的，因此’字’是用户界面的根本元素，其选择和布局排版在网页设计中绝不容忽视，文章中还列举了一些设计人士常见的失误，颇值得一读[...]
Nice articles. Not sure if I agree 95%, but who am I to quibble. Typography is very important when it comes to Web design.
A few minor details. I think the text as UI thing was something the guys at 37 signals were the first people to talk about. Also, on the Design Eye For The Usability Guy bit. I actually did the “Web design” there with help from the other guys. Cameron, if I remember right, worked on the print in PDF form. Anyway as you can see by my write up I did much more than tackle the typographic end of things. Depending on what “Web design” means to you (and to many it means xhtml/css, semantic code, content, layout, etc.) if you spend 95% of your time and effort on typography you’ll have very little time left for the rest.
But I think I agree with the overall spirit of what you’re trying to say.
Keith, Thanks you for your nice words and putting things straight. I am sorry for getting that wrong. Especially your authorship on the Design Eye For The Usability Guy bit. Very nice work there Keith!
I corrected the text as suggested. I tried to find that “treat text as UI” snippet on 37 signal’s blog but couldn find anything. Guess I will have to ask Cameron directly where he got it from.
I think “treat text as UI” is what I mean by the 95% formula. It is more a method that a measure. We both know that the last 5% of our work take 80% of the time. Attention to detail is the hardest most time consuming part of our job.
95% - It is intended to wake people up, like I woke up when I first read “Great designers treat text as UI” in Cameron’s presentation and then looked ad Khoi’s website, and then looked at my typobooks and read that “Typographer’s don’t need no font choice. Renaissance typographers had one font and did the most amazing work.” That hit me like thunder and lightning. And this wake up is what I try to transport with the 95%. In terms of just designing I always did spend 95% organizing text as UI. I just didn’t realize that the right method in doing so is typography. Following typographical rules everything suddenly falls in place.
It is a mystery to me why I didn’t realize that before. I worked with wireframes and grids for a long time and spent hours and hours on CSS. What a moron I was to not see the similarity between old school typographical grids and IA/ID wireframes, CSS and even the final skinning. Tell me if I am wrong…
Of course there is much more to web production than design. Yet recently I do develop CSS and layout wearing a typographical glasses. And the first thing I do looking at websites is: Is the body text easy to read? The next question is mostly: Why not? If you ask me, that designers use hard to read fonts on their websites is paradox if not a scandalous.
Note that your spirit is the kind of spirt I am glad to share.
Thank you for putting into words what I’ve only just begun to struggle with!
This is something harder than all the arcane programming I’ve ever done: drawing the reader’s eye where I want it to be, when I want it.
Web Typography will advance by a mile once web browsers other than IE begin supporting the CSS2 specification for embeddable fonts. In this case, designers will be able to leverage their font investment and present web pages using fonts that they’ve chosen, not the ‘best guess’ ones that people ought to have on their machines (I have no default fonts like Tahoma/Verdana/Arial on my machine).
Your article has references to a number of typography books that I do not own and have not read. You are right: most are exensive! However, one’s mileage varies on the linksn to these books: most point to Amazon and allow one to order the book in question. However, the link to Emil Ruder’s “Typography” doesn’t go to Amazon, or to anywhere remotely useful. Here is the actual URL behind the Ruder link: http://wisdump.com/9rules/making-nothing-but-a-name/ This link points to a website that’s about devising brand names or some such trade—adorned with several links to get-rich-quick-without-working schemes.
Thanks Don,
Somehow this post got erroneusly deleted and the wrong link sneaked in because during the panicked reconstruction process. The mistake is corrected now.
Oliver
Ps: Yes, they are expensive, but Mueller-Brockmann is definitely worth its price, tenfold.
Well, what about this page then… Would you call this a design success? It’s readable but would you read it…that’s the question. In terms of information getting across it’s a no go.
When watching a monitor we don’t expect text (or perhabs in a sub title form) Classic typography laws do not apply, they should be re-written for a new medium…
A screen isn’t compatible with a book or paper, a different style is needed, obviously.
Thanks for guiding. All the things espically for typography. The drwabacks you have discussed, are very common to me. You must complete your book. I am waiting. Thanks again
I think this is why I am hanging out for Mark Boulton’s new book. I’ve yet to manage a successful vertical grid based on the typography, using CSS. Perhaps it is more achievable with CSS3?
I agree entirely with you. The beginnings of design start with the written word, and the font choice, the x-height of that font-choice, the leading, and so forth. Content really is King.
One thing I think is different about the web medium is line length. Some typographers recommend line lengths between 40 and 60ems, but I think, on the web, even with increased leading, it is probably half that. I do think that the emitting rather than the reflection of light will have some effect on general guidelines.
You have no idea about the medium.
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%.
The reason so many web designs fail (including yours) is that they “Start by designing grids on paper” and never move beyond that. A browser window is not a piece of paper. And a website is not a collection of pieces of paper.
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.
@Marjolein: Nice try talking down to me, but
I really wish I were preaching to the choir but I’m not.
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”).
@Marjolein: Do you really think only web designers that go for 800×600 and do liquid layouts understand web design? BTW: Doing a quick check, I got a scrollbar on my browser for your page at 800 (first screenshot) and at a random window size at 1024 (second screenshot), that’s why I guessed it’s optimized for 1024. Actually it’s a hybrid that scales down with a little scrollbar. My bad.
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.
Oliver,
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:
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. :)
Marjolein, Thanks for that in depth and friendly feedback! Like I said before, I made the comments about your scroll bar to explain why I first thought it’s “optimized for 1024″ (working for over 10 years in this field, I am also well aware how imprecise “1024″ is, but let’s not split hairs here).
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!
Bravo, excellent article again.
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.