Standards of Web Design

Date: January 28, 2007
Time: at 8:30 pm
Posted in: in standards, web development
Comments: Comments (7)

Let’s be brutally honest: there are thousands upon thousands of websites out there which look horrific. They’re just flat out bad. Now, different websites serve different purposes. It’s perfectly okay to have flashy graphics on, let’s say, a gaming site. It’s perfectly acceptable to have pink text on, let’s say, a site about flowers. But there is a point where it has its limits.

Let’s dissect this a bit more by giving a few examples of a bad site, and a good site. Hopefully the people who own the bad sites don’t see this post! Actually, I hope they do so they can use my points to clean them up a bit.

First off, this website is an absolutely horrible site. Just look at it and be honest. Now, granted, the purpose of the site is to provide straightforward information and not have a lot of hoopla surrounding it. While it accomplishes getting that information on the page, what it doesn’t accomplish is giving that information in an organized and somewhat easy to read fashion. The page in question fails on all counts and in all aspects miserably.

So let’s tear it apart. And I’ll do so with a large set of web design guidelines. Now, I don’t claim to be an expert at web design. I know people who are absolute gods compared to me with what they know and can pull off. But I do know a fair share, and I certainly know what looks good, or rather, what absolutely doesn’t look good.

Here we go:

1) Never ever use Times New Roman as the page’s font

In the realm of fonts, there are two main types of font categories: print fonts, and display fonts. Times New Roman (TNR) falls in the print font category. When you pick up your average text book or even novel, what you see is TNR or some variant of it. The purpose of TNR is to be printed out. Quite simply, it looks good on paper and is easy to read.

So why do we see it so often on websites with bad designs? The reason for this is, at least on Windows systems, TNR is the default font in most browsers and in the operating system itself (MS Word, Wordpad, etc). When someone puts text into an HTML document and slaps it up on the web, if they don’t define a font, it 95% of the time will show up on a browser’s computer as TNR. Other print fonts include Arial and Courier (New). Windows Vista (primarily Office 2007) will release a new default print font, Calibri, which, in my opinion, is one of the most beautiful print fonts I’ve ever seen. Never use it on a website, though.

On the other hand, there are what we call display fonts. Again, quite simply, most of these fonts were designed with a screen in mind. They’re easy to read on screens, simple, straight forward, and blend well with virtually any site design. The most popular font in this category is Verdana, which happens to be the default font on this site (and most well designed sites for that matter). Other choices include Helvetica and Tahoma.

Font choice is a must. Use what’s proper and I won’t trash your site. And remember … never EVER use print fonts on a site unless it is absolutely essential to that particular design. A few exceptions to this rule will come out in following points.

2) Please don’t use font sizes larger than necessary

On a well designed site, most often you will see Verdana being used, and the font size of the main content will be 11px. 10px makes you have to strain to read, and 12px screws everything up. 11px is perfect. Use it.

For headings, using a larger font size is perfectly acceptable. But remember, keep heading wordiness to a minimum, and never let the font size go above 20px. Usually 16-19px is standard, depending on the site’s design. It also depends on the font choice for headers. With Verdana, I wouldn’t push it past 16px. With other fonts, such as Georgia or Lucida Grande, 19px is usually the best choice.

Now, let me hold it right there for a second because I know someone is going to say “But wait! Georgia is a print font.” And this person would be 100% correct. Georgia is, indeed, considered a print font. However, remember the exceptions I mentioned above? This is one of them. When creating headers, occasionally using print fonts is okay. But again, the rule of keeping the wordiness applies as this is what tends to cause your eyes to bug out when reading print fonts on a screen for an extended period of time. However, as per the first rule never, ever use TNR on your site. Header or no header. Don’t do it! Georgia and Lucida Grande are perfectly acceptable as header fonts.

Second point on headers: They don’t always need to be a larger font size. In many cases (indeed, in this very article), headers can be accomplished simply by making the text stand out on its own, such as bolding (as in this article) or underlining it. However, as you can see from the title of this article, it is, infact, a larger size as it is the main header (not sub header).

3) We’re tired of the standard straight blue link text. Stop it.

It’s true. I cringe whenever I see the standard blue text on a site. Especially if said site is in TNR font and is more than 11px, like our friendly example site.

I read an article a while back that suggested to use this link color for the very reason that people have become accustomed to it, so they can easily recognize a link. And while he brought up a good point, there is one other thing I believe he missed. People are not necessarily used to looking for that particular font color. What they are, in fact, accustomed to looking for is text that significantly stands out from the rest of the page. It doesn’t have to be underlined. It doesn’t have to be that straightforward blue.

On this site, my link colors are blue. However, they are not the blue that is standard. What they are is a color that stands out from the background and the rest of the text so it can easily be distinguished as a link. As long as it flows with the sites design and stands out greater than anything else on the page, you have free reign here.

Also, some type of hovering effect is essential to link text as it confirms to a browser that, indeed, it is a link. On this site, I chose to darken the color and add a dotted underline. Plain underlining is just too blah!

4)Clashing color text is a no-no

I’m sorry. Puke-green text on a pink background is not a good design. Period. When designing a site, the colors you choose are vital to the appeal and organization of said site. At most, 3 colors are to be used. You may have up to 6 total (ie, slight variations of those 3 colors). On this site, there are a total of 5 colors: red, black, and blue, and 2 shades of gray. That’s it. White typically doesn’t count. I’ll be brutally honest with myself, here. I actually used a bit too much color variation on this site. It clashes a bit too much for my tastes. It is what it is, though.

Point being: Use as few colors as you can get away with, and please be sure said colors do not clash! And stay away from the reddest of reds, the greenest of greens, and the bluest of blues as color choices.

5) Tables are a thing of the past. Please move on to block-level elements such as div layers

I won’t pound this point too much since it’s not an absolute and requires a significantly greater knowledge of (X)HTML and especially CSS to pull it off successfully. Case in point, tables are not supposed to be use for aligning page elements. While this can work, it in a lot of cases doesn’t work well, especially cross-browser/platform and on different screen resolutions.

However, using tables like on the site I linked is an absolute no-go. It’s ugly. It’s too big. It requires your eyes to move too much. The borders are too big and distracting. It’s horrific. End of story.

6) Place items on a page where they can be easily seen, read, and accessed

Multiple studies have shown that you have under 2 seconds from the time someone sees your site until they have made their decision of whether or not it’s a viable source of information. Reasons it could fail this time-test are many. The main one is content placement; where is the information on the page?

You want to make the most important information the first thing a visitor sees when browsing the site. This, in the past, meant it was dead center on the page. And while this was, indeed, very true on lower screen resolutions (ie, 800×600 and below), it is most certainly not true on 1024×768 and above. For primarily text sites, this needs to be about 1/3 of the way towards the center of the screen. An example would be this very site. The content is not dead center, but it’s not all the way to the left. It’s closer to the left than centered, though.

However, there are exceptions to this rule. The point is to get the visitor to see that all-important text. If there is something else, for example, a header image or picture above that text that will instantly draw the visitor’s eyes to that section of the page, it’s alright.

Case in point: The visitor must not have to do more than 2 seconds (primarily less than 1 second) worth of searching to find the important content.

7) Simple is beautiful

Again, every individual site has its own purpose. Gaming sites need lots of pictures. Sites on why you shouldn’t take that new prescription are mainly text based and the goal should be to make that text content extremely easy to read. However, when designing sites that need pictures, please do so with care. Never over-do it. And said pictures need to be placed in an organized manor. One site that does this really well is Gamespot. It’s very crowded, but it is, indeed, organized!

In the past, every web designer was competing by seeing who could make their site the coolest in terms of flashiness and graphics. This was the big boom of entirely Flash-based websites. In recent years, web designers (at least the good and respected ones) have stepped back and realized all this stuff was only hurting the visitors. People want a nice, clean, organized, and appealing design that they can read without having to physically strain their eyes.

Now days, “Simple is beautiful” is the motto of web designers. Keep it as simple and clean as possible, but balance it with just enough graphics and color to keep it interesting and appealing to the eye.

And now for the conclusion. The one site that has stood out to me for the past 3 years as the best designed site I have ever seen is that of the 2004 PGA Tour Championship.

It’s beautiful. Absolutely beautiful. The colors flow so perfectly. The font choices are wonderful. There is just enough graphics to appeal to the visitor and give words in pictures. The content is so organized you can find exactly what you want immediately. The 2005, 2007, and 2008 sites are just as wonderful, perhaps even better in some areas (2006 was a bit lacking, in my opinion).

I go back to those sites almost nonstop when I need an example of how to do things right. They’re almost perfect.

In summary, my 7 standards:

1) Never ever use Times New Roman as the page’s font - Verdana and Tahoma are standard
2) Please don’t use font sizes larger than necessary - content should generally be 11px, headers no more than 16-19px
3) We’re tired of the standard straight blue link text. Stop it - All it needs to do is stand out from the rest of the text
4) Clashing color text is a no-no - Choose colors that go nicely with each other. No more than 3 primary colors on a site, no more than 6 total (including shades)
5) Tables are a thing of the past. Please move on to block-level elements such as div layers - Tables are made for information, not layouts.
6) Place items on a page where they can be easily seen, read, and accessed - Remember, you’ve got 2 seconds before someone decides your site is useless
7) Simple is beautiful - Flashiness is so 2001. We’re in 2007. Live like it. Make simple websites.

Have more standards? Please feel free to add them. I’m sure I’ll think of some others myself…