Mauro Pirrone | Blog

Digg it!

Being a web design tutor I come across many web design mistakes. I have collected some these over here:

1. The homepage is the most important page of your website. The visitor should know what the site is all about within seconds.
2. Links are not identified by a different contrasting colour.
3. Incorrect use of page titles. Every web page in a website must have a different page title. As far as search engine optimization is concerned, this is the most important HTML tag. Make sure the page title reflects the page content. If you are using Dreamweaver don’t leave the page title "Untitled Document". You may easily solve this by scanning your website (Site Menu > Reports…).
4. Don’t try to be a hero by overcomplicating a website. Simplicity and consistency is the key to successful websites.
5. Never irritate your visitors by opening unwanted new browser windows. Preferably you should open a new browser window when linking to an external website.
6. If you are an un-experienced web designer using a web design tool such as Dreamweaver, you might create headings by simply increasing the font size and changing the font colour. This is a big no no! If its a heading make use of heading tags (h1, h2, h3) and apply CSS styles. Heading tags are extremely important for search engine visibility.
7. Similarly, don’t use headings if you simply want big text.
8. Never and ever leave the description and keywords meta tags blank!
9. Make sure you set the alt and title attributes for every image in your website. If you are using Dreamweaver, it has a feature to automatically scan for missing alt attributes (Site Menu > Reports…).
10. Boring images! Use stock photography websites such as gettyimages.com for quality images.
11. For every link in your website, make sure you set the title attribute.
12. Never resize an image. Images should be displayed in their original size.
13. Don’t let your visitors use the horizontal scroll bar! These days it is recommended to design your website for 1024 x 768 screen resolution.
14. Avoid using frames. Search engines hate frames as well!
15. Try to have an organised directory structure. It is recommended to have folders such as images, css, js, etc. Never use spaces in directory or file names. Use underscores ‘_’ or dashes instead ‘-’. Having consistent names help as well.
16. Outdated or incorrect information is worst than having anything at all!
17. Website navigation should be consistent and visible in all pages. Ideally you should have text-based navigation at the bottom.
18. Make sure you fix broken links. Dreamweaver has a feature which allows you to scan for broken links in your website (Site Menu > Check Links Sitewide)
19. Distinguish between a <br /> and a <p></p>. The former should be used for a line break (e.g. for a postal address) while the latter should be used for different paragraph.
20. Make your text legible by using appropriate font size and contrast.
21. Common styles should be placed in an external style sheet (.css file) instead in an internal style sheet (in the html web page).
22. Don’t use too many different types of fonts. Ideally you should make use of 2 or 3 different font faces.
23. Make sure your website is compatible with different web browser. I usually test websites firstly with Firefox, then with IE 7, Safari, IE 6, and Opera.
24. Ideally you should use standard fonts such as Arial and Verdana for body text.
25. Do not confuse the visitor with many versions such as Flash and HTML. To do this, you should use automatic detection techniques.
26. Long pages should be split into multiple pages.
27. Optimise your images by using appropriate image compression. GIFs should be used for images such as buttons or logos whereas JPGs should be used for photos or any other image with many colours.
28. Forms should be organised using fieldsets and legends.
29. It’s ridiculous to disable the right click and selection of text.
30. Make sure your provide contact information.