Web Design Checklist 2

Checklist 1 | Checklist 2 | What do I do now? | The Top 30 Web Design Mistakes

83 Potential Mortal Sins

You have to be born into the Roman Catholic church to truly appreciate the first question -- pre-Vatican II Catholics will understand it best. Back in eighth grade one of my male classmates at St. Andrew's School asked, in all seriousness, the above question. The question has stayed with me for forty years. The answer escapes me.

Non-Catholics will still appreciate the question. Basically, it's the same question they ask Google's Matt Cutts (except they don't phrase it as honestly): "How many stupid tricks can I pull trying to get my site to the top of Google's rankings before you punish my site?"

The mistakes in Checklist 1 are fatal. I'm not sure how many of the mistakes in Checklist 2 you can make before you kill your web site.

Special Note: Search Engine Optimization

One of the areas I skipped is Search Engine Optimization and web design — mostly because many factors aren't design related. One of the best sites for all things search related is WebmasterWorld and a good friend of mind informed me they recently had an incredibly fascinating discussion entitled "25 Signals of Crap."

While many items mentioned are found on my two checklists, they frame them in the context of Google and advertising. You really need to read this forum discussion.

Checklist 2:

Our site isn't accessible to visitors with physical disabilities.

Our site doesn't use white or off-white color for background.

Our site doesn't use black text.

Our site uses Frames.

Our site uses the wrong doctype.

Our site doesn't use CSS.

Our site uses CSS, but it's inline CSS.

Our site's logo is not at top left corner.

Our site has no search engine.

Our search engine is not at top-right of page.

Our site's search engine box isn't long enough for visitors to see what they're typing.

Our site has a search engine, but not on every page.

Underlined text is not link text.

Our site uses invalid HTML attributes (marginwidth, etc.).

Our site uses graphics as links.

We haven't validated our site's HTML code.

We haven't validated our site's CSS.

We haven't checked to see if our site's links are broken.

Our site uses deprecated markup (like the CENTER tag).

We haven't checked to see how our site looks in grayscale.

We haven't checked our site using the Firefox plugin "Web Developer".

We haven't checked our site using the "The Web Page Analyzer".

Our site uses the CSS hover attribute on text.

We don't optimize our site's CSS or HTML files.

Our site's accounting figures don't line up on the decimal point.

Our site's logo is disproportionate for top screen.

Corporate logo is not at top left of screen.

Logo does not link to home page on sub-pages.

There are links to the home page on every page -- but the home page.

Putting dates on material that's not updated regularly.

Not putting down the day of the week when discussing events. Don't say "Jason Isbell and the 400 Unit will play in concert on June 30, 2011." Say Jason Isbell and the 400 Unit will play in concert on "Thursday, June 30, 2011." There are some excellent examples—not to mention a better explanation of the problem—in the article "Please print the day of the week along with the date."

Our site's content is full of jargon.

Our site's content is full of acronyms.

Our site's use of abbreviations is inconsistent.

We don't use a consistent tone throughout. We switch back and forth from colloquial to clinica,l etc.

Our font sizes are fixed and can't be resized.

We put more than one idea in a paragraph.

Not declaring a background color.

Our site uses unencoded ampersands.

Our site is <span> and/or <div> happy.

Hit counters.

Contact information is not available.

Our site doesn't provide multiple methods to be contacted. (Contact Us form, phone number, address, email, etc.)

We use dates and times on a site that's not about dates and times.

Our site has pictures of boring white executives.

Our site has pictures of boring white executives -- and if you click the picture, you get to see them up close and personal (Video).

Some of our pictures are not recent -- we have a 20 year-old photo of some employees.

Our site uses JPG when it should use GIF images and vice-versa.

We use SVG file format because we can.

We over-optimize our images.

Our site has graphics that look like a link, but aren't.

We don't check to see if scanned images are scanned on dirty scanners.

There's no reason for a globe image. We get that you're global.

Our site uses an ugly background image.

We use Dynamic HTML navigation.

We don't have a site map.

We have a site map, but it's graphics based.

Our site uses liquid design.

Our site uses fixed-width design. (You can't win. Liquid is wrong on wide-screen monitors because you have line lengths that are hard to read — and vice versa.)

We use table borders on content other than accounting-type data.

OUR HEADINGS ARE CAPITALIZED.

Our text is full of superlatives like "This product will solve every problem you have."

Our paragraphs have too much text. (We're a web of scanners.)

Our site bolds a lot of text.

Our site italicizes a lot of text.

Our site's font sizes are fixed and can't be resized.

Our site uses three or more font faces on a page.

We don't have a CSS file for printing pages.

We don't use logical file names for documents or graphics.

Our site uses graphics that don't enhance the page.

When you click on a photo (or other graphic), instead of seeing a bigger picture, you see the same picture.

Go to Robbie Robertson’s images from the 1970's page. Take a look at the first photo entitled, “The Last Waltz.” Click on the picture. What do you get? Well, not what you’re expecting. If you’re like me, you think you’ll get a bigger version of the picture; otherwise, why is there a link? No. You get the same picture at the same size. What?

About.com’s Record Comic Book Auction Prices page has the same problem, but presents it in a more obnoxious manner. When you mouse over the comic book graphic, the message “View Full Size,” pops up (screenshot 250 x 400 pixels). Guess what you get when you click? The same-size picture (screenshot 250 x 400 pixels).

A site that knows how to handle images is PostSecret. Click on any of the secrets and you will see what I mean.

Our graphics and text don't match up (Video). Here's an example.

Some of our documents run across multiple pages, but we don't give the option to see it all on one page.

Back button doesn't go back because we've disabled it.

Our site doesn't provide a feedback mechanism.

Our forms mix up checkboxes and radio buttons.

Our site has pull-down (drop list) menus.

We don't use bullets to organize information.

We don't manually spell check TITLE, ALT tags, etc. (spell checkers don't check these).

Our content is not timely.

Our content is not updated frequently.

Our site doesn't separate style from content.

Checklist 1 | Checklist 2 | What do I do now?