10 Deadly Web Site Design Sins...

March 20, 2002 12:13 PM

10 Deadly Web Site Design Sins... according to the Warriors of Christ, the blink tag is officially evil.
posted by kirkaracha (46 comments total)

#11) Page fade ins and fade outs. ARRRRGH! Just take me to the damned link I selected and skip the 5 seconds of cutesy HTML bullshit, huh?
posted by mathis23 at 12:19 PM on March 20, 2002

I was disappointed to find no chapter and verse.

Despite this, they're right.
posted by zpousman at 12:20 PM on March 20, 2002

do people still use the <blink> tag?
posted by panopticon at 12:22 PM on March 20, 2002

WEB SITE SIN #5: The Endlessly Scrolling Page

That's right, it's so much better to have to stare at a blank screen while my web browser downloads and renders the next 4 paragraphs! Would it been that much of an inconvience to have to read all 10 sins on the same page?

While agree with the others (in a "no duh" kind of way), I hate the trend that makes me have to click through 10 pages to read an interview.

AGG!@#!@
posted by betaray at 12:32 PM on March 20, 2002

I use it on my personal page... But since MIE doesn't read the blink tag it doesn't matter so much anymore.... Does it?
posted by davros42 at 12:37 PM on March 20, 2002

Ugh - should I kill myself for agreeing with almost every word? What next, though? Will they append the same "Warriors of Christ" header to some message about how important it is to breath?
posted by MiguelCardoso at 12:38 PM on March 20, 2002

A challenge to hackers: drop all these sins into pages of the Religious Right. Watch them go nuts accusing each other of blashpemy.
posted by me3dia at 12:38 PM on March 20, 2002

the last one refers to spelling, and i have to wonder sometimes if i am one of the few who notice just how heinous a problem this is.

at least twice today i have run into sites asking me to "check you email" instead of "check your email" ... drives me up the wall.
posted by grabbingsand at 12:45 PM on March 20, 2002

betaray, I agree with the inconvenience of having to click that silly little bauble at the bottom of the article forcing you to click to the next page(especially if you're on a modem).. Hello Wired? Salon? I don't like lots of scrolling either. The solution probably lies in a slightly different interface, where the different parts of the article load in the background, while you're reading.

WEB SITE SIN #10: Spelling and HTML Mistakes
Few things will convey a more unprofessional image than spelling or HTML errors. Building trust is an absolute must online. If your page is riddled with spelling and grammatical errors, what kind of message do you think that sends potential clients?

This is probably the only one I haven't seen on useit.com, and I really wish people would pay more consideration to this. I'm getting really sick of the spelling mistakes in news stories found on such sites as Yahoo, MSNBC, and more.
posted by insomnyuk at 12:47 PM on March 20, 2002

insomnyuk, betaray: check out the International Herald Tribune's site (in a modern browser). In the default configuration, articles are in 3-column format with the remainder of the article preloaded on the same page. Clicking the thrid column brings the next part of the article with no delay.
posted by o2b at 12:53 PM on March 20, 2002

grabbingsand, I am with you 100%. Even when I see spelling and grammar errors on MeFi, I have to restrain myself from posting some snarky correction. I know people hate the spelling and grammar police, but people, for the love of God, it's not that hard to learn the difference between "their" and "they're." And there's no apostrophe when you make a non-possessive noun plural ("The Bush's sure do have some wild daughters!")

*dismounts high horse*
posted by pardonyou? at 12:55 PM on March 20, 2002

Did anyone else find their only black and white web site design incredibly incredibly annoying? I wouldn't have worried about it, but they were complaining about other design errors, so I thought I should point that one out.
posted by statusquo at 1:05 PM on March 20, 2002

What's really so evil about frames?
posted by evanizer at 1:14 PM on March 20, 2002

statusquo: Black text on a white background? That's crazy, man! <g>

evanizer: Frames kinda defeat the whole purpose of the hyperlink concept; you can't easily bookmark a frame; frames make it harder for your content to be indexed by search engines; many people use frames incompetently... shall I go on?

Apologies for the self-link, but that list looks eerily similar to my web pet peeves list that I've had for years. But I guess there are lots of lists like that out there. But mine's funnier.
posted by RylandDotNet at 1:18 PM on March 20, 2002

IHT gives a try at a new interface, but I really can't stand it, personally. The tiny Next Page button sucks, and the scrolling isn't smooth, so it doesn't feel intuitive (that's just me being subjective, I admit). Oh, I just found out by double clicking on the end columns that you can scroll the article. That's pretty nifty, but you kind of have to find out by trial and error. It's not a very big gripe, in light of that.

The worst part of the IHT attempt is that they break it into 3 columns, making it hard for me to read. That works for newspapers, but it is completely unnatural on computer screens. Of course, you can change that to 1 column, but I only saw that by looking closely. That little grey icon on the grey toolbar just doesn't do much for me. Changing the browser text size also does nothing. Boo! You have to click another obscure grey button on a grey toolbar.

Ahh, now that I can read.

What's really so evil about frames?

2 reasons (of the many). When done wrong, they make a page almost completely unusable. And wow, they get done wrong a lot. The other reason is that text only browsers read frames poorly, and all the old people still using text only browsers have created this myth that because frames screw up text only browsers, frames are evil. Because, I mean, doesn't EVERYONE use text only browsers?
posted by insomnyuk at 1:20 PM on March 20, 2002

My pet peeve is sites that use really tiny buttons for next page, or whatever. It's incredibly difficult for people with disabilities, i.e., vision problems, Cerebral Palsy, stinking drunk, etc., to navigate them. And sites with lots of purty graphics, and virtually no useful content. And sites that just suck.
posted by theora55 at 1:21 PM on March 20, 2002

I didn't care for the list, it's too out of date. What about newer sins like the font tag and using tables? Frames bug the hell out of me, especially when i'm trying to save information on a page or print stuff. Isn't the main purpose of frames to keep a menu stationary on a page while you scroll down on a page, there are better ways to do that now with css that'll look okay in lynx too.
posted by bobo123 at 1:23 PM on March 20, 2002

WEB SITE SIN #9: Designing for a Specific Browser/Color Setting/Screen Resolution

What, you mean like assuming my Windows document background color is white, not specifying your page background color, and having your white-background graphics look rather out of place on my neutral gray background?

Yeah, that's bad.
posted by SiW at 1:39 PM on March 20, 2002

The biggest problem with web readability is the fact that html was designed to organize information, not lay it out. Then there is the problem caused by people changing window sizes...the problem that 72 dpi is always going to look like hell no matter how much you antialias it. HTML is an old, old, crappy standard. We need something scalable and graphically oriented.

I think flash could fit the bill, if it integrated plain text better. Vector graphics have been the unappreciated savior of the internet for a long time now.

I suppose imitating mefi would be a good place to start...it is pretty decently done. Although personally I think memepool's design has more charm and suits the information better. Just remember, less is more people. LMVDR.
posted by Settle at 1:59 PM on March 20, 2002

and they didn't even mention pop-up ads. Those are number 1 on my list. (i never wanna see the Web 2xcam or whatever it is agian. How much money did they give to yahoo?)
posted by Ufez Jones at 2:00 PM on March 20, 2002

o2b: I find that IHT interface incredible. So many nifty tricks, all in the service of good for once... DHTML, I assume?
posted by D at 2:03 PM on March 20, 2002

SiW: What, you mean like assuming my Windows document background color is white, not specifying your page background color, and having your white-background graphics look rather out of place on my neutral gray background?

I'm a software quality assurance engineer working with applications with web interfaces, so I keep my default setting NOT to use Windows' colors (of course, now I use Mozilla for most personal surfing, but it has a somewhat similar setting). Anyway, as you've discovered, SiW, it's amazing how many sites have no bgcolor designated, and clearly their designers think they are white backgrounds since that's how it looks on their computers. And in some cases, I'm talkin' sites that should know better.

But, I guess they just don't have good QA.
posted by tippiedog at 2:16 PM on March 20, 2002

Is CSS layout really a viable option right now, given that there are still a ton of users out there using older browsers?

I'm not sure you can call that a "sin," per se...

My QA crew certainly regards font tags as a sin, though. It's been taking us forever to bring ourselves into xhtml compliance....
posted by ph00dz at 2:54 PM on March 20, 2002

How about that links column on the left, part of which is left-aligned and part of which is centered? Ugggly.
posted by Foosnark at 3:02 PM on March 20, 2002

I didn't care for the list, it's too out of date. What about newer sins like the font tag and using tables?

The solutions aren’t as obvious to the newer sins. It ends up being a big mess of CSS, xhtml, dhtml or other acronyms that make non-professional web designers confused. “Don’t use giant images” or “blink tags are annoying” are easier messages to get across.
posted by Gary at 3:23 PM on March 20, 2002

Off-topic: can anyone tell me of a site that explains XHTML in a way a self-taught HTML/PHP coder can understand? I still have no clue as to what XHTML is...

On-topic: Sins left out include;
- pop-ups (coded by the devil himself!)

- OVERUSE OF CAPITALIZATION WHEN IT IS TOTALLY UNNECCESSARY (NOW DO YOU SEE WHAT I MEAN!!!!!!!!!!!!!)

- as seen above, blatant abuse of exclamation marks. For Christ's sake, we saw the first hunded -- we know you're excited.

- CSS that changes links so they displace all the text around them. Oh hooray, now every time I mouseover this text the paragraph shift. In large paragraphs it's somewhat disorienting.

- Disclaimers saying that people can't steal your graphics. In most cases, someone has created their graphics with pilfered art, or they've got horribly awful graphics like "S00PA J1MMY'S MEGA-1337 GAMMING SUPER PAGE" that no one, anywhere, would ever ...eeeeever, steal.

- LOL.... (This is a personal one)
posted by Dark Messiah at 3:34 PM on March 20, 2002

Dark Messiah - The whole point of XHTML is to standardize the way that HTML can be legally laid out. This is fairly irrelevant with browsers on PC's, but can be a real help on handhelds, where there is insufficient computing power to compensate for poorly formatted HTML. Since XHTML is a subset of XML, and there are any number of small-footprint validating XML parsers out there, it's a (comparatively) simple task to build a rendering engine over such a parser.

To turn HTML into XHTML:

• Make sure all tag names and their attributes are legal HTML and are lowercase
• Make sure you escape all illegal characters such as < (<), > (>), " (")
• Start your page as follows:
  <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Give your <html> tag the following attribute:
  xmlns="http://www.w3.org/1999/xhtml"
• Close all matched tags, such as <li></li>; insert a closing slash in all self-closing tags, such as <br /> (you'll want to include the space before the slash also, so Netscape will render correctly)

Your page will probably be somewhere in the neighborhood of valid XHTML if you follow these guidelines. You can check it for validity at http://validator.w3.org.
posted by Fley Mingmasc at 4:12 PM on March 20, 2002

Actually, I can't check validity, since the validator reads all my PHP as improper HTML... ;)

Thank for the help, however. It finally makes some sense.
posted by Dark Messiah at 4:16 PM on March 20, 2002

bloody christhings...
I should have known!!
posted by Kodel at 4:23 PM on March 20, 2002

I disagree with those who declaim that tables are so horrific - why, exactly, are they construed to be evil?

I was looking into getting rid of tables because I heard all the hue and cry about them, so I looked into css. I devoured the O'Reilly css book, and found some nifty sites which had sample 2 and 3-column css layouts that I was interested in using.

Then I looked at the page source - all sorts of incredibly complex code-arounds to deal with the incomplete, inconsistent, and downright buggy implementation of css in different browsers. I couldn't understand more than a tiny amount of it. It was ugly and took up a lot of space, frankly. Plus some of it involved Javascript, as I recall.

And just think - as new versions of browsers come out, you then have to do the upkeep on your work-arounds to maintain your site's look with the new browsers as well as today's models. Bleagh! Who wants *that* maintenance nightmare?

I decided, in the end, that at least with (simple) tables, I can understand what the heck I'm doing and I don't have to resort to bizarre kludges (I don't need my tables to line up to the exact pixel or anything). And I have a reasonable supposition that what I see in IE 5.5 is going to look okay in the Netscape that my SO persists in using.

Note: I have no problem with using css to do text styling and that sort of thing - that makes sense, saves work, etc. It's the layout stuff where css falls short compared to tables, in my book.
posted by beth at 4:37 PM on March 20, 2002

...and what's with the presumptuous re-coloring of my freaking scrollbars at the Warriors of Christ site? That's a sin if there ever was one - web pages should stay *within* the page, not start oozing out and taking over what should be OS or browser-controlled mechanisms.

Yeah, I realize metafilter is guilty of this sin, too.
posted by beth at 4:46 PM on March 20, 2002

beth: I think scroll-bar editing is kind of neat. It can add a little something extra to a web-design. Not much, but it's neat.
posted by Dark Messiah at 4:53 PM on March 20, 2002

Tables (especially nested tables) are really only a problem if you have images with undefined width & height. If you don't define the size of the image, the browser ends up re-rendering everything on the page a bunch of times. Define your image sizes (which you should be doing anyway) and simple tables - even nested simple tables) aren't a big deal.
posted by dogwelder at 4:54 PM on March 20, 2002

This is why I use BBEdit for page coding. Nice clean code right before your eyes, and you can validate the code while you work. Tragically, I can't find a Windows equivalent to BBEdit, because Microsoft FrontPage REALLY SUCKS.
posted by Down10 at 6:29 PM on March 20, 2002

Another XHTML requirement is, I believe, that all attributes must be enclosed in quotes.
posted by kindall at 6:58 PM on March 20, 2002

phoodz: A working CSS layout requires browser hack after hack. Also, although the acccessibility (disabled use) of CSS layouts is better the usability (er, non-disabled use) is pancaked down the page.
CSS for most other things is a grand idea.
posted by holloway at 7:21 PM on March 20, 2002

Hard to believe nobody's mentioned the use of small or even medium-sized type that runs the full width of the window. More than about a quarter-screen of that is really tough to read. For Pete's sake, throw in a couple of blockquote tags (or whatever newfangled way Web designers have come up with for narrowing a column of type), or make the type bigger.
posted by diddlegnome at 7:35 PM on March 20, 2002

I think scroll-bar editing is kind of neat. It can add a little something extra to a web-design. Not much, but it's neat.

I agree with beth. I don't think custom scrolls add anything, except in the designers mind.
posted by HTuttle at 7:57 PM on March 20, 2002

I have to agree with the objections to Sin #5, I love scrolling and I can't stand having to download page after page of some site's stupid layout just to read a whole article. This was really bad a few years ago when the common wisdom was that users didn't want to scroll at all and a few thousand words took fifty freaking pages.

There is a logical point at which to break long blocks of text: chapters. I could do without even that (I'm very comfortable reading whole books on a single page), but it's a happy middle ground, and allows for finding your place a little more easily.

As for tables and CSS, well, let me just say that when you get a good CSS layout going, damn it's nice to maintain. Everything is right where it should be, logically placed, and if you did it right even your linked stylesheet isn't too full of browser kludges.
posted by Nothing at 12:55 AM on March 21, 2002

Agreed. You can’t split things up to be exactly one page on everyone’s setup, so why bother? The user usually ends up scrolling half a page and then having to click to get to page 2. Either that or a site is formatted for 640x480, and users with 1600x1200 are swimming in whitespace and wondering why they have to click so often.

So either put it all on one page, or use links to actually relate content to one another in a useful manner. Arbitrarily declaring page breaks is just dumb.
posted by Gary at 1:12 AM on March 21, 2002

I use XHTML and CSS. They're great. Adding alternative stylesheets also massively increases accessibility/usability. I don't use pure CSS layouts for the reasons stated above. I use a table to columnise the page, and CSS for style within the columns.

I can't see how custom scrollbars can hurt. Use Mozilla if they scare you that much.
posted by walrus at 2:54 AM on March 21, 2002

Dark Messiah -

There's no reason why the W3C validators should have any trouble with php code... so long as it's parsed when the page is validated. In other words, use this validator as opposed to this one.
posted by canoeguide at 3:15 AM on March 21, 2002

Since this thread looks like a free-for-all, here's a question: Why do web web page forms insist on having those menus with all the US States listed? It's a lot faster to just type "NY" or "WA" than scroll down that list. Especially if you live in Wyoming.
posted by ParisParamus at 4:54 AM on March 21, 2002

It's a lot faster to just type "NY" or "WA" than scroll down that list. Especially if you live in Wyoming.

So type it. The menu lets you select or type, and it ensures invalid state codes can't be entered.
posted by kindall at 7:31 AM on March 21, 2002

The XHML/CSS combo is pretty great. You can have a tables-based layout that's also valid XHTML and CSS. Using CSS for positioning is a little tricky, especially if you have to support old browsers, but if you have the right template the markup is logical and easy to work with.

I prefer longer pages, too. Part of the reason pages get broken up is to increase ad impressions. This can get really ridiculous; sometimes you only get 2-3 paragraphs of content per page.

ParisParasmus: 'cause it's easier on the programmers and DBAs to have a drop-down list you can't screw up and corrupt the database with; also, they don't have to do error checking on what you type in. These are valid reasons, but it's emphasizing ease of development and maintenance over ease of use.
posted by kirkaracha at 7:33 AM on March 21, 2002

If you type "Ne..., you only get to the beginning of that letter.
posted by ParisParamus at 9:14 AM on March 21, 2002