35 Web Design Mistakes You Should Avoid

October 25th, 2009 · 48 Comments

This article is an ever-changing list of some common, controversial, and often forgotten mistakes that are made in web development. Most of them will apply to any website or blog, but please keep it mind that there will be cases where these would not apply and some you may dislike.

1. Presuming the phase “If you build it, they will come” – Even if you achieve the perfect website you still have to take steps to market that site. It becomes increasingly more necessary that you take the time to put the word out about your website online and offline. If you do not take the time to brag about your site, no one will.

2. Do not blend advertisements into content – It may increase your click through rate in the short term, but when a user thinks they are clicking on an internal link and then finds out you just tricked them – most will not be coming back.

3. Avoid splash pages (intro) to your website – These luckily are a dying fad, but at one time these were what a lot of websites prompted visitors with when they first gained access their website instead of the content they were attempting to reach.

4. Make unvisited links a different color from visited links – This is a basic usability tip. Users recognize the default link color easily, and are use to seeing visited links change color – it helps ensure they do not revisit pages unintentionally.

5. Ensure that your website is cross-browser compatible – Browsers are not created equal, and not all of them interpret code the same way. Like it or not, you need to make sure that your site appears correctly in popular browsers – browsershots.org is a great tool for doing this.

6. Music Players – Do not place a music player on your website; if I wanted to listen to music I would open my music player. It simply annoys visitors, and they have to hit the stop button every time they load another page. If you run a site related to music, then allow the user the option of starting the player when they are ready.

7. Do not overuse Flash if not necessary – Not only does Flash increase the load time of your website, it hurts your SEO, and excessive usage of Flash might also annoy some visitors. I suggest that you only use it when necessary.

8. Keep browser features intact – Do not break the back button, forward button, adjustments to focusing or any other browser functions – some people rely on them.

9. Do not open links in new windows – Allow the user to control his/her destiny, if they wish to come back to your site then they will by using the back button or other browser features.

10. Get your point across quickly – You need to make sure that the user can quickly identify the contents of the webpage; if they cannot figure out what the page is about then it’s pretty common they will just leave. Use your title tags, and headings to spell a clear message to the user.

11. Do not adjust the browser window size – Let the users control their own browser, resizing a browser can affect other tabs/windows they currently have opened.

12. Do not use hidden text – You should never attempt to trick search engines by using hidden text to fill your page with keywords or content to improve search engine ranking – this is simply an easy way to get ban from search results all together.

13. Do not try keyword stuffing – When adding the keyword tags to your pages ensure that the keywords you pick are relevant to the content on the page. The best thing to do is make sure each keyword is mentioned in the content multiple times. If you choose not to follow this rule it could result in a ban from Google.

14. Do not use visible visitor counters – Not only are these things unprofessional, they are completely pointless for visitors to even see. You should instead use an app like Google Analytics to quietly track all of that information for you.

15. Do not underline or change colors of normal text – Users have come to identify underline and different color text as links. Try to follow this simple rule so that users are not confused about what is a link and what is not one.

16. Format Content Correctly – Different standards apply when writing internet based content – you’re not writing a book. Make use of elements like bullet points, headers, sub headers, and list. Break content up.

17. Do not use tiny font sizes – Ensure that contents readable for all different kinds of visitors. The older the visitors are the more likely they will have a harder time reading the content, and most of these same people are unaware of browser resizing options.

18. Be consistent – Do not change the theme or link colors midway in the site. Ensure that your theme follows the same throughout the site.

19. Do not put text (content) into images – Put text in HTML when possible. Web designers will sometimes use images for their content or information because they mutilate fonts and sizes easily. But this is non-robot friendly (SEO), cannot be easily resized (like text can), doesn’t work for text reading software for the blind, and will increase load time.

20. Avoid bright harsh colors – Ensure that the font color is easy to read on your choice of background color. Also keep in mind just because you can read your bright pink font on your yellow background doesn’t mean everyone can. I have always found that black font on a white background to be the best choice.

21. Provide a basic search function – Search ability is one of the most important navigators in a website. You can now give your visitors the power of search by using Google’s Custom Search Engine.

22. Use ALT and TITLE attributes – Make sure you are making use of these attributes because it will not only help your SEO, but also help the blind with text readers.

23. Do not require a registration unless necessary – Do not force users to sign up when it’s not necessary. Period.

24. Make use of standard fonts – It would be wise to use standard web fonts when creating a website, because if a visitor doesn’t have the font you have selected then it will pick a different one to replace it.

25. Using Pop-ups – Making use of pop-ups for content based pages or even ad based pages has become a bad idea over the years with the increase in pop-up blockers.

26. Over-crowding – This is pretty common for web designers to add to many elements to pages. It gives off an unprofessional look and is difficult to navigate through all the information.

27. Lengthy Pages – People avoid reading lengthy pages. Being brief with your message will normally cause those pages will have a higher readership rate. If necessary setup a series of well navigated pages if you have a lot to say.

28. Slow loading pages – Believe it or not, people still have dial-up. Visitors will quickly move on to a different webpage if yours doesn’t load quickly enough. Attempt to trim your pages down so even the visitors with the worst internet connection can access information is always a good idea.

29. JavaScript based navigation – Not only does Google promote you to avoid the use of JavaScript based navigation, but also some users and companies run with scripts off while searching the internet making them not able to properly navigate your website.

30. Get a Sitemap – Sitemaps are simply a page with list of the most important or all of the pages on your website. Creating an XML Sitemap file for your site helps search engines discover the pages on your site easily.

31. Do not disable right clicking – Normally the webmasters doing this is attempting to stop the you from gaining access source code or image locations, but it’s highly annoying and users can still access those areas even after right click function is disabled by using the main menu.

32. Refrain from complex URLs – A keyword based URL structure will not make only improve your websites search engine rankings, but will also help visitors easily indentify content by URL name.

33. Do not use images for navigation links – When creating your websites navigation you should make use of text instead of images. Text based navigation is not only better on your load times but also you should never do something that you can easily be create with a style sheet.

34. Optimization of CSS & Images – Take the time to optimize your CSS and images – this will help lower load times and total weight of your website un-cached will be reduced. CleanCSS.com.

35. Common problems exist with Flash, Frames and AJAX – you can’t link to certain web pages. Try not to use Frames at all and use Flash and AJAX sparingly for better SEO results.

User Submitted

36. Do not have video start playing automatically – too many sites do this these days and I do not ever want a video to start playing every time I hit a particular website’s homepage.

37. Animations and flashing text effects is so 1999 – Cheesy Animations and those flashing text effects that can be done using CSS were widely popular in the earlier years of the internet but we have moved past that.

  • Anna

    Great site and great list.

  • Anna

    Oh…And why would you try to get your guests to register after posting #23 (don’t make them register unless you HAVE to) Practice what you preach?!? :)

    • Zach

      I’m not sure what you’re referring too. I don’t make anyone sign up for any kind of membership to enable different actions on my site (ex. comments).

      You may post as a guest in the comment section or you have the ability to login to an account that you registered with facebook, twitter, disque, or openid. If you don’t have any of those accounts you may still post as a guest.

      I do require an email address to lower the amount of spam and also have a way to contact the poster.

    • http://www.creativeindividual.co.uk/ Laura

      Erm I didn’t have to sign up for anything…? What do you mean?

  • Chuki

    This is GREATT..!!!

  • http://www.electrictoolbox.com/ Chris Hope

    36. Do not have video start playing automatically – too many sites do this these days and I personally do not ever want a video to start playing every time I hit a particular website’s homepage.

    • Zach

      Great one, I’ll add it to the list.

  • http://www.olympus-tours.com/ Kevin

    Thanks, I’m taking over a new project and making sure to apply these to it.

    • Zach

      Thanks :)

  • http://www.designtorontoweb.ca/ Teena

    Provide a basic search function…I’ve been reading this tip a lot…and honestly some would not still adhere..it’s a MUST. I read a lot of blog and some are really useful and when it’s useful I tend to look for something that might be there but then I get frustrated that some blog sites do not provide a basic search.

    Nice article…a reminder once again and hopefully others would really adapt it.

  • http://www.core-studios.net/ Panagiotis

    Use breadcrumb – here are some reasons http://www.useit.com/alertbox/breadcrumbs.html

    Very nice article.

    • Zach

      Thanks,

      I didn’t think about adding this one. I do use breadcrumbs and love them!

    • http://WRRY.me/ William R. Reynolds Young

      Didnt know there was actually a name for that!

  • Cervi

    Hello, good advice.
    Even so, I’m not agree with point 14, can be useful for the user, based on the number of visits you can check if it is a good site or not.

    The Site Map is useful only in some cases.
    In my case, as a user, I prefer to navigate through images (point 33) and I like surfing opening new tabs (Item 9)

    Thanks for te article!!

    • Zach

      Yeah, Some of these do not apply to every website. I do think that visitor counters have a place on some websites but I wouldn’t suggest it on most of them.

      As for the Sitemap, I mainly only use those for search engine submissions (ex. http://netjelly.com/sitemap.xml).

  • http://www.declanon.com/ Declan O’Neill

    Great list, and another reason why #17 is bad – many people dyslexia have difficulty with certain fonts or with small print.

  • Joel

    Put some space between lines of text – It makes it easier to read.

  • http://WRRY.me/ William R. Reynolds Young

    36. When possible use commenting services like disqus for easy commenting. Also think about allowing users to login to your site via Facebook or Twitter.

    37. Frames, don’t use them.

    38. Spelling grammar errors are a big no-no.

    39. Animations and flashing text is often annoying.

    • stephan

      37. Use frames only where necessary, usually for RIA. Refer to Gmail.

      • http://WRRY.me/ William R. Reynolds Young

        I dont like Gmails use – makes it slower, however not sure what other way they could do it.

  • http://www.moinid.com/ Design ideas

    Thanks for useful information. I found something new for self

  • Owen

    About the #34, if you add the image of your email instead of the text version, should we avoid the mailto link too, right? I mean… I think that the spam robots just go throught the code searching for the address, am I right?

    Thanks for the article, it’s a big help

    • https://me.yahoo.com/a/5liCtUQ5o8wvoEDGc4R37q62pevEB60-#fc400 Daily Nicole

      You are right. Most spam bots go for the code. You even get spammed sometimes via the forms you put on your site. But that is when you place a CAPTCHA to be submitted with the form.

  • http://screencaffeen.com/ Screen Caffeen

    Templates. Hire a real web designer so that your site reflects your personality vs. being created from a template. (For instance many Joomla sites look totally canned to me, because the “designers” use a packaged template and don’t understand how to build a custom template)

  • http://izit.org/ Rob

    @27
    Not great advice out of context, sometimes longer pages work a lot better then breaking your content up. If you have complex navigation and content strewn across multiple pages it’s possible for the end user to get lost. Having all of that content provided in the same page (if well designed) can be easier to read and less frustrating to navigate.

  • http://www.creativeindividual.co.uk/ Laura

    Good comprehensive list. Luckily I already follow most of them, and for the 1 or 2 I don’t, I now know the error of my ways. Thanks for this.
    BTW, this is my first time to your site, and I like your writing style.

  • http://paleomemphis.tumblr.com/ Tyler

    Great list – I do a couple of these but I’ll take your advice and change it up. Thanks

  • http://www.correresmidestino.com/ Zhu

    Captcha are also super annoying when you try to comment on a blog. I agree that spam can be a nuisance but if you have Akismet or similar on WordPress, as a webmaster, just take the couple of minutes to remove any unwanted comments that may not have blocked by Akismet.

    I’m so sick and tired of solving maths problems are deciphering letters just to say something… Oddly enough, I’d understand the captcha thing for very popular blogs but it’s always the small blog with like ten readers who make commenting the hardest.

  • http://www.alfalfaanne.com/ Alfalfa

    Good points – ah, I love the cheesiness of those splash pages.

  • http://www.niyati.biz/ Niyati @Web Designer India

    Bookmarked and will share with all my friends in office, also try and avoid these costly mistakes. Thanks for the share :)

  • http://designikx.wordpress.com/ Nikhil

    really a helpful topic. Will consider all these points from my next design.
    thanks for sharing it.

  • http://www.mitchellmcleod.com/ Mitch

    I dont agree with 9 or 34.

    9 – If your site users are not all that tech savvy, they may close out of it and not know where the website they were just visiting has gone and will not be able to find it again ( I see my Dad doing this all the time!).

    34 – Not all people like typing out email address, links are awesome way to collect spam, but thats the your problem, not the users, make it as easy as possible for people to contact you! :)

  • http://twitter.com/simoncarr Simon Carr

    Well, I’d say only about half of these are things you should never do (1-15)… Many of them are things that improve the user experience, but not things you should absolutely avoid.

    For example – using images in navigation. The argument about load times doesn’t make sense since nav images are typically very small. Image based navigation is very common, and allows much more customization than basic text, which may not be rendered the same depending on browser and operating system.

    • http://www.cheshire-webdesign.net/ Jonesy

      Unless you use Cufon…

    • Zach

      Here is the SEO difference. Image based navigations display all the ‘words’ of page names inside an image (a gif, jpg or png) and while that allows for a multitude of style options, the search spiders can not read your image. It only sees an image, and perhaps an alt tag. Text-based navigations, however, have the navigation (page names) in the code, so the spider reads it as plain language, and therefore, can follow links and index pages with better accuracy.

      • http://cricketlachica.com Cricket La Chica

        Solution: If you want to use an image for your navigation, and still want good SEO, add the text inside that link, make the image the background of that link, and make use of the text-indent CSS attribute.

    • https://me.yahoo.com/a/5liCtUQ5o8wvoEDGc4R37q62pevEB60-#fc400 Daily Nicole

      The only time you could use small imagery is if it CSS based in your navigation. Even at that most times it is small. I think what the author of this article meant is to never use the image as non css based and have the text included on the image. For navigation and SEO purposes both the text and image should remain separate for menus.

  • Art

    You forgot “Make sure that the text on your web site measures up to a reasonable degree of literacy (spelling, grammar, etc.).

  • Felix

    I guess you mean browsershots.org in #5.

    • Zach

      Thanks, fixed it.

  • http://twitter.com/chopeh Pete Lacey

    All good points, except No. 34.

    I still find it hard to believe this is still being spread! It’s 2010!

    Why should we make it harder for a visitor to our site to contact us? Spam is OUR problem, not the users. We should deal with it in our back-end.

    I laugh at sites that use alternate methods (images, [at]‘s. etc). I want to email you using my email client, but I can’t? Get outta here.

    • Zach

      Hello Chopeh,

      I did review your blog post from a pingback I received today and wanted to respond to your obvious dislike for No. 34.

      No. 34 is one that is practiced by some, but not all. The original article was written years ago and updated when Netjelly switched to the WordPress CMS, so some of the information is possibly quite dated but practical nevertheless. I do agree with you that the image suggestion is indeed rather cheesy but one that any webmaster could adapt on their own website since some have no knowledge of how to create a feedback form. It was simply a simple solution to what some think is an annoying problem but you see it as nothing important, which is your opinion.

      I do make the point at the top that these will not apply always and that you may not agree to all of them. I do disagree with what seems to be your complete distaste for the whole article for what you seem to refer to as incorrect information as most of the items listed are widely known standards in web development today.

      Thanks for reading.

      • http://twitter.com/chopeh Pete Lacey

        Hi Zach,

        I’m a little confused – I said that the article had “All good points, except No. 34″. In fact it was probably because the other points were so spot-on it made 34 seem like a glaring mistake. So I didn’t have complete distaste for the whole article.

        You encourage debate at the end of the article; so that is just what I did.

        If I didn’t think the quality of your article was good, I would have moved on and not stopped to pass comment.

        I just think its a dangerous piece of information to keep spreading.

        chopeh

        • Zach

          Thanks Chopeh.

          I was responding to your blog post original and not the comment. I did miss where you said that “All good points, except No. 34.”, my apologizes.

          After thinking it over, I do agree that No. 34 is an older idea and not a real issue nowadays, with that new understanding I have removed it.

  • http://www.vmdoh.com Brian Altenhofel

    …and if you do use Flash, especially in an important area such as navigation or your page header, please provide a usable alternative…

  • http://cricketlachica.com Cricket La Chica

    Regarding #4: “Make unvisited links a different color as non-visited links” — uh… what’s the difference between the two? Isn’t unvisited the same as non-visited?

    • Zach

      Thanks, fixed it.

  • http://seanbehan.com/ sean

    nice rundown! although i have to say w/ gmail spam robots (#34) aren’t much worry.