43 Web Design Mistakes You Should Avoid

By Daniel Scocco

There are several lists of web design mistakes around the Internet. Most of them, however, are the “Most common” or “Top 10 mistakes.” Every time I crossed one of those lists I would think to myself: “Come on, there must be more than 10 mistakes…”. Then I decided to write down all the web design mistakes that would come into my head; within half an hour I had over thirty of them listed. Afterwards I did some research around the web and the list grew to 43 points.

The next step was to write a short description for each one, and the result is the collection of mistakes that you will find below. Some of the points are common sense, others are quite polemic. Most of them apply to any website though, whether we talk about a business entity or a blog. Enjoy!

1. The user must know what the site is about in seconds: attention is one the most valuable currencies on the Internet. If a visitor can not figure what your site is about in a couple of seconds, he will probably just go somewhere else. Your site must communicate why I should spend my time there, and FAST!

2. Make the content scannable: this is the Internet, not a book, so forget large blocks of text. Probably I will be visiting your site while I work on other stuff so make sure that I can scan through the entire content. Bullet points, headers, subheaders, lists. Anything that will help the reader filter what he is looking for.

3. Do not use fancy fonts that are unreadable: sure there are some fonts that will give a sophisticated look to your website. But are they readable? If your main objective is to deliver a message and get the visitors reading your stuff, then you should make the process comfortable for them.

4. Do not use tiny fonts: the previous point applies here, you want to make sure that readers are comfortable reading your content. My Firefox does have a zooming feature, but if I need to use on your website it will probably be the last time I visit it.

5. Do not open new browser windows: I used to do that on my first websites. The logic was simple, if I open new browser windows for external links the user will never leave my site. WRONG! Let the user control where he wants the links to open. There is a reason why browsers have a huge “Back” button. Do not worry about sending the visitor to another website, he will get back if he wants to (even porn sites are starting to get conscious regarding this point lately…).

6. Do not resize the user’s browser windows: the user should be in control of his browser. If you resize it you will risk to mess things up on his side, and what is worse you might lose your credibility in front of him.

7. Do not require a registration unless it is necessary: lets put this straight, when I browse around the Internet I want to get information, not the other way around. Do not force me to register up and leave my email address and other details unless it is absolutely necessary (i.e. unless what you offer is so good that I will bear with the registration).

8. Never subscribe the visitor for something without his consent: do not automatically subscribe a visitor to newsletters when he registers up on your site. Sending unsolicited emails around is not the best way to make friends.

9. Do not overuse Flash: apart from increasing the load time of your website, excessive usage of Flash might also annoy the visitors. Use it only if you must offer features that are not supported by static pages.

10. Do not play music: on the early years of the Internet web developers always tried to successfully integrate music into websites. Guess what, they failed miserably. Do not use music, period.

11. If you MUST play an audio file let the user start it: some situations might require an audio file. You might need to deliver a speech to the user or your guided tour might have an audio component. That is fine. Just make sure that the user is in control, let him push the “Play” button as opposed to jamming the music on his face right after he enters the website.

12. Do not clutter your website with badges: first of all, badges of networks and communities make a site look very unprofessional. Even if we are talking about awards and recognition badges you should place them on the “About Us” page.

13. Do not use a homepage that just launches the “real” website: the smaller the number of steps required for the user to access your content, the better.

14. Make sure to include contact details: there is nothing worse than a website that has no contact details. This is not bad only for the visitors, but also for yourself. You might lose important feedback along the way.

15. Do not break the “Back” button: this is a very basic principle of usability. Do not break the “Back” button under any circumstance. Opening new browser windows will break it, for instance, and some Javascript links might also break them.

16. Do not use blinking text: unless your visitors are coming straight from 1996, that is.

17. Avoid complex URL structures: a simple, keyword-based URL structure will not only improve your search engine rankings, but it will also make it easier for the reader to identify the content of your pages before visiting them.

18. Use CSS over HTML tables: HTML tables were used to create page layouts. With the advent of CSS, however, there is no reason to stick to them. CSS is faster, more reliable and it offers many more features.

19. Make sure users can search the whole website: there is a reason why search engines revolutionized the Internet. You probably guessed it, because they make it very easy to find the information we are looking for. Do not neglect this on your site.

20. Avoid “drop down” menus: the user should be able to see all the navigation options straight way. Using “drop down” menus might confuse things and hide the information the reader was actually looking for.

21. Use text navigation: text navigation is not only faster but it is also more reliable. Some users, for instance, browse the Internet with images turned off.

22. If you are linking to PDF files disclose it: ever clicked on a link only to see your browser freezing while Acrobat Reader launches to open that (unrequested) PDF file? That is pretty annoying so make sure to explicit links pointing to PDF files so that users can handle them properly.

23. Do not confuse the visitor with many versions: avoid confusing the visitor with too many versions of your website. What bandwidth do I prefer? 56Kbps? 128Kbps? Flash or HTML? Man, just give me the content!

24. Do not blend advertising inside the content: blending advertising like Adsense units inside your content might increase your click-through rate on the short term. Over the long run, however, this will reduce your readership base. An annoyed visitor is a lost visitor.

25. Use a simple navigation structure: sometimes less is more. This rule usually applies to people and choices. Make sure that your website has a single, clear navigation structure. The last thing you want is to confuse the reader regarding where he should go to find the information he is looking for.

26. Avoid “intros”: do not force the user to watch or read something before he can access to the real content. This is plain annoying, and he will stay only if what you have to offer is really unique.

27. Do not use FrontPage: this point extends to other cheap HTML editors. While they appear to make web design easier, the output will be a poorly crafted code, incompatible with different browsers and with several bugs.

28. Make sure your website is cross-browser compatible: not all browsers are created equal, and not all of them interpret CSS and other languages on the same way. Like it or not, you will need to make your website compatible with the most used browsers on the market, else you will lose readers over the long term.

29. Make sure to include anchor text on links: I confess I used to do that mistake until some time ago. It is easier to tell people to “click here”. But this is not efficient. Make sure to include a relevant anchor text on your links. It will ensure that the reader knows where he is going to if he clicks the link, and it will also create SEO benefits for the external site where the link is pointing.

30. Do not cloak links: apart from having a clear anchor text, the user must also be able to see where the link is pointing on the status bar of his browser. If you cloak your links (either because they are affiliate ones or due to other reasons) your site will lose credibility.

31. Make links visible: the visitor should be able to recognize what is clickable and what is not, easily. Make sure that your links have a contrasting color (the standard blue color is the optimal most of the times). Possibly also make them underlined.

32. Do not underline or color normal text: do not underline normal text unless absolutely necessary. Just as users need to recognize links easily, they should not get the idea that something is clickable when in reality it is not.

33. Make clicked links change color: this point is very important for the usability of your website. Clicked links that change color help the user to locate himself more easily around your site, making sure that he will not end up visiting the same pages unintentionally.

34. Do not use animated GIFs: unless you have advertising banners that require animation, avoid animated GIFs. They make a site look unprofessional and detract the attention from the content.

35. Make sure to use the ALT and TITLE attributes for images: apart from having SEO benefits the ALT and TITLE attributes for images will play an important role for blind users.

36. Do not use harsh colors: if the user is getting a headache after visiting your site for 10 consecutive minutes, you probably should pick a better color scheme. Design the color palette around your objectives (i.e. deliver a mood, let the user focus on the content, etc.).

37. Do not use pop ups: this point refers to pop ups of any kind. Even user requested pop ups are a bad idea given the increasing amount of pop blockers out there.

38. Avoid Javascript links: those links execute a small Javascript when the user clicks on them. Stay away from them since they often create problems for the user.

39. Include functional links on your footer: people are used to scrolling down to the footer of a website if they are not finding a specific information. At the very least you want to include a link to the Homepage and possibly a link to the “Contact Us” page.

40. Avoid long pages: guess what, if the user needs to scroll down forever in order to read your content he will probably just skip it altogether. If that is the case with your website make it shorter and improve the navigation structure.

41. No horizontal scrolling: while some vertical scrolling is tolerable, the same can not be said about horizontal scrolling. The most used screen resolution nowadays is 1024 x 768 pixels, so make sure that your website fits inside it.

42. No spelling or grammatical mistakes: this is not a web design mistake, but it is one of the most important factors affecting the overall quality of a website. Make sure that your links and texts do not contain spelling or grammatical mistakes.

43. If you use CAPTCHA make sure the letters are readable: several sites use CAPTCHA filters as a method of reducing spam on comments or on registration forms. There is just one problem with it, most of the times the user needs to call his whole family to decipher the letters.



Share

589 Responses to “43 Web Design Mistakes You Should Avoid”

  • Daniel

    Long list, Daniel.

    My pet peeve is ending up on a site that you find you become stuck on, due often to pop ups that keep popping up followed by a webpage that just won’t close.

  • Michael

    These are some really good points of things to avoid in website design. I remember back in the day when I created websites I would try to have audio automatically start in the background and not let the viewer control the music. I’d also manipulate their browser window and do a lot of other design flaws. Nowadays I am definitely getting away from that and getting better at being conscience of what the user/visitor actually wants to see.

  • Itachi

    I find websites that are full of ads are very annoying.

  • Sahil @iBlognet

    These are good points..
    I thinks I should revamp my blog after reading this!!

  • medyum

    I do have some problems with capital letters in a site. Not because people referring them as ‘rude’ or over-powering, it’s the invisibility for that particular sentence which uses caps for all the letters. Use the capitals when necessary, but not all the time. Just a little opinion…..

  • Rahul

    I think this list should be carefully read by Joomla developers.

  • Daniel

    Very comprehensive list, Daniel.

    I see so many design(on page) mistakes there that I have made on all my blogs, at one time or another. I am sure most people would later look back and ask themselves ” Did I really have that on my site”? or ” Darn! that was such a bad choice” I think we sometimes do things, spur of the moment, thinking the site will either stand out or benefit in some way. Then either almost straight away(Hopefully) or later down the track we come to our senses.

  • Bingo Babe

    Amazing list. Design is so important. You only have a few seconds before people make a judgement on your site. If it doesn’t look good they are leaving, and i don’t want that. Thanks again!

  • mfarooq

    Great post!

    Well not exactly related to design, but a very common mistake that webmasters do is using the same page title for their entire site, which is bad not only for user but also for the search engine rankings.

    Again great job on the article and thanks for sharing.

  • Trudy Schwartz-Burrill

    AWESOME!
    I have some work to do!
    Some of the things we were taught about building sites in a web design class differs but everyone has their opinions and…

    I love what you have to say about so many things.
    Several things like not opening a new windows so they don’t leave your site is one of the things we were taught to do. I am not certain I agree with your thoughts on that (about everything?)

    What about your “more tags” would that not be better on them to open to the full page link to all your blogs on a separate window, so they could get back to see the site and see the pages that have sales items you want them to see also?

    Or do you feel we should have a link sending them back to site if they choose to go back at the bottom of every post?

    Do you think when visitors land on your site that they should land on the home or blog page?

    Thanks so much,
    Trudy

  • AngeloPC

    Wow! You would think that most would have picked up on “42. No spelling or grammatical mistakes”, but that doesn’t appear to be the case. It doesn’t even seem like the author heeded his own advice.

  • Sarah

    Despite feeling like I know what I’m doing reasonably well with web design, I decided to read this post just in case. There are a few things that I had though initially that I should change about my blog but forgot about, and this post reminded me. They are all pretty important, so thank you!

  • Umesh

    I used to do mistake no 5. I used to open each link in new window and guess what I realize myself that it is not good when I visit other blogs having same mistake. I returned to my blog and remove them all.

    Thanks for sharing.

  • AndyD.Org

    These tips are well-written and funny. My favorites are not to play music and warn about PDFs. No one wants to get startled by blaring speakers (remember the cheesy MIDI music?) or have the browsers freeze up.

    You forgot to mention using animated background images. Sadly, there are still sites that do this.

  • Manie

    >>Do not overuse Flash & Do not play music <<

    I agree with you – It make my com overload.

    Thanks for your article.

  • Libby

    I actually disagree with you about drop-down menus – I think they can make a navigation menu less cluttered and more organized. Especially when you have a large number of pages to link to, I think it is better to use a drop-down menu than to try to squeeze all of the links into the menu. Of course – if you are using a drop-down menu then the top navigation text must be very clear about what it’s submenus contain so that visitors can quickly find the links they are looking for… Anyways, this is a great article with a lot of good points! 🙂

  • wonderfox

    Great post, I like your article and I think this is what I am looking for, I ‘m a web designer, I have encountered many problem as you said, after viewed your post, I must say : I learned too much from u. I will usually scan your web. Thans for sharing.

  • Rebecca

    Hi thank you for this post, it is very helpful. I think using wordpress themes with clean format can avoid these mistakes and also avoid fancy graphics so that the user will know what your site is talking about and you must be direct to the point. Cheers and thanks for sharing.

  • Laura

    I agree with everything except the table vs. CSS. I have been creating sites with tables and on every browser they work. I have visited sites created with CSS and have had ads and/or pictures appear over the text that I want to read!
    If I designed a site for a client and then they viewed it from their browser and the pictures covered some of the text, they would surely be upset.
    The issue seems to come up when I use Internet Explorer, which many of my clients use (and telling them to use a different browser makes me sound less skilled). While learning web design I was told many times to be backwards compatable. It seems the CSS designers don’t bother to make the CSS work in older browsers, or don’t test in every browser. The answer I get the most is “upgrade your browser”. Fine for me, but the reality is that a lot of surfers don’t bother to upgrade until they are forced to, and may not realize the issue is with their browser and not the website.
    Even those who are telling everyone to use CSS has to admit there are some spacing issues. Why aren’t these solved yet?
    I am in the process of learning CSS in the hopes that this issue will be fixed so I can start using it. I can see the advantages in it, I just want it to work in every browser out there.

  • Jess Willard

    As crazy as it sounds, its still amazes me how items like these still get requested – I had a client ask for the tag a little while ago, but happily enough doesn’t jive with IE so they decided not to ultimately use.

    Good list – think my top item off the list is the auto-audio playing file… actually even worse the flash-generated ‘person’ who walks across the home page screen to explain the company/service… haven’t seen one of these in a while and thanking my lucky stars this is still the case 🙂

  • Joshu Thomas ( OC webmaster Blog)

    Basically the essence of things to avoid is do NOT over do Anything be it – ads, flash, tags, seo, links etc. But you can over do ONE thing – that is Unique content !! 🙂 wishing all my fellow bloggers a problogger success !!

    Cheers
    Josh, OC Blog

  • Laura Pruitt Design

    Thank you for this enlightening article. I am in the very beginning of my career in web design and am glad to read this! Very helpful. 🙂

  • digwriter

    Another common, yet rather overlooked mistake is in not allowing symbols in the name field of online forms. This potentially costly mistake could result in alienating customers with hyphenated last names. Even a big company like Procter & Gamble Canada has made this mistake.

  • Eamon Diamond

    Great post! I will apply this and implement as soon as I can.These tips are really helpful specially to beginners.

  • Jim Juris

    I know that this article was written a few years ago.

    I do not see anything wrong with having a new page open up when sending someone to a different location.

    I also don’t see anything wrong with having a drop down menu. I like a menu that is compact.

    I also disagree with having short web pages. Long sales copy has worked well for me since I started selling online back in 2002.

    Long sales copy helps with SEO for my websites because it allows me to include more keyword search terms into the page content.

Comments are closed.