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.
44. Incorrect use of background images. For example:
- Poor contrast with text.
- Overwhelming visuals that distract from the main content.
- Non-responsive images that don’t adapt to different devices.
- Low-quality or pixelated images.
- Slow loading times due to large or unoptimized images.
- Clashing background with foreground content.
- Lack of accessibility with no alt text for screen readers.
- Conflicting colors with the overall design.
- Poor placement of content over busy areas.
- Inconsistent with the website’s branding.
- Excessively long scroll length due to lengthy background images.
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.
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.
Great post! I will apply this and implement as soon as I can.These tips are really helpful specially to beginners.
I know that this article was written a few years ago.
Looks like an old discussion, but just found it from a current article on smashingmagazine. Agree with all points, except for “never opening a new window automatically for the user” – sometimes opening a new browser window is necessary for the ease of functionality of a website. Most people still have no idea that they can choose to open a new browser window themselves and will instead go through the annoying process of having to click the back button several times after exploring a new link if they want to return to the previous site. I would say that 90% of the time not to do that, but sometimes it is a good idea. Also disagree with “not using dropdown nav” since there is limited realestate in the nav bar, I usually prefer dropdowns to organize the space, especially if the pages can be organized in categories.
Well said!
Good tips for web designers indeed. I personally agree with the statement “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. ” specially when everybody is a busybody.
Thanks for sharing.
New to this discussion and I have a comment that’s maybe from a slightly different angle-I’m a professional artist (painter) and I also do some web design-for which I use the same skills. I would say a mistake is to neglect the overall visual impact of the colours plus layout plus images etc-partially helped by using grid models etc but often we talk in theses forums about functionality-a painting, of course has only one function-too look a certain way that causes people to linger and explore. That first visual impact of a site is so so important I feel, and web designers can learn much from visiting art galleries. I can spot a bad painter from the way he or she neglects the rules of composition-the same applieds to web pages-like usiong the rule of thirds, de-centring focal points, avoiding symmetrical divisions etc. What do people think of this point?
Agree with what you say, especially for the playing of audio in the background without the user consenting. Normally I will have10 open windows and not sure which one its coming from.
I do have some problems with capital letters in a site. Not because people referring them as rude or over-powering, its 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.
Thanks for sharing this excellent post. This is a great tutorial.
I also agree with you that placing pop-uos disracts users which may lead to losing traffic.
Another imposrtant aspect is to avoid Javascript links as they are not search engine friendly and will affect in your search engine result listing
Man I can’t agree with you more on both the audio and flashing text. The killer is that I have some old fashioned clients that INSIST that I put both blinking text and autoplaying audio on their sites.
Thank you! They are inspiring. I think it’s crucial that when we create a website to put the reader is in the top priority. And of course, providing quality content is probably the most important one. The content must be easy to understand and website must be easy to navigate. I think WordPress can be the best blogging or CMS system to create easy to navigate website contents.
This post regarding 43 mistakes we generally fo during the blog design is really worthy. thank you very much for your generousness. you are a genius.
With green Greetings from Everest land NEpal.
QUOTE:
[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.]
On Rule #10 what if your site is for a band?
Your blog is really a tutorial site for many new bloggers. This post regarding 43 mistakes we generally fo during the blog design is really worthy.
Point 27. is so much funny but realy true “Do not use FrontPage”
My concern is to Avoid the drop down menus. Sometimes, clients have so many sub menu in their website. And they dont want to much click when they want to go into it. How we can resolve this issue?
I kind of disagree with #43.
I often make the captcha as hard as possible and give an option to listen to the word. Works best so far!
Having been a webmaster for quite a few years, I can completely agree. I do agree with you Dostluk. This is a large list, but all of the tips given are extremely important in order to succeed online.
Thanks for this list Daniel. Personally I don’t see any problem with cloacking affiliate links. Surely those who are familiar with affiliate marketing would realize the link is cloaked. Those who are not familiar with affiliate marketing wouldn’t even bother with the link. At least this is how I see it.
Thank you i quickly fixed my errors
My head hurt reading through this list. Why must there be so much stuff to avoid doing?
Hi daniel,
Your blog is really a tutorial site for many new bloggers. This post regarding 43 mistakes we generally fo during the blog design is really worthy. thank you very much for your generousness. you are a genius.
With green Greetings from Everest land NEpal.
Hseyin Sarul
My concern is to Avoid the drop down menus. Sometimes, clients have so many sub menu in their website. And they don’t want to much click when they want to go into it. How we can resolve this issue?
This is some really great information- unfortunately I have broken a large percentage of your suggestions lmao. If you go to my page, you will see that it looks like disney land- and I actually prefer it that way lol. But great suggestions still;-p
My head hurt reading through this list. Why must there be so much stuff to avoid doing? Life should be simpler.
This article is really a tutorial for many new bloggers. Great List and also some great comments with tips, If one followed the suggestion you gave here, they would make a great site.
I think Im good on 99% of them. that beats the shit out of me
Good tips for blog owners. But maybe some of them are not always the best choice. If it is needed Drop down menus can be better
This article could be turned into an E-Book and sold on many affiliate networks! Something that many so-called Gurus are doing in these days. Anyway, these tips are straightforward and helpful
There are some effective layouts now that scroll horizontally but do not scroll vertically. Some art gallery sites are one example.
Hi daniel,
Your blog is really a tutorial site for many new bloggers. This post regarding 43 mistakes we generally fo during the blog design is really worthy. thank you very much for your generousness. you are a genius.
With green Greetings from Everest land NEpal.
Nahendra Khadka
too battle with point number 40. To me its a case of my preference for shorter pages versus my perception that the search engines would prefer more content within articles
too battle with point number 40. To me its a case of my preference for shorter pages versus my perception that the search engines would prefer more content within articles
I’d rewrite #41 as “The page should scroll in one direction only”.
Ha – I am 431 in line….
Anyway, this is a good list for making you think about your design.
While flash is very a useful in some instances, it has (to a teacher like me) one big drawback: the IT-tools used by dyslexic people cannot crunch flash. Which is kind of a pity as many educational sites use flash in their otherwise very good exercises.
Good tips for blog owners. But maybe some of them are not always the best choice. If it is needed Drop down menus can be better …
I agree. Alot of the steps I am going to print out to make sure I am not doing. Another thing I have noticed sites with to many pictures and not enough information. I think people have to remember why they are creating a site. To get there information out of the web site wonderfull
I agree. Alot of the steps I am going to print out to make sure I am not doing. Another thing I have noticed sites with to many pictures and not enough information. I think people have to remember why they are creating a site. To get there information out of the web site
I agree. Alot of the steps I am going to print out to make sure I am not doing. Another thing I have noticed sites with to many pictures and not enough information. I think people have to remember why they are creating a site. To get there information out.
Great List and also some great comments with tips, I would say that a lot of non web savvy designers also insist on using non standard web fonts for their designs, although it may look cool there is pretty much 95% of the time a web standard alternative, forget about the sifr alternatives, just makes fonts look unsightly and images, doh heheh.
Great List and also some great comments with tips, I would say that a lot of non web savvy designers also insist on using non standard web fonts for their designs, although it may look cool there is pretty much 95% of the time a web standard alternative, forget about the sifr alternatives, just makes fonts look unsightly and images, doh heheh.
I too battle with point number 40. To me its a case of my preference for shorter pages versus my perception that the search engines would prefer more content within articles. Ive chosen the route of shorter pages, and breaking up the content into more niche article titles.
I think Im good on 99% of them. that beats the shit out of me I was good for 15 of em!
Hi daniel,
Your blog is really a tutorial site for many new bloggers. This post regarding 43 mistakes we generally fo during the blog design is really worthy. thank you very much for your generousness. you are a genius.
With green Greetings from Everest land NEpal.
Nahendra Khadka
Corrected. I did proof read three times, but it slipped off hehe, I am glad it was 1 mistake out of 1500 words.
I too battle with point number 40. To me its a case of my preference for shorter pages versus my perception that the search engines would prefer more content within articles. Ive chosen the route of shorter pages, and breaking up the content into more niche article titles.
You laid out the web design tips perfectly but the problem is that most people will never apply what they have just read. If one followed the suggestion you gave here, they would make a great site. I guess people need to implement what they have learned here and not just read and move on.
I agree with you in point #41 because i think horizontal scrolling will closed a part of text in the main post