Clichés of a Crappy Site

If you’ve browsed through many personal sites at all, you’ve probably seen some of the following things that make me personally cringe. I don’t understand why they’re so trendy, since they don’t improve a site in the least.

The example images link to the web sites from which I took the screen shot.

Text

Tiny fonts

The purpose of writing anything is for it to be read, eventually, by somebody. Don’t make your font so small that nobody can read it without a magnifying glass. It may look more attractive somehow, maybe, because it’s ass tiny, but text that is large enough to be read can be just as aesthetically appealing.

Example:

Not only is this text very small, it’s also in a color that makes it even harder to read.

Another example:

This one illustrates another point: if you’re going to have a very small font, at least make it sans-serif (i.e. a font like Arial or Verdana, not Times New Roman). At such small sizes, it’s better to not have the little curlicues that a serif font has, to improve readability.

Small line-height

This one often goes hand-in-hand with small text. Having the line-height so small that your lines of text overlap is not cool, nor does it make your writing particularly easy to read. It pains my eyes to try and read text that is all squashed together. About 1.2 is recommended, according to richinstyle.com.

Layout

Huge images before reaching the content

Not everyone has a gigantic resolution. If you have an image sitting above your content that’s taller than about 400 pixels, you’re just wasting our time. Most of the time the image isn’t going to be seen anyway, since the visitor will be scrolling through your content further down the screen.

Itty bitty iframes

I don’t understand the point of having parts of your site sectioned off into small blocks with their own scrollbars. One scrollbar (i.e. the main one on the browser window) is enough. Having multiple scrollbars just gets annoying for me.

Skinny columns of text

Having a column of text that’s only 200 pixels (~2.8 inches) wide is not convenient. Think about how a novel is setup: the text spans at least 3.5 inches, and that’s at a smaller font size that allows about 60 characters per line. If you make the font size large enough to be read comfortably on a computer monitor, at least 4 inches would be nice so that the visitor isn’t continuously jumping to new lines.

Cluttered appearance

The adage “keep it simple, stupid” makes sense in web design, too. The page layout should be logical and allow the eye to flow from one thing to another in a leisurely way. It should in no way cause confusion about what to do, how to do it, or what things are. Space is just as important as content: don’t have everything squashed up together. Put in padding and margins and blank space. There should be a consistent look to things to tie the page together and make it less confusing.

The page scrolls on forever with no content

If there is no content in a section of the page, then the visitor ought not have the option to scroll to that section. It’s pointless. This applies to both horizontal scrollbars, which are usually accidentally caused, and vertical scrollbars, which are usually because the designer specified a huge height on some iframe to make sure all their content showed up without having a second scrollbar. Silly. Just slap in a div, position it as necessary, and let the browser determine the height.

Colors

Really bright colors

Some layouts done with neon colors are pretty because they’re coupled with darker colors, or they just aren’t overused. If you use a lot of bright colors all together, though, or do something goofy like put white text on a cyan background (see example), you’re going to hurt eyes and cause your visitors to just leave, rather than blind themselves trying to visit your site.

Example:

Contrast

If you put light gray text on a white background, it’s going to be hard to read. If you put light pink text on a light pink background, it’s going to be hard to read. You get the idea. All writing on your site, including both plain text and links, should be easily distinguishable from the background. What’s the point of writing something if no one can read it?

With this in mind, too much contrast can also be annoying. It personally bothers my eyes to read a great deal of text if it’s absolute black on a white background.

Other

Designing for only one browser

Your visitors are going to be using a variety of browsers. Some people will be using IE, some Firefox, some Safari, some Opera, some Mozilla, and a few are going to be using browsers you’ve never even heard of before. You should at least check your site in the major ones so that you know your site looks good for the majority of your viewers. There’s nothing sillier than proclaiming that your site “only works” or “works best” in –insert browser name–. That’s just snobby. Your site should work equally well in any given browser that is common for your site’s demographic.

Different cursors

I find it annoying when I hover on a link and see a crosshair, a question mark, or any other cursor that my browser didn’t choose without the designer’s influence. The only time I think it’s acceptable for a cursor to be changed is for an acronym or abbreviation, where a question mark cursor can make sense to help differentiate from plain text.