{Serious} Web page design

[penagate]

You might remember my last thread in this vein, on user interfaces. This is the same, except dealing specifically with web design. I am planning on writing an article on this and I'd like to know anything that you guys especially like/dislike.

Some common themes from the UI thread:

• Clutter
• Fonts
• Colour combinations
• Tab orders/Keyboard shortcuts

I'll start with mine: I dislike layouts that shift around as the page is being downloaded. Especially noticable on slow connections, it is very annoying when you are already reading the text and it suddenly jumps or changes shape as an ad or something is loaded.

The article will discuss some techniques to overcome all these points. For that example, one method would be to use specific column widths. Etc. So if you have any possible solutions to design issues that you bring up, please post them also. Thanks.

- P

[gigemboy]

dark backgrounds with light text are to be avoided, as it makes it harder to read... backgrounds should generally be light with dark text, and not too busy with images, etc...

Fonts should be serif fonts for any blocks of text (does not straing the eyes when reading), sans-serif fonts should generally be used only for headings, very short statements, etc. (if any)

Light Earthtones are generally suggested for design color schemes as far as colors go, but this is not a must-have...

Most important... consistency... dont have pages that have a totally different color scheme and font setting, so the person knows they are on the same site, and the information is part of the same site...

These are just ramblings I remember from a design class I had in college hehe...

[bushmobile]

Fonts should be serif fonts for any blocks of text (does not straing the eyes when reading), sans-serif fonts should generally be used only for headings, very short statements, etc. (if any)

Shouldn't that be the other way around?

[RobDog888]

Pages that hang or are too damn overloaded with complications. This also makes it hard to find what your looking for.

Ugly bright distracting color combinations.

Funky fonts. Verdana is about the standard for web pages.

Not using thumbnails and loading the page with his res images.

Trying too hard to look like a complex site

etc.

[gigemboy]

Shouldn't that be the other way around?

No, I said it correct. "sans" means "without"... so sans serif means "without serif"... Serif fonts should be used for large blocks of text.. I will quote this article...

Fonts are described in terms of their face, style, size and color. There are two main types, namely, serif and sans serif. Serif fonts have small appendages at the top and bottom of the letter. Serif fonts are the preferred fonts for large blocks of text, since the serifs are thought to help to distinguish each letter and thus, make it easier to read strings of characters. Sans serif fonts consist of only primary line strokes and are therefore simpler in shape, e.g. Arial and Futura. In standard typography these fonts are used primarily for short phrases, e.g. headings.

Pick up any book and look at the main text... you will notice that they are almost always serif fonts...

[visualAd]

From a cosmetic point of view, things that personally annoy me:

• Sites created for screen resolutions of 640x480 and appear in a little box in the center of a huge screen.
• Pages which require side ways scrolling are a pain in the backside.
• Sites which think it is fun to disable right click and display an alert everytime you try.
• Forms with ilogical tab orders between fields and ones which do strange things when you press enter. They should submit.
• Pages which just "don't work", they rely too heavily on Javascript and the coding is poor enough to break it.
• Text which does not resize when you use the browser resiize function.
• Articles without a "Printable View" facility.
• Images containing huge paragraphs of text. You can't copy and paste these texts.
• Pages with frames or iFrames which are periodically realoded, hearing a click each time.

In my opinion a page that is designed well is one which I do not notice I am using. Before designing the page the author needs to be sure of the user base and the pupose of the page within the context of the application (of course consistency is important in multipage apps).

Users do not care if your page validates, if the source code is indented or frames are used. Their primary concern is whether it works and if it does not they loose interest very quickly.

[iPrank]

dark backgrounds with light text are to be avoided, as it makes it harder to read... backgrounds should generally be light with dark text, and not too busy with images, etc...

There is atleast one excellent exception: www.mendhak.com

From a cosmetic point of view, things that personally annoy me:
Sites created for screen resolutions of 640x480 and appear in a little box in the center of a huge screen.
Pages which require side ways scrolling are a pain in the backside.

Use Opera.

PS: I hate IE-specific pages. ('cause every other problem can be solved in Opera by a mouse click or F12)

[penagate]

Pick up any book and look at the main text... you will notice that they are almost always serif fonts...

Yes, but we are specifically discussing web design not books

Some excellent points so far. Thanks.

Adam,

Articles without a "Printable View" facility.

What about print stylesheets? Or do you prefer it if their is at least a specific print page?

[visualAd]

What about print stylesheets? Or do you prefer it if their is at least a specific print page?

It is nice to see what is going to print out. If there is a print stylsheet then a link which applys that sheet in the browser via JS would be useful.

[bushmobile]

Pick up any book and look at the main text... you will notice that they are almost always serif fonts...

Go to any website.. you will notice that thay are almost always sans-serif fonts (Including this one, your website, bbc, etc).

[visualAd]

Serif fonts improve readability of the text.

[bushmobile]

Do they?

That article linked to by gigemboy compares Times New Roman and Gigi, an ornate sans serif font. Have you seen gigi? Thats not an easy-to-read font.

The introduction of the article mentions a number of studies that have found no difference in Serif & Sans-Serif readability (using things like Tahoma / Arial)

[penagate]

Is a matter of preference, personally for onscreen text I prefer non-serifed font, for printed material I prefer serifs.

[bushmobile]

Is a matter of preference, personally for onscreen text I prefer non-serifed font, for printed material I prefer serifs.

ditto

[visualAd]

In ever notice - to be honest. But the serifs are designed to make it eastar for the eye to move from one word to the next.

[tr333]

one of the worst things i see in webpages is an overuse of html tables. it just shows a complete lack of understanding about CSS.