50 Common Web Design Mistakes

This started out as a “Top Ten Newbie Web Mistakes” for my beginning web design students but it quickly became obvious that I couldn’t limit it to only ten. I was finally able to edit it down to 50. But I suspect, as soon as the comments start, it will begin growing again.

And, yes, I’ve made them all at one time or another.

Page Titles

1. Untitled documents: “Untitled Document” is the default title for pages created in Dreamweaver and other web design programs. Too many people forget to change it (see My Favorite Google Search).

2. Same title for all pages: The title is important. Help the world (and search engines) know which of your pages they want to see.

3. Non-descriptive titles: The page title is the headline for your link in search results (not to mention an important factor in determining those results). Instead of “Jim’s Page” try something like “Cartoons and Illustrations by Jim” or better yet “Political Cartoons.”

Meta Tags

4. Duplicate meta information on all pages: All major search engines have stated that they no longer use the meta keyword and description tags to rank pages. However the description tag is still often used as the page description in search results. So you can ignore keywords too and concentrate on writing good, custom descriptions for each of your pages.

Site Structure

5. No index.html (or equivalent) in the root directory: By default the index.html (or an equivalent such as index.htm, index.php, default.htm, etc.) is displayed when you visit http://www.yourdomain.com. If you don’t include it, visitors will get an error message or be required to type out the full URI including the file name.

6. Disorganized file structure: How you organize your site files won’t affect what the site looks like but lack of organization can make your life hell down the road when you’re trying to update or redesign the site. Use directories (folders) to help organize your pages and images.

7. Uploading non-web files: Accidentally uploading a few native Photoshop files can eat up your disk space quickly (not to mention take forever). Store your resource files (Photoshop images, Word files, etc.) in a separate folder outside your local web folder.

Pages

8. “Under Construction” pages: If a page isn’t ready to post, don’t post it. If you can’t help yourself, remember “Under Construction” is supposed to be a temporary condition and, after a month or, so it starts to seem permanent.

9. Frames: There are good reasons why you might want to use frames but there are no good reasons to actually use them.

10. Horizontal scrolling: The least common denominator for monitor width is currently 1024 pixels. You also need to leave space for scroll bars, page margins etc. so 960 pixels is a good standard width for your web pages. Wider may be acceptable depending upon your target audience but be careful!

11. Worthless content: If you don’t have anything to say, then don’t say it.

12. Out-of date content: If your content is no longer timely, delete it and, if you’re going to include a copyright notice, update it each January. (OK, I admit that this page sometime gets a bit out of date so, just so you know, it was last updated in March 2011)

13. Overly long pages: Contrary to popular belief, there’s nothing wrong with long web pages (that’s what the scroll bar is for) if the content warrants it. But, if it can be done logically, it’s usually a good idea to have several shorter pages than one very long one. If you do have very long pages, provide additional navigation to make it easy for readers to move within or off the page (such as a simplified menu of text links at the bottom of the page).

14. Unnecessarily short pages: In an effort to make the content “fit” the design, designers often resort to a series of short pages when one long one would be more user-friendly.

15. “Orphan” pages: Pages you forget to provide links to don’t exist as far as the rest of the world is concerned.

16. “Alien” pages: Pages that completely ignore the look and feel of the rest of your website leave users feeling like they’ve been suddenly transported to a website far, far away.

Navigation, navigation, who’s got the navigation?

17. Pages without navigation: If you don’t offer them an option, visitors are more likely to close your page than to hit the browser’s “Back” button.

18. Broken links: ‘Nuff said!

19. “Hidden” links: Make links easily identifiable by using a contrasting color, underlining them, using “button” images or altering the rollover state.

20. “False” links: Underlined text and rollover images scream link. Use them cautiously.

21. Menus that move: Establish consistent “navigation zones” and stick with them.

22. Inconsistent navigation: Once the user learns how to use your site’s navigation, don’t change it on him.

Headlines

23. Restyling text instead of using heading tags: <h1> is not the same as big paragraph text.

24. Using heading tags for bolding text: Headings are structural elements and should be used to define the purpose of the text they enclose. Don’t use them just because you want big bold text.

Body Text

25. Using images for text: Text in images can’t be read by search engines or screen readers.

26. Justified type: It’s hard enough to make justified text look presentable on a static printed page. On a dynamic web page it’s nearly impossible.

27. Using <br /><br /> instead of <p>: It will make formatting difficult.

28. Using <br /> to control line breaks within paragraphs: Let the browser determine where your lines break within paragraphs. If you force the issue you may get strange results as not all browsers size type exactly the same.

29. Typos and grammatical errors: use your spell checker and check out 10 flagrant grammar mistakes that make you look stupid.

30. Type too small: Really, 9 point type on a printed page isn’t comfortable for most people. On screen it’s unreadable for anyone over 30. Except for the “small type” you’re trying to make unreadable 12 points (or even 14) should be your minimum.

31. Too little contrast between text and background: It’s really hard to read!

32. Using non-breaking spaces to align type: For tabular data use tables. To position type as a design element use CSS styles.

33. “Ransom” note styling: Using too many fonts, too many styles, too many weights, too many sizes and too many colors is simply too much.

Images

34. Images without the alt attribute: Search engines, screen readers, and that little text box that sometimes pops up when your mouse is over an image all use the alt attribute. You should too.

35. Jigsaw puzzle graphics: Don’t slice images more than necessary. Each slice requires an extra call to the server.

36. Resizing images in the browser: Size your images in your image editing program before placing them on your pages. Images that are blown up in the browser lose quality and images that are reduced in the browser increase the loading time of a page. For example, a 1 inch by 1 inch image loads 4 times quicker than a 2 inch by 2 inch image, even if they are displayed at the same size.

37. Improper image format: JPEGs are best for photos and continuous tone images. GIFs are best for images with large areas of flat color. Also, transparent GIFs are prone to “ghosting” if used incorrectly.

38. Use of transparent PNGs without Explorer fix: PNGs offer true transparency but it doesn’t work properly in Explorer 6 without a javascript fix. Thankfully IE6 is almost a thing of the past. Feel free to ignore this one.

Animations

39. Gratuitous Flash: No matter how fantastic your Flash splash page is, nobody really wants to watch it more than once. If you must “Flash” yourself, at least provide a “skip animation” link.

40. Non-stop animations: Let your animation cycle a few times and then stop it before it gets overly annoying.

41. Too many animations: More than one animation on a page is just annoying.

42. Use of the <blink> tag: Thankfully some browsers ignore it.

Philosophy

43 “Sheet of paper” pages: Your screen is not eight-and-a-half inches wide, things don’t necessarily stay where you put them and, when you get to the bottom, you can scroll. Take advantage of the design possibilities those attributes and others offer.

44 Confusing content and design: HTML tags (p, h1, h2, etc.) are structural elements and, by themselves, say nothing about how your page should look (see for example…). Organize your content using HTML and create the design of your pages with CSS (and maybe a table if absolutely necessary).

Miscellaneous

45. No contact information: The purpose of a website is communication. Right? Make sure people have a way to contact you if they’re interested in your work, product or service.

46. Reliance on email links: E-mail links only work if the user has an email program available and correctly configured. And they don’t work with G-mail and similar services. So people in libraries or school labs can’t use them. Most ISPs offer a form processing script that can convert the contents of a form to an email and send it to you. Use it.

47. Failure to respond to contacts: Sure you can ignore spam but, when a legitimate visitor takes the time to contact you, a prompt reply is just good manners.

48. Auto-play sounds: Unexpected sounds are annoying especially in an office or classroom.

49. Opening too many windows: Cluttering up someone’s screen with a new window every time they click on a link is just bad manners.

50. Failure to check for cross-browser inconsistencies: Your site should work on Macs and Windows, in Explorer, Firefox, Chrome and Safari.