Elements of a Clean Web Design

http://sixrevisions.com/web_design/elements-clean-web-design/

by sirwitti • 14 years ago

62 17 14 years ago

snambi• 14 years ago

Good points.

ec4295• 14 years ago

Hmm, I disagree. In my opinion, 'clean' web design means the now sadly old-fashioned approach of: have some text, marked up to indicate emphasis, headings etc., then let the damn browser decide what it should look like.

CSS to change colours and relative proportions is, I suppose, a concession that had to be made to 'designers', but when you, as the page author, are having to concern yourself with typography, then something has gone horribly wrong. Layout, spacing, leading - these are all the /browser's/ job; at most the page should give a few hints ("this section needs to be clear" -> use more leading/spacing), since such hints are meaningful to other renderings than the graphical browser. Did these designers ever stop to think about blind people relying on text-to-speech? It's obvious how that should render - with emphasis - but what does it do with "letter-spacing:110%;"?

As for the advice about using a grid, that should definitely have been accompanied with the caveat that your design should still flow to the browser's width. Fixed-width web pages are _evil_, where by evil I actually mean _stupid_.

thatjoshguy• 14 years ago

> It's obvious how that should render - with emphasis - but what does it do with "letter-spacing:110%;"?

    <span style="letter-spacing:110%;">forever</span>

is better than

    f o r e v e r

Especially taking accessibility into consideration.

Typography is relating to the design and appearance of the page. It should still go hand-in-hand with creating semantic markup of the actual page.

swah• 14 years ago

But fluid design for packed pages is hard... Just see Facebook. Its a pretty good design IMO but its fixed.

earnubs2• 14 years ago

I like how you quote the word designers, it helped me to discount everything you said.

However, for what it's worth, of the many stupid (or is it evil?) things you wrote the best was 'how should a screen reader deal with letter-spacing'. Letter spacing is an aid for the visual user it makes text easier to read in certain cases. A screen reader doesn't 'read' in the human sense.

talmand• 14 years ago

The quote around designer bothered me too. Seriously biased me against his opinion since that was indication he doesn't care for any other opinions if doesn't agree with his.

For instance, as you point out, his complaints about visual design in reference to blind people makes absolutely no sense whatsoever. Either he is really outdated in modern theories of web design/development or he's just being confrontational on purpose.

ec4295• 14 years ago

I disagree: increased letter spacing is a form of emphasis.

Perhaps you are confusing it with kerning, which does make text easier to read, and which absolutely should at all times be automated (no exceptions, not even for 'display' text).

Also, I quoted "designers" in the strict sense of scare quotes: to indicate that the word's meaning was different from (my understanding of) its usual definition. Most people who design things are not visual artists; properly construed, "designer" is almost synonymous with the modern meaning of "engineer". However, on the web at least, its meaning has been blurred.

batista• 14 years ago

We had that, it was called gopher. We didn't like it then, why would we suddenly want it now? It's not as if design, from typefaces to colors to everything else, does not complement the content.

If anything, the kind of non-design you seem to want is a regression to even before not just the web, but writing itself. Graphical elements, colors and design touches were part of the written word since before Gutenberg (from the ancient egyptian hieroglyphics, to the arabic ornamental manuscripts to the elaborate scrolls of the middle ages, to William Morris).

I'm not sure. Fixed-width is better for human consumption for several reasons, not just because books and magazines are fixed width. For one, we like to read a number of words on each line, not everything that fits in a huge horizontal lines of text in a 30" monitor. Second, we like the text we are reading to have some proportional relationship with the figures, images etc that come with it -and those images are fixed-width. Catering to multiple widths is less of an ideal, and more of a pragmatic necessary evil due to varying computer screens. Let's not make a virtue out of necessity.

ec4295• 14 years ago

That's not gopher. Gopher doesn't have semantic markup. In fact, gopher doesn't define a document format at all (unless you count the format of the menus); it's a transport protocol.

I'm not advocating regression to non-design; merely the automation of design, and its implementation as close to the user as possible. It may disturb the more artistically inclined to learn that their profession is in the process of being obsoleted by technology, but there it is and I hope they won't be Ludditic about it.

"we like to read a number of words on each line" (etc.) - who are "we"? I certainly don't; a line break forces you to re-acquire the text stream, producing regressive eye movement. Do you have data for your assertions? My understanding of the science was that the optima are narrow columnar formats and maximal width.

benihana• 14 years ago

>Hmm, I disagree. In my opinion, 'clean' web design means the now sadly old-fashioned approach of: have some text, marked up to indicate emphasis, headings etc., then let the damn browser decide what it should look like.

What you're describing isn't clean web design, it's HTML without CSS.

>Did these designers ever stop to think about blind people relying on text-to-speech? It's obvious how that should render - with emphasis - but what does it do with "letter-spacing:110%;"?

Yes. Check out the concept of the semantic web. It's the idea that the structure of the page should give some semantic meaning to the content. Which is why the use of or tags is eschewed in favor of and .

>Fixed-width web pages are _evil_, where by evil I actually mean _stupid_.

Depends on the content. If I'm reading a something text-heavy, I want the width of the page to be relatively small - I find it much more comfortable to have a vertical column of words.

generalk• 14 years ago

  > CSS to change colours and relative proportions is, I suppose, a concession that had to be made 
  > to 'designers', but when you, as the page author, are having to concern yourself with 
  > typography, then something has gone horribly wrong.

Have you stopped to consider that some page authors want to concern themselves with typography? Not everyone is aiming to just dump content at a user-agent, and not every message is best delivered that way.

Also: nobody has to concern themselves with design. I'm sure you know that you can put up some semantic markup and expect UAs to figure it out, and they will. If you want to let browsers dictate the layout of your content, that's a doable thing. If you want to put some directives on top and tell the browser what fonts/colors/positioning etc you want, that's doable too. Where's the issue?

  > Did these designers ever stop to think about blind people relying on text-to-speech? It's obvious 
  > how that should render <em> - with emphasis - but what does it do with "letter-
  > spacing:110%;"?

So, you're saying that because some user-agents ignore visual styles, nobody should use visual styles? I mean, a screen-reader is going to ignore things like letter-spacing, font choices, etc, anyway.

  > Fixed-width web pages are _evil_, where by evil I actually mean _stupid_.

Those are some pretty loose/insulting definitions of both "evil" and "stupid."

Chris_Newton• 14 years ago

It sounds like you want a complete separation of content from presentation.

While that may be an appealing ideal, particularly if you personally prefer to concentrate only on the content, I don't think complete separation can ever be possible.

Content should always be paramount, but the reality is that presentation does affect how that content is perceived. Presentation of text content can affect reading speed and retention. Presentation of graphical data can highlight useful patterns or it can obscure and mislead. In some cases, a minor adjustment to the content itself will give better results than changing the whole presentation: consider the editor who recommends slightly rewording an article rather than accepting a semantically awkward line break.

You can choose not to specify anything about your presentation, but that doesn't mean it's not there, only that you're going to get some default behaviour, which may or may not be any good for your content.

This does pose a genuine issue for those with disabilities, who may use assistive technologies to access the same content but not necessarily with the same visual styling. This is one good reason for marking up Web content using semantic HTML, and then applying visual styling as an extra layer of presentation on top: alternative tools, such as screen readers, can present the same information in different ways for audiences with differing needs.

As far as fixed-width pages being evil/stupid, I think as an industry we've grown beyond treating page layout as a dichotomy where it's either "fixed width" or "fluid layout". With the myriad devices used to access Web content today, neither a completely fixed-width layout nor a classical fluid layout with widths given using relative units or percentages is likely to be much good for all likely screen types. Thus we see the emerging field of responsive design, where content-rich sites specify multiple layouts (any of which might contain fixed and/or fluid elements) and choose between them based on screen resolution, device orientation, physical screen size/pixel density, and so on. We've even been seeing interesting research into responsive content recently, where more than just the layout adapts to give a better experience particularly to users of mobile devices with small screens and different browsing habits, though personally I think the jury is still out on that one. In any case, hopefully we are well past the days of either specifying a wide fixed width that doesn't work very well for smaller devices (or those who just prefer to browse in a relatively narrow window) or specifying no width at all and allowing text content to get far too wide to read comfortably on large screens.

bborud• 14 years ago

You sound like me 19 years ago. I now think I was wrong, but I can understand where you are coming from.

Not caring about typography and how something looks is much like not caring about eye contact and tone of voice when talking to people: it is a bit autistic and generally doesn't help communication.

But as I said: I can understand where you are coming from. Most web design is terrible -- and the more money you spend on it, the worse it gets.

ec4295• 14 years ago

Well, I'm a bit autistic myself, so it's no surprise. But in fact I do care about typography (in particular, I obsessed over bad kerning /before/ xkcd mentioned it); I just think that typography /is not the job/ of the creator of the page. Essentially everything we know about typesetting running text has been successfully automated for years (heck, TeX could automagically typeset mathematical copy 34 /years/ ago), so _push that decision as close to the user as possible_.

It's very much a UNIXy attitude, and ties in to ideas like "mechanism, not policy". If stylistic fashion changes, much simpler for the browsers to update their presentation mechanisms than for every website to redesign their CSS. Policy should be pushed as close to the user as possible - but the flipside is that the user shouldn't have to decide anything you can reliably deduce automatically; applying this with the web designer considered as the user of HTML, CSS etc is left as an exercise for the reader.

yaix• 14 years ago

Primarily, good design should not distract the user's from the content or main objective of a page.

For example, text content should be dark, navigation and other stuff should be light or grey. Use simple icons that do not distract. Don't distract the user by large unrelated graphics or images. Don't use animated stuff if it's not related to the content (or monetizes the page). Keep everything around the main content simple and lighter than the main content.

Elements of a Clean Web Design

Related Stories