Design philosophy

I just got a mail from Chris, who likes my site, and asks the following question:
bq. Just wondering did you ever write something about how you built your site? I could figure it out by studying your CSS, but I thought perhaps you have already made it easy by writing something up about it. Thanks.
His question aligns nicely with the piece I was about to write, so I’m going to answer Chris’ question in some detail before I write my other piece.


h3. Functional minimalism
p(rJust). !/download/171/lc4.jpg (The 1928 Le Corbusier LC4 Chaise Lounge is a truly beautiful piece of furniture)!
These two words provide the most accurate description of why this site looks as it does. If design elements don’t serve a purpose, they shouldn’t be here.
As I’m saying in a comment to this entry, I prefer the 1928 Le Corbusier LC4 Chaise Lounge to the lush Chesterfield furniture.
h3. Markup quality
I don’t let browser bugs or limitations compromise markup. Just because an aging browser doesn’t support a certain feature, you shouldn’t alter and complicate markup.
I do this to obtain _total_ separation of content and presentation. I’m not just talking about not using tables for design, I’m talking about not using @

@ elements where they do not provide logical divisions between parts of the content.
This means that I won’t use several nested levels of @
@ elements to enable me to create certain visual effects.
h3. Graceful degradation is good for you
Back when I first started _learning_ web authoring around 1996/97, some very insistent people were preaching the Gospel of graceful degradation. This has stuck with me.
Whenever I want to achieve any visual effect that’s impossible to create in, let’s say, Internet Explorer, I try to create it in CSS, using any level of CSS I find neccesary. If the technique degrades gracefully, and the function of the site doesn’t depend on it, I use it.
h3. Minimize hacks
If I want a certain design feature, I always look at how it can be done without invalidating any markup. And if I cannot do it without invalidating either my CSS or my markup, I do a quick evaluation:
* Does the feature degrade gracefully? If so, I do it without hacks.
* If it doesn’t degrade gracefully, I ask myself what benefit the feature gives my visitors. If the benefit isn’t significant, I usually end up not doing it.
* If the benefit is greater than the “cost” of the hack, I try to choose the hack as carefully as humanly possible.
In practice, the combination of these three usually means that I do a hack for Internet Explorer, and place it in a separate stylesheet hidden for other browsers by using conditional comments.
h3. Lynx is King
Lynx is the first browser I check in, and it’s the last browser I check in. If the site is hard to use in Lynx, or the information isn’t easy to find, going back to scratch is the first and best thing to do.
Why? “The single most important user”:http://www.google.com/ is blind. That this user actually is a horde of computers located somewhere in California is irrelevant. It is the single most important user there is.
A positive side effect is that the visually impaired user also gets a far friendlier site.
So, Lynx first, and Lynx last. Lynx is king.
And it doesn’t hurt to check in a browser with image support, but without CSS. If your images serve no purpose then, rip them out and use CSS to show them.
h3. Slow modems still rule
I believe that a significant portion of my users are on broadband, yet: Designing with the 28 800 bps modem in mind improves the experience for broadband users significantly.
It’s better to give the users a fully functional page in 2 seconds, than letting them wait for 10. Visiting a web site should ideally be as quick and easy as flipping the pages of a book.
h3. Final words
I have not covered how I have done and organized my Movable Type templates, as that is a posting far longer than this one.
And before someone flame me for being a markup-zealot: I _know_ that part of the philosophy I’m following here isn’t always a viable option for commercial projects. Other parts of this philosophy, on the other hand, could do some commercial projects some good.

8 Comments

  1. Arve,
    I so completely disagree with the majority of statements you have made. That is perhaps because I have a different “philosophy” of design and I think different of its purpose. And perhaps because mine is a mainstream huge-traffic site, I possibly have other constraints that you do, as well.
    A conceptually different objective function and a different set of constraints must give different results, bar some coincidence.
    And if I weren’t constrained, I wouldn’t have followed your path, either!
    I am glad that there is room for both of us on the web, though 🙂
    regards,
    M.

  2. bq. A conceptually different objective function and a different set of constraints must give different results, bar some coincidence.
    I never wanted to imply that all web sites should look the same, or that the constraints I apply here should be treated as the Universal Truth.
    Perhaps I could explain this in terms of an analogy: The choices made for this site is the choice between the lush, heavy designs of classical Chesterfield furniture, compared to “Bauhaus furniture”:http://www.newage-living.com/.
    My personal preference is with the “LC4 Chaise lounge”:http://www.newage-living.com/furniture.php?sub=lounge_seatings&art=L01.

  3. A.,
    Though not all of your posts call for feedback, as some are announcements, I assume that you wanted to converse with your public, at least implicitly. So I’m going to respond in detail.
    I also have to assume that the length of the comment post is not limited. If it is, what is the limit? And if it isn’t, can I copy and paste “War and Peace” here??? 🙂
    I’m going to be logically evil in what I write, I must warn…
    1. To start, I have noticed that a photograph of a dentists’s bed appeared on your post page. Obviously, you are going to argue that it is a chaise lounge, but to me, it looks like a dentist’s seat, with all associations that implies. At least I haven’t had pleasant experiences with the dentists (with one exception of one fortyish lady dentist whom by necessity I had in extreme close-up for extended periods of time [time doesn’t exactly fly at the dentist’s], but I digress). And that brings me to the first point. We go to the dentist because going to the dentist is useful. Even an attractive she-dentist isn’t going to change the fact that it’s not a pleasure, to sit there and hold your hands fast onto that modern iron maiden. There are as many site profiles as there are people, someone might be tempted to say, but that is not true. Each of us categorizes the sites he visits. So there are sites we visit, but it is not for the way they are designed, laid out, or coded. We get what we want, fast, and we get out. No, scratch that – we get what we need, and then get ast asap. I don’t care if BBC or CNN are badly designed. They are, in more ways than one. I would certainly go for minimalism for this kind of sites. Text-only with minimal semantic markup and no images would do very well, thank you very much. But others? I would rather they had as little to do with the dentist’s as possible.
    2. On top of #1, the following comes to my mind – do you design for your audience? And if you do, how does the end result reflect on you, for surely your audience does reflect on you in some way, especially if you go out of your way to constrained-accomodate their needs? If the audience is of the hit-and-run type, either the googlers or the news-seekers who do not give a cheddar who is behind the site, how the latter looks, what the intentions of the author are – well, then, certainly, the minimized, handheld-style, dentist chaise lounge seems to be optimal. But others?
    3. Functional minimalism, number one on your list, is what it says it is, at least semantically. Minimum mimimorum of functionality. No more than the lowest-common denominator is able to handle. Fine, that is one way to approach a site design. I have always been the most vehement critic of such an approach, because it is all an illusion. Currently en-vogue trends apply to your humanitarian side, emphasizing the need to accomodate those with special needs. Fine, one can hardly argue with that. Yet what I see more and more is that this issue is hyperblown out of proportions. Any move you make these days is first evaluated according to those lines, in the strictest of modes possible, whilst all that really matters is either egnored, or ridiculed, or has its importance minimized. Why this is, I do not know. I have theories about that, but they are not fit to be displayed in public. But maybe they will, if I do what I promised Mr X to do… Ad rem – accommodating the tiny minority of special need is not to disregard 99% of your audience. The numbers will depend on the type of site and its reach, but you get my point. Functional minimalism does not benefit anyone. Not one person. Do the minimum and not less, but not more either? That is functional minimalism. That is one of the official guidelines on how to write head profiles, if you are going to extend your metadata. Also, that is how programmers like to to get their text cases. That is how Peter-Paul Koch, whom I very much respect for many reasons, likes to get his mail, especially about browser support data. But we do not write websites that consist only of test cases. We do not write the briefest of minutes. Functional minimalism is good for Atom or RSS entries. They should be functionally minimal. The spec designers took care to determine all the necessary ingredients for you; all you have to do is write the one-liner. And I am not surprised that people who are both heavy RSS users, and programmers, and spend a significant portion of their online life dealing with code, test-cases, news and posts, prefer functional minimalism. but others? If you reach out from the relatively small ghetto of coders, and technically-oriented people, you will see much more than the audience the soze of Holy Father’s in Rome, or protests, or parades of the grand past we all share. No, there are tens of millions of people using the web. They are normal people, who do not have their perspective skewed by technical education, or simply by self-fulfilling prophecy of preferences in the sense of mechanism design. And before you, or someone else takes my words the wrong way – I mean “normal” in a normal way, that is: the norm is the wide public, not the narrowest of margins. And I will tell you this: whilst people like speed, they hate functional minimalism. Or perhaps despise is a better word. No one likes to go to the dentist’s out of their own volition.
    4. In your piece on functional minimalism, which I already slammed (a popular and unjust word for “disagreed with”, but we have to be hip these days, or die – no?), you also mention, to quote, If design elements don’t serve a purpose, they shouldn’t be here.. Oh praise Grand Moose, how deceitful a phrase! My goodness! What purpose, may I ask? Purpose is an endogenous variable, it is explained by the model, is tied to all, or some, other elements of the model, it isn’t taken as given. What a purpose stands for for X, it doesn’t for Y, whilst X and Y may very well write about the same topic! What you probably meant is that “useless ornamentations and pieces of code must go”. If you mean blockquote tags used for indentiation, then I will agree with you. If you mean a gazillion of image tags inserted at the beginning of each paragraph, then I will agree with you also. but I would disagree that the indentiation itself as a concept has to go, or that image ornamentations for paragraphs have to go. I have a different approach – I do not consider colors, graphics, and effects of all kinds “superfluous” in the sense that you can safely get rid of them. Go to my website. Strip away the CSS, and you may as well strip the human being behind it. My words without my design are nothing, mean almost nothing at all. If I had only an option to format my words in bare paragraphs, and then slap a border or two around my sections, then I will tell you right now – I wouldn’t have done it at all. I’d just search for another medium, or transfer my creativity into some other channel. If you think of a half-agreeing rebuttal that yes, indeed, photography sites indeed need graphics, then think again. It is this extreme opposition which I love to disagree with, because it is soooo manipulative, pure sophism! Argumentum ad absurdum never worked its charms on this individual, I will tell you that. There is a world whole between these two extremes. I could talk for hours, but I will just shut up, and say that Purpose, as you seem to understand it, is constrained within the handheld-news hit~and~run type of visitor site. And others? Where are the others? Even if this is not an extreme of the dentist’s, I would say that John-Lennon style bare walls, and no furniture would make everyone mad in no time, or at least run away even sooner. It is understandable that some people have a preference for minimalism in anything they do, but to presuppose that everyone does? And which sites people willingly come back to, those where design was minimal, or the others?
    5. In the section about markup, I see my favorite phrase of the first decade of this millenium: “you shouldn’t”. If I were a programmer, I would write a bookmarkelet that would construct a page rank for me – how many mustn’ts and shouldn’ts a given page contains, if there is at least one phrase of the following involved: {markup,CSS}. But I digress. You say that we shouldn’t complicate markup? Does it contain content delivery, too? If I were so uncompromising, I would stab the IE users, whose browser doesn’t understand uncompromised application delivery type. I would stab the Gecko users in the back, all kinds of Gecko, because their browsers do not understand XML beyond the generic application/xml content type. Also, I would effectively block pages from them, if I relied on standard entity encoding AND make use of XHTML extensibility. Their browser would fail to display all pages where a keyword entity is used in such a setting. So who am I left with? Opera and Safari. but wait, there is more. Safari displays a blank page if CSS is loaded via PI. So that leaves Opera. And since I am to be uncompromising in my markup and CSS, I will not cater to Opera bugs, which means that older versions will see nothing instead of nested multipositioned sections, or will see the design all gone to cheddar, with unreadable text, becaus the author didn’t compromise. So, how many users have I lost by refusing to compromise? Nearly all, my friend. So, I do complicate markup, and I do complicate CSS. There is no other way, unless your audience is composed only of Opera 7.5 alpha geeks.
    6. Total separation of content and presentation, which you talk about in the same paragraphs as yoyr goal, is another urban legend. Not only that, it is actually undesirable, at least for me. If you rely on at least one adjacent or descendant selector, and if your document is more complicated than a linear structure homogenous of type 1, then you will NEVER separate content from presentation. Moreover, we may all argue till we are blue in the face over what is presentational and what isn’t. The examples you give, about DIV sections, have nothing to do with total separation of content and presentation. They are examples of better structure, but separation is out of place in that paragraph. Redundancy isn’t out of place, and this is what you actually meant I think. You emphasized the word “total”, so I do not allow myself to presume that you wrote that by accident. Your posts are always minimal, and thought-over, so I have no other choice but totally disagree with what is not written by accident. In the same breath, you mention visual effects. I do not think that visual effects (which I and 99% of the population like) go well together with functional minimalism. After all, they are superfluous, are they not? I assure you that they way I write my CSS experiments is very self-constrained. I always aim at the smallest intersection of minimal CSS and totally minimal markup, and my experiments, most of them, are about design type you never mention, because it is neither graphic art-deco, nor in the spirit of functional minimalism. But I digress. Again!
    7. You mention that you first “learned web authoring around 1996/97”. I did so in 1997 at first, to fully play in 1998. In that paragraph you describe the iterative process you use. I don’t use iteration, not to mention that I do not start with Internet Explorer, like you seem to state there!!! I first make a visual sketch in my mind, behind closed eyes, assemble the color fractals I want to see, the appropriate aura, and then do things strictly in accordance with standards and code-minimalism. But my design is never minimal! That is the difference between my approach and yours. Whilst we might shake hands on code-wise minimialism, we disagree as two pub Irishmen when it comes to the design itself, the end-product, which is why you wrote your entry, and I responded. After I achieve what I wanted, I test in all browsers, beginning from Opera, through the most modern others. In that order: Opera, Opera mobile, IE, Lynx, Gecko. The last one I usually ignore. They are the most (negatively) arrogant users outside of Redmond.
    8. You speak about hacks minimization. I am not sure what it means. Does it count for minimal if I never used a Tantek voice-family hack in my life on any page? I use only two hacks. One is the |* html| hack for IE, another is the :root hack for Gecko, which I use only if I am not enraged by their attitude, which is rarely. No other hacks entered my CSS. In XHTML, I do not use hacks at all. So, where do I stand? I am willing to agree about hack minimization, which is one of the traps the newcomes fall into. They want to have it all looking identical in all crappy browsers of the past, and the price they pay is that they burden everyone by making life less unbearable for those who haven’t any clue anyway. I ignore all old browsers per rule, and I have never heard a complaint from my users. The only negative mail I ever got about the website design came from the Mozilla camp. I leave the conclusions from this tale as an exercise for the reader 🙂
    9. Lynx isn’t king. Not by any means. Pages I write are super-accessible, and with a small collection of unavoidable items, I have made every precaution to make it as accessible as possible. I used Lynx twice in my life. Does it tell you something? Google loves my site. I have a very high rank, and enjoyed it for more than two years. I get positive comments from disabled people, including one I shared my life with at one point. I never used Lynx. I cringed, I really did, when I read the phrase: “Lynx is King”. I know what you meant, code-wise, but I so vehemently disagree about the website design as a final product, that either my veins burst right now whilst trying to fit all my thoughts on the subject into this tiny box, or I will simply skip! Considering the length of this post (which I type quickly and without spellcheck), I think that I will choose the latter. I am sure that you know what I am going to say anyway. If there is the slightest doubt left, I welcome you to my literature author pages 🙂
    10. In the last entry you mention that your methodology (I wouldn’t call it a philosophy) isn’t viable or attractive for commercial sites. Yes and no. No, because they need to optimize their code (one of the worst offenders is Amazon, an otherwise excellent site). yes, because the world is not about going to the dentist’s, whatever that means…
    I have no idea what your policy is on such long comments, but in any event, I remain in respect (and in disagreement).
    M.

  4. So that I don’t appear so grumpy, I will say that I noticed something new on your site. A popup!!! I will let your visitors discover it for themselves 🙂
    M.

  5. Before I respond; I noticed that you use raw markup for inline formatting of strong and emphasis. No need: Use “_” around that you want emphasized, and “*” around the text you want bolded. The text formatting system is called Textile, and there is a good introduction on “Brad Choates site”:http://www.bradchoate.com/weblog/2004/02/05/textile-tips.php.
    bq. I also have to assume that the length of the comment post is not limited. If it is, what is the limit? And if it isn’t, can I copy and paste “War and Peace” here??? 🙂
    Technically, I don’t have a limit, but rest assure, if someone were to post the Old Testament here, the comment would be deleted. For being off-topic 🙂
    bq. To start, I have noticed that a photograph of a dentists’s bed appeared on your post page. Obviously, you are going to argue that it is a chaise lounge, but to me, it looks like a dentist’s seat, with all associations that implies.
    Obviously, you haven’t tried sitting in Le Corbusier-designed furniture, or seen it live? I can assure you that this neither looks or feels like the dentists chair.
    bq. On top of #1, the following comes to my mind – do you design for your audience? And if you do, how does the end result reflect on you, for surely your audience does reflect on you in some way, especially if you go out of your way to constrained-accomodate their needs?
    I design for my audience. I am part of that audience:
    * This weblog works as my backup memory. I frequently go back and revisit some of my writings.
    * I read comments, and respond to them.
    This means that I design what I would want to see and use if this was not my own site.
    bq. If the audience is of the hit-and-run type, either the googlers or the news-seekers who do not give a cheddar who is behind the site, how the latter looks, what the intentions of the author are – well, then, certainly, the minimized, handheld-style, dentist chaise lounge seems to be optimal. But others?
    The bulk of my visitors are return visitors. The most popular document on this server is the “full-text newsfeed”:http://virtuelvis.com/feeds/fullrss which means they are after the content in the most convenient way possible.
    bq. Ad rem – accommodating the tiny minority of special need is not to disregard 99% of your audience.
    Is there anything that lead you to believe I am ignoring my audience?
    bq. But we do not write websites that consist only of test cases. We do not write the briefest of minutes. Functional minimalism is good for Atom or RSS entries. They should be functionally minimal. The spec designers took care to determine all the necessary ingredients for you; all you have to do is write the one-liner.
    Atom and RSS are only different delivery mechanisms for what is important: Content.
    bq. And I will tell you this: whilst people like speed, they hate functional minimalism. Or perhaps despise is a better word. No one likes to go to the dentist’s out of their own volition.
    If we broaden the scope, I think you will find that large parts of the world disagrees with you. That is why Mies van der Rohe, Le Corbusier and Eileen Grey are popular, or for that matter any Ikea designer.
    bq. If design elements don’t serve a purpose, they shouldn’t be here.. Oh praise Grand Moose, how deceitful a phrase! My goodness! What purpose, may I ask?
    I’ll answer, and add.
    bq. If you mean blockquote tags used for indentiation, then I will agree with you. If you mean a gazillion of image tags inserted at the beginning of each paragraph, then I will agree with you also. but I would disagree that the indentiation itself as a concept has to go, or that image ornamentations for paragraphs have to go.
    I mean a gazillion image tags, I mean semantically overloaded markup to create visual effects.
    I do also mean ornamentation where the ornamentation does not perform a function. I’m not saying that there is no function for ornamentation, I’m saying that any ornamentation you add should serve a functional purpose, regardless of what that purpose is. This applies to colors, fonts and any other design elements.
    I see web sites every day, where the designer has added or used visuals, but where there doesn’t seem to be any coherent thought
    bq. I have a different approach – I do not consider colors, graphics, and effects of all kinds “superfluous” in the sense that you can safely get rid of them.
    Colors, graphics or effects aren’t “superflous” – for the intended audience, you use this to emphasize parts of the experience, and make the visit as comfortable as possible. They are a means to an end, not the end itself.
    bq. I don’t use iteration, not to mention that I do not start with Internet Explorer, like you seem to state there
    I do not start with Internet Explorer. I start with determining the content and purpose of the site. Then I determine the functional requirements (sans styling — this is the “Lynxism”). After that, I apply styles, after the book. After style is applied, I then check in browsers with a minimum amount of CSS sanity, like Opera and Mozilla. I then re-evaluate the result, and make any changes neccesary
    bq. You speak about hacks minimization. I am not sure what it means. Does it count for minimal if I never used a Tantek voice-family hack in my life on any page?
    By hacks minimization I mean that, _for this site specifically_, I will only apply hacks if the lack of hacks has severe accessibility implications. I do not apply hacks if a border is one pixel off in MSIE. Specifically, this is the part that may not be viable for commercial projects.
    bq. Lynx isn’t king. Not by any means. Pages I write are super-accessible, and with a small collection of unavoidable items, I have made every precaution to make it as accessible as possible. I used Lynx twice in my life. Does it tell you something? Google loves my site. I have a very high rank, and enjoyed it for more than two years. I get positive comments from disabled people, including one I shared my life with at one point. I never used Lynx.
    Different words, different approach, same end result. While you may not _use_ Lynx, you are still treating Lynx as king. There is more than one way that leads to Rome, and those who walk to Rome need not have the same world-view, they may still get there if they are determined enough.
    Finally, about the “popup”, or “easter egg”, as I prefer to call it: It is “well documented”:http://virtuelvis.com/archives/2004/01/css-for-opera-7.

  6. Moose, I take it you’re referring to http://www.lofotenmoose.info as the “mainstream, huge-traffic” site? Good god, man, that site refutes any argument you could possibly make against minimalism!
    I’m sorry, but it’s flat-out ugly, and its ugliness makes it difficult to use and to understand what’s going on, exactly. I would have an easier time accepting your viewpoint were you able to either demonstrate or refer to a convincing counter-example.

  7. My good sir, we certainly appreciate your valuable input into this discussion. We cannot help but feel impressed with your insight.
    I of course thank you for your opinion on my site. If you think you have any valuable feedback with respect to how my site looks and works, contact me _directly_. If you have the guts, that is.
    M.

  8. Analyse av Virtuelvis

    Ein blogg eg leser ganske regelmessig er Arve Bersvendsen’s Virtuelvis. Arve er ein ganske kjent person i diverse Usenet grupper, der han kjem med gode innspel om web-design og koding. Bloggen Virtuelvis er ikkje brukt til personlege innlegg, det vert…