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 )

 

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:

<div style=”border:1px solid #000″>Hello</div>

Eg of using CSS instead:

.hellostyle{border:1px solid #000;} <div class=”hellostyle”>Hello<div>

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

.hello{border-width:1px;border-style:solid;border-color:#000;}

Instead use the below:

.hello{border:1px solid #000;}

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:

<script type=”text/javascript”>            <!–            document.write(“Hello World!”);            //–></script>

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:

<link rel=”canonical” href=”http://www.example.com/product.php?item=swedish-fish”/>

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.