And Break!

101 Common Web Site Designer Mistakes

Posted on 20. Apr, 2009 by jules.

A lot of people are nowadays starting a new web site, may it just be personal blog or your own ecommerce site. With a growing number of web page we also see a growing number of web site designs.

The main stream of web sites are flawed with mistakes that are easily avoidable. Here is a list of what I found the most important mistakes made by web designers:

1. Do Not Sign up Users for Something (newsletters) Without Their Consent
2. Create Scannable Text: This is important for readers who do not have time to read your whole article. By using headlines, images, and making part of the text bold and italic the visitor will have an easier time recognizing the important aspects of your article.
3. Test the Design
4. Avoid Tiny Font
5. Text Should be Easy to Read
6. Clear Hierarchy: Make important things big and let them stand out. Unimportant aspects of the web site should be rather small.
7. Do Not Open Links in a New Window
8. Avoid Using Browser-Specific CSS
9. Visitors Should Know What Your Web Site is About Within Seconds of Visiting it
   
10. Good Search Function: Most of the default search functions suck, for example Wordpress’s search does. Go ahead and implement a better search algorithm as this will also increase your page views.
11. Do Not Use Animated GIFs
12. Create Easy to Use Navigation
    
13. Do Not Use Java
14. No Pop Ups: Pop ups distract users from your content. Poeple do not visit your web site to see pop ups but to see actual content.
15. Include a Search Box: Users are so used to searching since the evolution of search engines that they will look for a search function on your site.
16. Use an Uncluttered Design
17. Do Not Use Too Many Pictures
18. Leave Enough White Space
19. Do Not Use Meaningless Flash Animations
20. Avoid PDF files: Because most browsers require extra software for viewing PDF files, they are generally seen as breaking the user flow. Therefore whenever you have the opportunity mind using PDFs.
21. Change the Color of Visited Links
22. Make Links Stand out
23. Do Not Reinvent Navigation
24. Do Not Change the Look and Feel of Every Page
25. Loading Pages Fast: This aspect is important as people will be happier if your web site loads faster. Search engines also use it to calculate your ranking.
26. Horizontal Scrolling: Having to scroll to the right or left to view more content is not helpful to your fellow visitors.
27. Do Not Bury Essential Information Too Deep in the Website
28. Use a Unique design
29. Do Not Play Music Automatically
30. Do Not Write Your Website for Search Engines
31. Use Descriptive URLs: Instead of using a URL like http://yourwebsite.com/?p=105 , go ahead and change it to http://yourwebsite.com/article-about-blogging
32. Do Not Use Frontpage
33. Do Not Link to Banned Web Sites: Linking to banned web sites will be punished by search engines.
34. Do Not Violate Design Conventions
35. Avoid Website Stats Counter: Why should every visitor be interested in seeing how many people visited your web site? Only advertisers are interested in such things, so just go ahead and create an advertise page instead of using stats counter.
36. Do Not Disable Right Click
37. Use Valid CSS
38. Avoid Splitting Content Into Too Many Pages
39. Avoid Using Free Web Hosting
40. Do Not Use Shockwave
41. Avoid Spelling and Grammar Mistakes: This is probably one of the most embarrassing and easy to avoid mistakes there is in web design.
42. Use Valid HTML
43. Use a Consistent Layout
44. Use Image’s alt and Link’s title Attribute: Alt image attributes are required for the <img> tag, therefore go ahead and use it, otherwise you will end up with invalid HTML. Title and alt attributes are also great for search engine optimization so make sure you use some keywords.
45. Do Not Disable the Selection of Text
46. Do Not Use Frames
47. Avoid Using Free Email Addresses
48. Do Not Use Director
49. Do Not Put Ads in Your Articles: Advertisement distract users while they are trying to read your content. Make ads stand out at least in articles so visitors know what ads are and what the content.
50. Avoid Using Big Pictures for Thumbnails
51. Do Not Use Too High Contrast Text Colors
52. Do Not Include White Spaces within File Names
53. Set a Body Background Color: The reason for this is that not everyone uses white in his browser as the default background color.
54. Do Not Center Everything
55. Avoid Using Non-Standard Fonts
56. Avoid Using Bad Quality Pictures: Sometimes it might make sense to use a picture with a bad quality but most of the time it’s better to use a quality picture and just decrease the image’s size.
57. Ask People For Their Opinion about Your Design
58. Avoid Using Captchas for Posting Comments
59. Do Not Use the Wrong DOCTYPE
60. Avoid Browser Sniffing: Trying to attempt to detect the visitors browser and then loading browser specific code is not a good web design practice. It is easier if you just make sure that you create code that looks the same in every browser.
61. Do Not Place Full-Screen Ads on Your Web Site
62. Avoid Heavy Javascript Dependency
63. Do Not Use Images Instead of Text
64. Do Not Use Old School HTML such as <font>
65. Encode Ampersands & and Other Special Characters
    
66. Do not Require Registration for Comments: Why should people sign up at your web site just to post a comment? A comment is a favor in the visitor’s eye because he is actually investing time, therefore make it easy to comment.
67. Do Not Use High Tech Tricks or Scripts on Your Website
68. Do Not Use “Under Construction” Signs
69. Differentiate Between Visited and Unvisited Links: Your visitors will get confused if you don’t make it obvious which links they have visited and which they haven’t.
70. Make Obvious What is Clickable
71. Avoid Using Complex Backgrounds Behind Text
72. Always Link Back to Your Homepage
73. Enough Line Spacing: Nothing is worse than having one line under another without any space in between.
74. Avoid Big Forms
75. Do Not Make Fields Mandatory Unless They Truly Are
76. Support Autofill for Forms
77. Provide Contact Information: Contact Information is essential but some people do not think about it. I am astonished myself when I see how many people use the About and Contact page.
78. Do Not Use Complex URLs
79. Do Not Type All Text in CAPS
80. Always Keep Your Visitors in Mind
81. Avoid Useless Plug-ins, especially with Wordpress: Wordpress is a great blogging software but it becomes somewhat heavy when you use a lot of plug-ins. Go ahead and get rid of some, I am sure you can.
82. Avoid Starting Title Lines With “Welcome to…”
83. Do Not Use the Same Title for Every Page
84. Do Not Program the Web Site to Refresh after a Certain Period of Time
    
85. Create Contrast on Your Web Site
    
86. Use HTML and CSS instead of Javascript: There are often times when people think they need to use Javascript. But do you really? Usually there is also a way around which might even improve your users experience because the site still works even if Javascript is turned off.
87. Provide Means to Receive Feedback
88. Do Not Use Footer-Only Navigation
89. Do Not Show Errors to Readers
90. Do Not Use the language Attribute in Script Elements <script language=”Javascript 1.1″>…</script>
91. Avoid Long Scrolling Pages
92. Move Important Things to the Top of the Web Site: Most of the designers usually get it right automatically but some don’t. For example do not put your navigation in the footer of a web site, the navigation is almost the most important part of the web page.
93. Avoid Invisible Text
94. Do Not Ignore Web Standards
95. Avoid Using Jargon or Highly Technical Language
96. Do Not Start Videos Automatically: There is a reason for why popular web sites such as Youtube do not start videos automatically, it is rather distracting and users might also miss some of the video’s content while scrolling to it.
97. Design Web sites that Are Easy to Customize
    
98. Do Not Promote Yourself Overly
99. Use CSS instead of Images when Possible: This is especially important for template and theme designers as there is a way to avoid pictures in your template, at least most of the time.
100. Always Link Web Site Logos back to the Homepage
101. Do Not Use Fixed CSS Elements: I often find fixed CSS elements very distracting even if they are small. Therefore if you can then try to avoid them.

What would you like to add to the list? What do you think is important?

References and Further Reading:

• 43 Web Design Mistakes You Should Avoid
• Top Ten Mistakes in Web Design