Classic Car Online

Pure Custom Auto Restyling

50 Most Common Web Design Mistakes In 2009

Page Titles

1. Untitled documents: Untitled Document is the default title for pages produced in Dreamweaver and other web design programs. Many of them forget to change it.

2. Same title for all pages: The title is very vital. Help the world 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 “Tom’s Page” try something like “Cartoons by Tom” or “World of Cartoons.”

Meta Tags

4. Duplicate Meta information on all pages: The keywords and description Meta tags in the head of your webpage help all search engines to classify your page. If you duplicate the tags across all WebPages of your website, they will look similar to searchers. Customize the keywords and descriptions for each page or don’t use them at all.

Site Structure

5. No index.html in the root directory: By default the index.html or index.htm, index.php, default.htm, etc. is displayed when you visit http://www.yourdomain.com. If you don’t incorporate it, users will get an error message.

6. Disorganized file structure: How you arrange your website files won’t influence what the website looks like but lack of organization can make your life hell 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: Unintentionally uploading a few Photoshop files can eat up your disk space speedily. Store your resource files such as 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 then don’t post it. Keep in mind “Under Construction” is believed to be a temporary condition file and, after a month or, so it starts to seem permanent.

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

10. Horizontal scrolling: The smallest amount common denominator for monitor width is currently 800 pixels. People need to leave space for scroll bars and page margins etc. so 760 pixels is a good standard width for your web pages. Wider may be satisfactory depending upon your target viewers.

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

12. Out-of date content: If your content is no longer appropriate, delete it and upload new one, if you’re going to incorporate a copyright notice, update it each year.

13. Overly long pages: Differing to popular belief, there’s nothing wrong with long web pages if the content deserves it. But, if it can be done rationally, it’s usually a good idea to have several shorter pages instead of long pages. If you have long pages then do offer additional navigation to make it easy for readers to move within the pages.

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

15. Orphan pages: Pages you fail to remember to supply links that don’t exist as far as the rest of the world is concerned.

16. Alien pages: Pages that totally disregard 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

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

18. Broken links: Take care of it.

19. Hidden links: Make links easily recognized by using a contrasting color; underline them, and using button images or changing the rollover state.

20. False links: Underlined text and rollover images scream link. Use them carefully.

21. Menus that move: Launch reliable navigation zones and glue with them.

22. Unpredictable navigation: Once the user learns how to use your website’s navigation, don’t modify it on him.

Headlines

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

24. Using heading tags for design: Headings are structural elements and should be used to define the reason or point of the text they encircle. 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.

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

27. Using

instead of

: It will make formatting tricky.

28. Using
to control line breaks within paragraphs: Let the browser choose where your lines break within paragraphs. If you compel the issue you may get odd results as not all browsers size type exactly the same.

29. Typos and grammatical errors: Use your spell checker and check out 10 blatant grammar mistakes that make you look unintelligent.

30. Type too small: Really, 9 point type on a printed page isn’t contented for most people. On screen it’s illegible 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 for anyone.

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

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

Images

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

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

36. Resizing images in the browser: Resize your images in your image editing program previous to placing them on your pages. Images that are gust up in the browser lose superiority and images that are reduced in the browser boost the loading time of a page.

37. Improper image format: JPEGs are best for photos and incessant tone images. GIFs are best for images with large areas of flat color. Also, see-through GIFs are prone to ghosting if used wrongly.

38. Use of transparent PNGs without Explorer fix: PNGs offer true clearness but it doesn’t work properly in Explorer 6 without a JavaScript fix.

Animations

39. Unreasonable Flash: No matter how unbelievable your Flash splash page is, nobody actually wants to watch it more than once. If you must ‘Flash’ yourself, at least give a ‘skip animation’ or ‘skip intro’ link.

40. Non-stop animations: Let your animation cycle move around for few times and then stop it before it gets overly bothersome.

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

42. Use of the tag: Thankfully most of the browsers ignore it.

Philosophy

43. Sheet of paper pages: Your screen is not so wide, that things don’t unavoidably stay where you put them and, when you get to the bottom, you can scroll. Take advantage of the design potential those attributes and others offer.

44. Puzzling content and design: HTML tags such as P, H1, H2, etc. are structural elements, they shows your page appearance. Organize your content using HTML and generate the design of your pages with CSS.

Miscellaneous

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

46. Dependence on email links: E-mail links only work if the user has an email program available and correctly configured. And you can just hyperlink your email address. Use it.

47. Failure to act in response to contacts: It is good to ignore spam but, when a rightful visitor takes the time to contact you, a quick reply is just good manners.

48. Auto-play sounds: Unexpected sounds are frustrating particularly in an office or classroom.

49. Opening too many windows: confusing user with too many new pages on screen every time they click on a link is just not good.

50. Failure to check for cross-browser inconsistencies: Your website should work on Macs and Windows, in Explorer, Firefox and Safari. If it doesn’t work then you’ll drive visitors away.

About the Author

I'm associated with success driven web design development company based in Los Angeles.