
A Dao of Web Design (2000) - luu
https://alistapart.com/article/dao/
======
niftich
This essay, and really, most of the content on A List Apart, have been
instrumental in championing accessibility, progressive enhancement, and
separation of content from visual flourish, so that the web didn't become a
pixel-pushing medium.

While their shoulders are giant, their message was often ignored, because many
designers -- often instructed by their customers -- continued to think in
terms of layout inseparable from their visual design.

Web users also valued consistent layouts, but it turns out, not enough
websites actually cared! Marketing pressures for visuals and refreshes would
frequently be at odds with the UI's UX. This is perhaps excusable for websites
whose sole reason for being was to be a digital billboard, but this would be a
point-of-contention for news sites, e-Commerce, social networks, and
productivity sites too.

We know this is what happened, because when the Web 2.0 "age of mashups" came,
most websites were caught by surprise. The coolness factor and emerging
business cases finally pressured them to make available snippets of their
content that can be surfaced independent of presentation -- but as a twist,
instead of sending composed documents, they largely turned to shipping around
context-free snippets of data. With content having been separated and spliced
into pages using JS, the tight combination of HTML+CSS became a layout engine.

~~~
deltron3030
>because many designers -- often instructed by their customers -- continued to
think in terms of layout inseparable from their visual design.

Because layout (space between elements) is inseparable from visual design,
it's what has the biggest impact on visual perception right after contrast
(visibility). Doesn't matter if web or analog design, it's a law of nature.

------
0xADADA
This article proposes a philosophy of working "with the grain" of the web that
has become the very basis of my approach to web development.

~~~
all2
> ... the very basis of my approach ...

Would you expand on your approach? I'm interested in hearing about how you
identify requirements, design of solutions, tooling selection, and
implementation of solutions.

~~~
0xADADA
@all2 : I've written an essay on my approach:

[https://0xadada.pub/2015/11/05/a-retrospective-responsive-
de...](https://0xadada.pub/2015/11/05/a-retrospective-responsive-design/)

but to summarize some of its main points:

Responsive design is:

* A process * A relinquishing of the false sense of comfort we get when designing for a “design comp” * An experience-first / MVP friendly approach to building dynamic, consistent and importantly a complete experience that adapts to users context * A conduit for the flow of of communication, and much much like water, it flows into different browsers & devices, flows into robot search engine crawlers, flows into RSS feeds, flows into meta-data (hReview) parsers, flows into printers, flows into read-later tools like Web Clippings, Pocket, Instapaper and FlipBoard

Responsive Design isn’t a set of CSS features, a technology stack or a set of
tools. Its when an organization decides to collaborate around a process; with
accountability to the user first, to each other second, and to solve the
technology last, once all important decisions have been made.

~~~
fenwick67
I don't think it's too prescriptivist to say, this isn't what responsive
design means.

------
matthberg
Though this article is quite well intentioned, it seems to be written under
the assumption that the web would evolve differently than it did. This is
rather unfortunate, since the described features and uses of browsers that
allow these design ideas to work didn't all come to be.

"...in the near future most web browsers will provide simple ways for readers
to adjust the color of elements on a web page, via user style sheets, which
can override your style sheets..."

While I believe that designing in an adaptive way, as described in this
article, is the best approach, I wonder how much it has been handicapped as a
method by browsers adapting to the web design methods that were actually used
instead of the ideal approaches.

~~~
niftich
It's a bit of both.

Early versions of Firefox shipped with a prominent stylesheet chooser in the
status bar, that allowed alternate stylesheets on the page to be selected. Of
course, hardly any website offered alternate stylesheets. So this later got
moved to a menu and forgotten. According to this MDN page [1], IE8 has this
feature too, which is wild to me, because that's right around the time most
people accepted this feature as irrelevant.

Several browsers offer a way for the user to set a custom stylesheet that will
be applied to every page. These options are almost always buried in some
forgotten corner of an accessibility menu, if a UI is provided at all. The
utility of this feature is passable when used to, say, enlarge text, or apply
basic formatting to well-identifiable elements like h1, a, or table, and very
useful for pseudoclasses. But because page layouts (i.e. the specific nesting
of container elements, and the styles that affect them) between any two random
websites can differ so widely, it's only capable of crude attempts to alter
layout.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/Alternative...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Alternative_style_sheets)

~~~
cxr
> _Of course, hardly any website offered alternate stylesheets. So this later
> got moved to a menu and forgotten._

It looks like it's even broken in the most recent versions—although I may be
making a bad inference and support was actually deliberately removed recently,
which is equally likely.

One of the only sites I know of that ever offered alternate stylesheets is
[http://virtualplastic.net](http://virtualplastic.net).

With Firefox's style switcher, you should be able to use "Page Style" from the
"View" menu to switch between all three, if things were working. By using View
Source on that page, you can see that there are three stylesheets available
called "red", "purple", and "default". Since the style switcher currently only
allows switching between styled and unstyled views, you have to use the in-
content links in top right corner of the page header instead. (Note that there
are only two icons for switching, though—"purple" is missing.)

------
uk_programmer
A List Apart was quite a nice resource back in the day. A lot of better
writing about web standards back then is still relevant now. Keeping
presentation separate from the structure of the document is a must and seems
to be forgotten today. It also helps with you JavaScript if you keep
everything nice and separate. I don't particularly like the Asian guru
terminology but It was all the rage at the time and everyone thought it was
cool for some reason.

> When a new medium borrows from an existing one, some of what it borrows
> makes sense, but much of the borrowing is thoughtless, “ritual,” and often
> constrains the new medium. Over time, the new medium develops its own
> conventions, throwing off existing conventions that don’t make sense.

This was quite apparent at the time IIRC. A lot of places at the time wanted a
web page to almost like a printed page in a magazine and there was even a lot
of magazine and newspaper style layout demos that you would find dotted about
the web. Many of these designs are quite dated today because the designers
were used to designing things for print rather than for web and never assumed
that the content would change.

So the page looked great until you put some real content in it that was too
long and then the nice layout wouldn't work.

I also remember Lorem Ipsum was used everywhere because it "flowed like real
text". Except it really didn't and you quickly found that it was utter
nonsense.

Lorem Ipsum would look like it took the space on the page quite nicely and
things would look decent on the PSD. Once you put in English or God forbid a
RTL language like Arabic it didn't work and everything again looked off and
half arsed.

> But beneath questions like “how do I make my pages look the same on every
> platform” and “how can I make my fonts appear identical on the Macintosh and
> Windows” is an underlying question – “how do I control the user’s browser?”
> Indeed, the word control turns up with surprising frequency.

I remember in the mid 2000s (I only just left University). I thought it was
the absolute height of skill to have my website look the same on every browser
that was available. Then I encountered a Macintosh and I realised that it was
I was trying to do was impossible because Mac OS Snow Leopard had different
mechanism for rendering fonts than Windows. It shook me to the core at the
time, I think I barely said anything to anyone for 2 days as I didn't really
want to accept the fact that what I thought was pinnacle of ability with CSS
wasn't actually possible. I find it quite amusing that I was once so
absolutely naive.

