Vincent Flanders’ Web Design Checklist 1 / 165 Mortal Sins That Will Send Your Site to Web Design Hell.

Checklist from Web pages that Suck to see if your page is in trouble. Even one check means that you are in deep trouble and are not likely to be able to pull yourself out of the quick-sand (sorry).

First Impression / Big Picture

 We’ve designed our site to meet our organization’s needs (more sales/contributions) rather than meeting the needs of our visitors. (Video)
 Our site tries to tell you how wonderful we are as a company, but not how we’re going to solve your problems.
 It takes longer than four seconds for the man from Mars to understand what our site is about.
 The man from Mars cannot quickly find the focal point of the home page.
 The man from Mars cannot quickly find the focal point of the current page.Where in the heck is the focal point at this site? (AmazingThings.org)
 Our site doesn’t make us look like credible professionals.People will not do business with you if you look like you’re not professional. Remember: Professional Website = Trust.
 Our site doesn’t make visitors feel they can trust us.
 Our home page — or any page — takes more than four seconds to load.
This web design entry is new.
 The home page is too long.
This web design entry is new.
 The home page asks you to refresh your page to see new content. (Example)
 Quickly scanning the page doesn’t tell our visitors much about its purpose.
 We don ‘t put design elements where our visitors expect them.
 We have not eliminated unnecessary design items.
 We don’t know which design items are not necessary.
 Our site breaks when visited with the Javascript turned off. (People turn Javascript off for security reasons.)
This web design entry has been revised
 Our site breaks because of back-end coding errors. (Video).Here’s a screenshot of another example of coding errors.

This web design entry has been revised
 We say “Welcome to…” on our home page. The only exception to this is if you have a really cool graphic—something like the graphic below—then it’s OK to use a “Welcome to” statement.This is the only cool Welcome To message allowed

This web design entry has been revised
 Our site is Flash-based (and this is what Flash sites look like to people without Flash or who are looking at it on an iPhone or iPad.) Flash on a website is dead, dead, dead. Steve Jobs twisted the knife into its festering corpse.
 Our site’s navigation is Flash-based. (Here’s the actual site)
 Our site uses a splash page (unless it’s a liquor, porn, gambling, adult, tobacco, or a multi-lingual / multinational site). (Video)
This web design entry has been revised
 Our site makes visitors register before they can enter. No, this isn’t a site from 1999. It’s a site from July 2011. Here’s a screenshot in case they change things.
This web design entry has been revised
 Our site uses two or more Splash Pages. For example, here’sSplash Page #1, here’s Splash Page #2 and here at last is the home page.
This web design entry has been revised
 Our site’s TITLE tag is something like “New Document”, “Index” and not the name of your company or other search-engine friendly terms. It could also be something meaningless like “Home.
 Our site has a sound file automatically play in the background when a web page loads (Video), but we’re not a record label or musician.
 I don’t know if our site looks the same in the major browsers.
This web design entry is new.
 Our home page is asymmetrical and is not set up using a grid system. If the home page isn’t set up using a grid, odds are the rest of the site isn’t either.
 Our site doesn’t look the same in different browsers.
This web design entry is new.
 Site doesn’t work/work well on an iPad (or an iPhone). Here’s what the State of Utah says their site looks like on an iPad and here’s what I get on my iPad. Notice the cut-off text at the bottom. It gets worse. When I clicked “in Utah,” this is my screen. Support for the iPad is important because it accounts for an increasing % of PC sales—11% last quarter.
This web design entry is new.
 Our site requires you to use a specific browser. In this example, it required Internet Explorer. It didn’t work in Google Chrome, but it also didn’t work in IE8. Gee. 
This web design entry is new.
 Poorly implemented frames. It’s a rare site where frames don’t suck; however, it’s pretty easy to make a bad thing worse. This site provides a wonderful example of something horrible.
 The important content does not fit in the first screen. (This is somewhat controversial.)
This web design entry has been revised
 Our pages have too much / too little white space. Another example of too much white space.
 Our site uses pop-up windows.
This web design entry has been revised
 Our site forces visitors to install weird plugins.
 Don't tell people what browser to download Our site has “Download latest browser” text or buttons.
 OMG FrontPageOur site prominently displays what hardware and software was used to create the site.
 Our site’s design was “borrowed” from another site. And here is a video on the topic.
 Our site doesn’t provide clear instructions on how to perform tasks like ordering, filling out forms, etc.
This web design entry has been revised
 Our site disables a visitors right-click mouse button because we’re crazy enough to think we have content worth stealing and that our visitors are too stupid to figure out how to bypass our code.Here’s a site that disables the right-click function. (as of 05/25/11)

If you want to be an a**hole, here’s Javascript code that disables right-click, selecting text, dragging content, closing the window, etc.

 Our site is based on a template that’s bloated with ugly code, is difficult to maintain, and is, quite frankly, broken.
 We don’t identify PDF files with an icon. (Video)
 We don’t analyze our log files.
 We’ve never conducted user testing. We’ve never asked anyone outside the organization to look at our site and give us a critique.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>