50+ Web Design Mistakes To Avoid

Web design mistakes are something common while designing a website. These mistakes may not harm your website to a great extent always, but you can definitely avoid them to keep things clean for your website. I did a research today to find some mistakes all around the web and composed the list of mistakes in a single article. These mistakes can sometimes be called suggestions to improve your site design quality. I’ve also found some modern mistakes in this article.

Here is the list of more than 50 of them I found. These include some mistakes, suggestions, and improvements ( However you consider them )

50+ Web Design Mistakes for a better website:

1. Avoid too much of media –

  1. Media can be anything ranging from images(.jpg, .gif, .png, etc), flash contents(.swf), music(.mp3), videos. Using too much of media can definitely annoy the user if they use a low speed internet connection. The graphics used in the website should be very light weight and minimal. Keep the design simple yet beautiful. If your website is a music website, split the pages.

2. Don’t use small font size –

The users visiting your website should be able to read your contents easily. Don’t use tiny font size for your website. All users will not have a strong eye sight as yours. Bounce rate of your website might increase if you don’t follow this step.

3. Avoid drop down menus –

This is one of the most common mistakes done by many web designers. Designers, think that using a cool multi-level drop down menu or navigation can give the website a professional look. But, believe me most of the web users get confused when they see a list of large drop downs. Keep the menus listed all at one place, I should prefer you to put everything on the header portion or top sidebars region.

4. Avoid using similar colors for the font and background –

The users just don’t love this, using similar colors for the fonts as your background will not only make the readers difficult to read the content but also would make them leave the website very soon and search elsewhere. Use a contrasting font color always as opposed to the background. I suggest you to use, white background and a black font color.

5. Avoid cluttered and scrambled content or design –

A person visiting your website for the first time should on a first glance need to know what the content is about and how things are arranged. We are speaking about the arrangement in general. Don’t mix up and make things messy for the users. Keep the design clean, user friendly and accessible to the users. Give space between two elements, if there are important elements.

6. Do not use fancy font styles –

I’ve seen people getting some confusing font styles loaded from Google fonts API and using them for their contents, making things unreadable on the website. People visit the website for content and only content. If they are unable to make sense of the content on your website, they would never turn back to your website. Keep your font style simple.

7. Poor navigation system –

This is again one of the common mistake by web designers. This is related to the point number 3. Avoid creating confusing navigation touch points for your blog or website, rather create a simple and user friendly navigation. Keeping all your navigation touch points accessible from your home page is rather a great way of design skill. This not only enhances the visit length of the audience visiting the website, but also helps in SEO of the overall content.

8. Highlight important elements on a website –

This applies to sites which are product and service oriented. Hiding the important element like button to buy the product, can lead to confusion for the potential buyers and customers. Never bury your important buttons and media into large amount of texts. The user should know instantly, what he is looking for without making them think and pause, they will leave the site.

9. Avoid using the same colors for text and links –

Many of your important links would never be clicked if you do this. Let the users know that there are links in your content by contrasting the links from the normal texts. You are indirectly helping some amount of SEO to the website here.

10. Create a Cross-browser compatible Website –

Many designers, do not check the website compatibility on different browsers. Especially, the older ones. Designers are overwhelmed by new web technology features and design the website with the latest coding techniques. But, remember your website is targeted not just to the web designer community who is having the latest browsers, but targeted to audience who are very lazy to update their browsers. I suggest you to check for IE compatibility always.

11. Avoid too much of scripts in the website –

By mentioning scripts, we are talking about JavaScript and jQuery scripts. This is the most controversial addition and the most argued upon thing in this list. These scripts are used for usability of the website they generally are not used for bad. You get lots of useful features by adding scripting to your website, but don’t avoid the fact that these scripts can slow down your website considerably. Using minimal use of JS in your website is the mantra.

12. Don’t misuse your flash –

Avoid heavy usage of flash on your website, which can slow down the website loading time. And using confusing flash elements on your site can leave the users annoyed.

13. Avoid unnecessary coloring your text –

Avoid using bright and unnecessary colors behind your text thinking that you are highlighting the text. If you want to highlight the text, use dark colors as background with light colors as the text color. Remember the contrast mantra.

14. Use meaningful anchor text for your links always –

Anchor texts for texts used to glue to links(URLs). Don’t use something like “click here” as anchor text for the links, but use meaningful anchor texts.

15. Let user choose where to go –

Avoid forcing the users to land on a page to make them read something about you or your website, or forcing them to get redirected to some other webpage(maybe an affiliate link). Avoid adding an intermediate page like an advertisement page before taking the user to the original content page.

16. Avoid boring and lengthy texts/contents/page –

This may not be mistake, but many prefer to write lengthy text contents with no images to sell their products. Suggest you to use bullet points and small paragraphs to describe your useful contents. If your site is a product marketing page, then you should definitely try using images and bullet points to describe the contents.

17. Don’t hide your links or text –

Hiding links or text is a form of spam, even Google and most of the other search engines don’t like sites where the pages contain hidden text and links to increase their page level SEO for more traffic. This is against the guidelines of a professional designer.

18. Avoid unnecessary popups –

This can be for your Facebook fan page, a welcome message or a RSS subscription request. You will annoy the users by forcing them to see something which they were not expecting. Allow them to do what they want to do on your website.

19. Don’t use annoying colors –

Color plays an important part of a design work. Pleasant colors are the ones preferred by many visitors and are most appreciated. Dark and annoying colors can make things worse for the readers and they would prefer to stay away from the website.

20. Too many advertisement real estate –

A good website design shouldn’t allow for too many ad slots. I’m not saying that ad slots shouldn’t be implemented at all, but using them wisely and few in numbers will not only increase the revenue but also the traffic. The most important essence of a website is its good quality content and not those ads. Ads are secondary. Impress your audience first with the content.

21. Content without an image –

Don’t put any article or blog write up without an image in it. At least place a single small image for an article or content you write. Also, place them at the beginning of the article/content to let the audience know the aim of the article.

22. Avoid cloaking links with ad links –

Cloaking is something similar to hiding the links. As we have described above, hiding links is a bad choice, and a bigger mistake would be to include ad links to cloak. Some people try to cloak the links in such a way that the normal link and ad links would look similar, making things difficult for the readers. Don’t annoy your visitor with ad popups appear when they hover over the links.

23. Poor URL structure –

Avoid using lengthy URLs and meaningless URLs for your content. Most of the search engines display only 65-70 characters for the URL links in the search results. So, make the URL structure wisely.

24. Avoid controlling the users browser window and size –

The title says it all. Don’t use scripts and other plugins to control the users browser window, button and other attributes which can hamper their browsing experience.

25. Use thumbnail images where necessary –

This is one of the most common mistake done by many designers. They upload a huge image say (600 x 600) to display a mini (64 x 64) image. It is recommended to use a software like GIMP to create thumbnails and upload them to the server. This will considerably cut down the load time.

26. Avoid disabling right clicks and select using JavaScript –

If your website contents are not meant for the public, then don’t post them on internet. Make a private blog/website to keep the content which are not indented to be copied by others. If your content is for public, then avoid disabling right clicks thinking that the users will not copy the content of the website. If the user is intelligent enough to know how to copy, he will use alternate methods to copy.

27. Use CSS over HTML tables –

Designers have been using HTML tables to display ordered content in their website. Now, designers are being encouraged to use CSS over HTML tables. With the growth and advancement of CSS, you can do much powerful things easily and efficiently. Controlling a table becomes easy if you are using CSS.

28. Do not animate your backgrounds to annoy –

Animation can either harm or become good. Similar to misusing of flash contents, misusing the animation for the backgrounds can be harmful. A moving background with text on it is really difficult to read, it is always a good idea to use a static background and a light color contrast for the background.

29. Avoid using too many .gif animation in your website –

Anything used excessively is harmful in a website design. Similarly avoid using too many .gif animations. This will slow down the website loading time. The feed contents(articles) will also contain these .gif animations if the website has an active feed – leading to slow feed delivery.

30. Don’t start music and video on page load –

Some websites start the music and video automatically upon loading. If your website is a not a music store or website, then you shouldn’t try this out. Allow the audience to start and stop the music/video on your website.

31. Differentiate the admin comments from readers comment –

People should get maximum attention to the admin’s comments over the readers comments. Admin comments should be highlighted while designing the comment system of the blog.

32. Name your files wisely –

It is common to upload files like zip, CSS, mp3 and so on. It is a good practice to name the file meaningfully to let the users know what they are going to download. Browsers like Chrome can let us know the file-name by hovering the mouse over the download link. This also accounts for SEO.

33. Avoid unnecessary registration request and a complex registration process –

Registration should be only for premium members to display certain things or to create and share content privately, but the same should not be misused by asking for registration to users where it is not necessary. Say a person wants to contact you via the contact form, he/she should be able to do it without any registration.

If it is really unavoidable for a registration, then make it simple and easy to complete the process.

34. Not including a search box (suggestion) –

Search box is a must if your website has multiple pages and a has a huge database of contents, letting the users to search things within the website.

35. Keep an eye on Screen Resolution to match different devices –

The screen resolution is an important factor for cross browser, device and system support for your website design. It is best to test your website compatibility with all the most commonly used browsers like IE, Chrome, Firefox and Safari. IE compatibility is the most difficult for some designers.

36. Avoid Complicated CAPTCHA System-

CPATCHA is used during registration, or while submitting a form data like comments is used to filter spam data to be submitted by bots and software. I say that using CAPTCHA is important and necessary to fight spams, but it is also necessary to take care of the audience by keeping the CAPTCHA simple.

37. Registration form which resets automatically –

This is not just for a registration form, but for any other form for that matter. I see that people go through redundant process of filling out the field data again and again. Don’t let the form to reset when the user makes a mistake in a field element, but reset only the field where mistake occurred.

38. Too big header hiding the main content –

Don’t keep the header height too much so that it makes the page content pushed down below. The first thing visible to the users is not just the header contents but also some part of the article or content.

39. Avoid styling directly in HTML tags –

There is no harm in doing so, but it is a good practice of efficiency to use the styling in CSS. That is the reason CSS were invented. This enables the designer much flexible while changing the look.

Eg of using the HTML directly in HTML tags:

Eg of using CSS instead:

40. Always use shorthand CSS properties –

This is again a suggestion and not a mistake. It is a good practice to use CSS shorthand to reduce the number of characters used to write the same code.

Eg:- Here is the code for not using the border shorthand property

Instead use the below:

41. Avoid making tiny clickable links –

This is again related to links, we have seen lots of stuff regarding links. The title here says it all, don’t make the links so tiny that it is never clicked (The purpose is lost)

42. Always include option to get in touch with the author (Suggestion) –

It is a good practice again to have a contact form/page or an email id to get in touch with the author/admin/designer(s). You should get feedbacks and suggestions regarding the design.

43. Asking for registration while submitting a comment or question –

If a comment, question or download requires the user to be registered. Please mention it before the user types down the enter comment or question in the fields. Once, he types and submits, the page shouldn’t pop up to ask for registration. Bad usability experience for the user.

44. Forgetting to add a scroll to top for a long page –

I’ve told that don’t create longer pages on your website. But, if your site is unavoidable of long pages, don’t forget to include to scroll to top link or button at the footer of the site.

45. Avoid broken links –

There are tools available online to check broken links in your website. Broken links is directly proportional to a broken audience or traffic. Here is a tool you can use to check broken links in your website.

46. Avoid spelling mistakes to the maximum –

Spelling mistakes can harm the website reputation. Even if the website has a good design, a spelling mistake on the header can be so cursing and discouraging to the reader. Check for spelling mistakes using Microsoft Word or any other program.

47. Don’t split your CSS to many external files –

Include all your CSS content always external, there is technical reason behind it, we shall explore them later. Now the question is not to split your CSS to many files. This will slow down your page load time by increasing the number of HTTP requests the browser would request. Loading one large organized CSS file is much faster than loading multiple smaller CSS files.

48. Use image ALT and Title attributes –

Using ALT and Title tags in your images not only add SEO, but helps the blind find what the image is all about. The title tags on images can help the readers know the purpose of this image and what the image is all about. A descriptive title tag is always appreciated.

49. Try combining images to form sprites(Suggestion) –

It is highly recommended method to deliver lots of images and sometime repeated ones on your website. It is a good practice to combine the images with CSS sprites to render them. This can considerably reduce the loading time of the website. Learn about CSS sprites from here.

50. Use <!– and //!> in your JavaScript always –

There are possibilities where the user has disabled JavaScript for their browsers. Then all your inline scripts in your template is visible along with the page content when rendered. It is again a good practice to use the <!– and //!> in your JavaScript as shown below:

All the current browsers support JavaScript. This code is just a backup to avoid the worst case.

51. Use Canonical URLs to avoid duplicated content in your website –

Recently, Google and other major search engines have been stressing the usage of canonical URLs to enable the search engines to know the existence of duplicate contents in two different URLs. By placing a canonical tag in one of the main URL, the search engine would know that all the URLs with duplicate contents refer to the same URL.

Here is an example of using Canonical tag:

Other Suggestions –

  • Don’t Split a lengthy article to 50 smaller pages to annoy your visitor. Make it 3 pages to 4 pages(max).
  • Don’t add 50 ultra-high resolution in a single page. Don’t forget about thumbnail I mentioned above.
  • Name your files and images meaningfully.
  • Never use a huge high-resolution images as a background or for any other element.
  • Set browser cache and cache everything possible.
  • Avoid using useless plugins if you are WordPress designer and user.
  • Avoid inline CSS and JavaScript as much as possible.
Hope you enjoyed this post. If you have anything to say against the article, you are free to express them in the comment section. We are open to all the suggestions and we are ready to take them positive. Also, if anything is missed out we are ready to review and include them in this list.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...