Design

The 10 Most Common Mistakes Web Designers Make

August 3rd, 2009

There are plenty of mistakes web designers (especially new ones) make when designing websites. Everything from poor design to simple oversight happen every day. But with a little diligence, they can easily be avoided.

Below are ten of the most common mistakes web designers make, along with examples of sites who do things right. Some of these are easy to correct if you’re aware of, others might take a bit more time. But all are fixable and worth the time and effort to correct. While this is by no means a comprehensive list of common errors, it is a good starting point.

1. Busy, crowded pages.

“White space” or “negative space”, space that is empty of elements other than your background design, is an incredibly important design element. It’s an important design element that affects how your visitors perceive the importance of different elements. Sufficient white space should be used between your columns, different page elements, and even between individual characters, lines, and paragraphs. Consider both the “macro” white space, the negative space around columns, page elements, and even the whole design; and micro white space, the negative space between individual lines, paragraphs, and sub-elements.

In addition to white space, don’t try to put too much on a single page. Visitors will likely visit pages looking for something specific. Including only related information and necessary navigation and site-wide elements on each page. It’s better in many cases to have multiple short pages than only a handful of very long ones, espeically if those long ones include a ton of unrelated content.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

2. Hard-to-Find New Content

Unless the sites you’re designing are completely static, somehow showcasing new information and content is vital to good design. Returning visitors are likely going to be interested in what’s changed since they last visited. Generally, this is done automatically on blogs, with posts appearing in descending order based on date. But what about on other types of websites?

There are a few ways to approach this. You can devote an entire section to new content. This could be a page linking to the newest content (say, the ten most recent updates). Or this could be a section within the home page or another page that links to the newest updates. Making this prominent is important, whether it’s directly within the home page or on its own page. The goal is to make it easy for returning visitors to find it.

10 Common Web Design Mistakes to Avoid

3. Hard-to-Find Links

Links are one of the most important parts of a website. Arguably, they could be the most important element. In any case, you need to make sure your links are easy to distinguish from other text elements.

There are two things to keep in mind here. First, make sure your links are distinguished in some way from the rest of your text. This can be done with a different color, an underline, or some other text attribute (anything but blinking text). The second thing to keep in mind is not to make text that isn’t linked look like a link. This means that under no circumstances should any text on your site be underlined if it isn’t a link. It also means that if you use other elements to style your links, don’t apply them to non-linked text.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

4. Incorrect Image Formats

Using the correct image format for the different images on your site is vital. Using the wrong image file format can either make your image files larger than they need to be or effect the quality of the final image. The three image formats to concern yourself with for online graphics are JPEG, GIF, and PNG.

JPEG format is great for photos or images with a lot of different colors and shades because it’s capable of 24 bit color. The downside to using JPEG is that it uses lossy compression. In other words, the smaller you make the file size, the more quality loss you get. Using lower compression minimizes this but it can still be an issue, especially in larger images or images where the original was very sharp. You can’t use transparency in JPEGs either.

GIF format is great for images that use a limited color palette. GIF is only capable of 8 bit color (256 colors total). That means it’s not appropriate for photographs or most gradient images. GIF uses lossless compression, though, which means if you have an image that uses only a limited color palette it can result in really small file sizes with no quality loss. GIF is also capable of transparency for a single color within the palette.

PNG format is suitable for photos and other graphics. PNG images are capable of alpha transparency (in browsers that support it), which gives them an advantage of GIFs. They also use lossless compression, which gives them an advantage over JPEGs. And they’re capable of 8 or 24 bit color, so are suitable for images that previously would have been saved as GIFs or JPEGs. PNG images aren’t quite as good at JPEGs for photos, but are considerably better than GIFs.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

5. Leaving the Default Page Title

The default page title in Dreamweaver is “Untitled Document”. If you search for it in Google, you’ll come up with almost 30 million results. There’s really no excuse for this. It’s literally a two-second fix. Make sure before you upload that you’ve changed the default page title to something other than the default.

Really, though, you should take it a step beyond that. Many CMSs use the website or blog name as the default page title for every page within the site. Some will add on the title of the particular page, but some don’t. You should make sure that not only is the page title for each page unique, but that the specific page title shows up before the site title. It’s a big help with SEO, both in terms of showing up higher in results and in having those results look more relevant to potential visitors.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

6. Hard-to-Use or Hard-to-Find Navigation

Navigation should be immediatley apparent to visitors, both in terms of locating it and using it. There was a trend in web design for awhile to hide navigation, to integrate it seamlessly into an image or other content on the home page. And while artistically this is interesting, functionally it’s very user-unfriendly.

Even using things like drop down menus for navigation can make your pages less user-friendly. You want users to be able to find exactly what they’re looking for with the least amount of effort. Always keep that in mind when you’re designing.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

7. Fixed Font Size

This is a very important one. Make sure users can resize the fonts on your pages based on their own preferences. This is done using EM sizing for fonts rather than pixel-based sizes. Again, it’s a relatively simple thing to implement but greatly improves the usability and accessibility of your site.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

8. An Unclear Site Purpose

Visitors should immediately know what a site is about, no matter what page they land on. This can be done through the use of tag lines or similar indications, through page titles, or through headings on individual pages. However you choose to do it, make sure that it’s apparent within the first few seconds after a visitor lands on a given page.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

9. Using Harsh Colors

Harsh colors, and especially the use of harsh contrasting colors, can quickly make your sites a chore to view. You don’t want to do anything that makes a visitor want to leave your site. Eye strain is one thing that will get most visitors to leave post haste. Your site should showcase your content and avoid anything that detracts from the goal of the site.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

10. Advertising Blended Into Content

Advertising should be set apart from the content of your site. With banner ads this is relatively easy; most Internet users know what a banner ad looks like. It’s a bit trickier with text links, though. Labeling your advertising for what it is make sense to your visitors and sets your site up to be considered more trustworthy. This is especially important with in-text advertising, where hovering over a linke will bring up a modal window with an ad. Make sure these links are differentiated from your normal links.

10 Common Web Design Mistakes to Avoid

10 Common Web Design Mistakes to Avoid

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

86 comments for „The 10 Most Common Mistakes Web Designers Make
  1. Waisybabu on August 3rd, 2009 at 3:37 pm

    That was a very well written and informative article. I hope my WordPress-based http://artsyhands.com/ site lives up to everyone’s expectations! (And I instinctively did not make those mistakes most people do)

  2. Jasmin Halki? on August 3rd, 2009 at 3:57 pm

    Very useful. Thanks!

  3. Sumesh on August 3rd, 2009 at 5:13 pm

    Useful points, I’ll be sure to bookmark this when I start new designs in future – particularly blogs.

    I hope you remedy the irony here, Noura. Noupe’s own design has an ugly sandwich of header, ads, content title, Google AdSense and then the actual content.

    • Kevin Quillen on August 4th, 2009 at 11:09 pm

      It says SPONSORS and Ads by Google. How are they blending in?

  4. Web Overhauls on August 3rd, 2009 at 5:27 pm

    I think #5 (leaving default page titles) and #8 (unclear site purpose) are the worst! These are both basic and crucial pieces of content; and great for SEO as well as for the user.

    Also, not seeing Sumesh’s “irony” point in the previous comment. I think the Noupe site looks pretty nice and I don’t see any Google ads. Am I missing something?

    • Web Overhauls on August 3rd, 2009 at 5:36 pm

      My bad. The FF add-on “Adblock Plus” was working so well that I didn’t even realize…yea, remove some ads…

      • Cory on August 5th, 2009 at 7:51 am

        lol. I was looking at your first comment and wondering if we were looking at the same site.

  5. jazcat on August 3rd, 2009 at 6:28 pm

    How about sounds. I find web sites with sounds for everthing, especially for pressing buttons or even hovering over menus to be extraordinarily annoying. I recall a local artist who had a little popup video of herself on her web site. Cute except she popped up on EVERY PAGE of her web site.

    I can deal with music that you can mute but sometimes there you have to mute on each page. I say, use music or audio sparingly.

  6. Chris on August 3rd, 2009 at 6:51 pm

    I concur with all of these points but think there is one that is missing. I find spelling is something which is almost always overlooked, and one which can make an immediate difference to a site. Unfortunately this was placed foremost in my mind when reading the second sentence of this post – oversight being spelled incorrectly. Otherwise, a very good article :)

  7. Jannik on August 3rd, 2009 at 7:15 pm

    Hey there. Just a heads up about your RSS feed – it seems to mess up the images referenced in your posts, at least in Google Reader :-(

  8. Vivek Buwa on August 3rd, 2009 at 7:45 pm

    Hi Cameron,
    Thanks for such a nice article. I agree with all the points you have mentioned here. You have put all this in nice flowing language. Some of the other common mistakes, web designers make, I think are, Using too much animation (This includes overuse of flash) and use of mailto links which end up opening default email client (Not configured Outlook Express in most of the cases).
    Anyways, Congrats again for nice article. Keep Writing :)

  9. Adam on August 3rd, 2009 at 8:05 pm

    Hahahaha @ #10, a bit hypocritical w/ the Google Ads matching your theme DIRECTLY below that point, don’t you think?

  10. joyoge designers' bookmark on August 3rd, 2009 at 8:07 pm

    great article, thanks for points..

  11. Jack Corbett on August 3rd, 2009 at 8:17 pm

    Are the images examples of good web design decisions or bad?

    • vectorbug on August 3rd, 2009 at 8:25 pm

      I am left wondering the same thing. The intro states both are exampled but none of the images are captioned. I guess we’re left to make our own conclusions.

    • Illusiv on August 6th, 2009 at 3:48 pm

      Yes, I think the image examples are the good ones.

  12. Bryan on August 3rd, 2009 at 8:19 pm

    Good list overall, especially for beginners.

    Concerning #7 though, there is a small debate over whether em vs px is still the preferred choice. The arguments hinge on the fact that modern browsers now default to page zooming rather than text scaling.

    Cameron Moll has written about it here: http://www.cameronmoll.com/archives/2009/06/coding_like_its_1999/

  13. Jason Hale on August 3rd, 2009 at 9:04 pm

    Great list but point #7 is no longer really valid. As all modern browsers now use zooming instead of text resizing px sizes work great for resizing.

    • sven on August 8th, 2009 at 12:37 am

      thats exactly how i see it as well.

    • Derek Bender on August 9th, 2009 at 11:22 pm

      True. If your crowd is using IE6 then use EM, but every other browser will either increase the font size (ignoring the px set) or scale up the entire page

  14. kramer on August 3rd, 2009 at 9:06 pm

    Isn’t #7 obsolete with the current browsers? All current browsers including IE7+ use browser zooming instead of the old text zoom so even pixel font sizes zoom with the content.

  15. Niki Bivona on August 3rd, 2009 at 9:22 pm

    Excellent post Cameron!

    I think the overuse of Flash is another mistake. It is a great tool in moderation. But some sites (especially agency sites it seems) use so much Flash, the site becomes confusing and essentially useless.

  16. Noupe on August 3rd, 2009 at 10:00 pm

    I expected many of your comments guys, so much sarcasm over here :)

    Our new design is coming soon and i will make sure the ten points mentioned here will be taken care of.

    Thanks Cameron for writing useful content here at Noupe :)

  17. Steven on August 3rd, 2009 at 10:01 pm

    @Jason Hale and @ Kramer

    No. Common web design mistakes include assuming all your readers / users have the latest browser.

  18. dude on August 3rd, 2009 at 10:06 pm

    #7 is bull, rest is nice :)

  19. Tom - New Evolution Designs on August 3rd, 2009 at 10:26 pm

    Good post, I have seen lots of “Top 10 Web Design Mistakes”, but you made some unique/up-to-date points.

  20. Kyle on August 3rd, 2009 at 10:55 pm

    The debate is still out for fixed font sizes vs em-based (#7). One of the issues is page zoom versus text enlarging. I believe modern browsers are able to do both, but default now to zooming, which gives cause to use fixed font-sizes.

    But there are some development benefits in using ems, such as resizing all text elements that fall within a certain container by the same amount (e.g. if you want all the text in a side bar to be based on 12px instead of 14px, etc).

    • Morgan on August 6th, 2009 at 4:57 pm

      Agree. Back in the days of IE6 domination, em-based fonts were essential. But now? I see no point, but in some situation like Kyle said.

  21. Nils on August 3rd, 2009 at 11:48 pm

    Here is another one, posting mistakes and using screenshots of websites that work. By just flying over your sub titles and the screenshots you automaticaly associate those websites with the mistakes you mention, although some do a great job. So maybe it helps to be a little bit clearer in the future.

    By the way the “Fixed Font Size” issue will solve itself with the zooming abilitys of the new browser generations. So fixed or not fixed wont matter that much in the future.

    However i really enjoyed this article!

  22. Bob D on August 3rd, 2009 at 11:57 pm

    Mistake 11: Putting up a database-driven website that doesn’t work properly. It took me five tries to before I could finally connect to your server. The other four times, I received an error message: “Error establishing a database connection”. Nice.

  23. Csi Dedektiflik on August 4th, 2009 at 2:49 am

    te?ekkürler

  24. Csi Dedektiflik on August 4th, 2009 at 2:49 am

    Very useful. Thanks!

  25. Andi on August 4th, 2009 at 3:33 am

    Oooh stop that “you should use em instead of px” crap please. All modern browsers zoom the whole page. You can code with fixed sizes in fonts, images, divs, whatever. No need to use em’s and dozends of hacks and workarounds to get it all in shape.

    • Steven on September 4th, 2009 at 8:47 am

      It’s really more a question of your audience. Someone trying to target users with older browsers will still run into the text zoom problem, and given that older browsers and older users (with their older eyesight) tend to correlate, it’s an issue. Like you said, though, for most folks it’s not a problem.

  26. Thiago Menezes on August 4th, 2009 at 4:02 am

    Perfect. I hope the images shown are examples of good practice, because they really seem so to me.

  27. art176 on August 4th, 2009 at 4:04 am

    The first piece of advice about page layout I ever received was “don’t be afraid of the whites”

    If I am a customer and want to advertise, maybe that #10 won’t be good for me, what you say?

  28. pyemachine on August 4th, 2009 at 5:32 am

    nice little refresher course on mistakes you can make.

  29. derp on August 4th, 2009 at 5:35 am

    the title “most 10 common mistakes” is a mistake.
    you can’t have something more “10” than something else.

  30. Ben on August 4th, 2009 at 8:01 am

    what do you mean?
    web designers never make mistakes ;)

  31. Greg on August 4th, 2009 at 9:25 am

    I personally see #4 as the biggest problem on the web today. I don’t personally use GIF since PNG of the same image is typically smaller anyway.

    Here is a few more though(optimization wise):

    11: Use of far too many external CSS/JS. Dramatically lowers page init rate without any true benefit (comments work folks)

    12: Using CSS background images when a html/xhtml img tag would suffice. Again a huge init hit.

    As far as #7 goes, I believe anyone who is in need of text resizing, has access to a newer browser. While you can in fact switch over with little to no cost design wise, I don’t see it as a crucial step anymore. The argument that says we “can’t forget older browsers” doesn’t apply here either.

    Also going to agree with your lack of information regarding images. Some appear to be bad examples, some great. However since design is often a matter of opinion it’s best that you left the comments out anyway :)

  32. website design on August 4th, 2009 at 1:33 pm

    Great insight. I think we all have made 1 or 2 of them over time.

  33. david miron (soluto) on August 4th, 2009 at 1:41 pm

    I assume the screenshots you provided are supposed to show how things should be done rather than how they shouldn’t. If that is the case, I would expect to see examples of pages where these common mistakes have been made.

    • Amit Kaushal on August 5th, 2009 at 7:04 pm

      That is the exact case with me, i guess you made a mistake (hope i am not being rude). The screenshots should have been related to the title, by telling us visually what not to do. Right now its hard to differentiate. Please do mention some sites, those have made these mistakes.

  34. pow on August 4th, 2009 at 2:45 pm

    nice post, but one question. Screenshots are good examples or bad? Need more explanation about each, because now it looks more like the advertisements. :)

  35. DDC on August 4th, 2009 at 4:23 pm

    good material. i like what you wrote.

  36. Daimon on August 4th, 2009 at 6:33 pm

    Thanks for the http://www.modalinc.com mention for good use of whitespace. We are in great company with many other well executed designs. Thanks again!

  37. Chris on August 4th, 2009 at 10:21 pm

    A lot of these points, especially #5, just scream sloppy. Certainly not the message a business wants to give.

  38. Andy on August 4th, 2009 at 10:53 pm

    Using the article title as the alt text for every image in that article? Maybe that’s number 11… ;)

    Otherwise, not bad :)

  39. Alexander Bickov on August 4th, 2009 at 11:33 pm

    Nice post. Thanks for lesson :)

  40. Daniel Wilson on August 4th, 2009 at 11:41 pm

    “Most 10 Common”.

    Is grammar-checking included? :-)

  41. VectorsOnFire on August 5th, 2009 at 12:14 am

    That’s a very true list. #1 mistake is rightly placed in the first spot, because “busy pages” are really the biggest mistake in usable web design.

  42. Steve Ottenad on August 5th, 2009 at 1:10 am

    Thanks for the list, I particularly like number one and number four. I think too many people cannot grasp the concept of negative space. CSS line-height and letter-spacing also help a lot when trying to dial in the amount of ‘density’ on your page.

  43. RJC on August 5th, 2009 at 2:11 am

    Nice tips as it is a constant reminder that we should follow guidelines. It is nice to see the industry whip itself into shape with some standard practices particularly from print.

    I can only hope more browsers become more compliant so we are able to code/design with more consistency.

  44. Lorenzo on August 5th, 2009 at 5:47 am

    Thank you! Your post is versy interesting! I wish to became a professional blogger but I think I’m a very little blogger! :) Good life!

  45. xtfer on August 5th, 2009 at 7:24 am

    #11 Not proofreading their copy.

    Great article, but perhaps it should be called “The 10 Most Common Mistakes Web Designers Make”.

    =)

  46. Cory on August 5th, 2009 at 8:03 am

    I have to disagree with #10. If you want to increase your ROI on ads, pushing them into a corner with a bright, flashy sign that says “Advertisements” probably isn’t the best idea.

    However, I do realize some programs require a clear separation between ads and your content.

    That being said, I don’t see integrating ads into your content as a “mistake”. In my opinion it’s a mistake not to.

  47. Flo on August 5th, 2009 at 9:58 am

    Hey ya nice tips,

    however I would like to point out that this is not necessarily all true for everyone. I have been extensively studying web design for the Chinese market over the last few months and certainly some of the design conventions (like #1 or #9 for example) do no apply when designing for a Chinese audience. This has to do with culture largely, we as Westerners do not value (and are less capable of digesting) a large amount of information on a page, but Chinese on the other hand are much more comfortable with high information density and are actually fond of visual stimulation that we as Westerners would find overbearing. I will try and do a response post to yours on my blog http://www.thechinaproject.co.nz in the following weeks, you may get some good ideas from that.

    Cheers

  48. bala on August 5th, 2009 at 11:20 am

    cool! THANKS.

  49. Jamie Allsop on August 5th, 2009 at 2:44 pm

    These are some really useful tips. I agree with #6, it is important to make your navigation clear so it is user friendly, having navigation that is hard to find may result in people leaving your site. Another good point to add to the list would be to check the spelling and grammar on your website, I have seen so many websites where words are spelt incorrectly and sentences don’t make sense.

  50. www.webme1.com on August 5th, 2009 at 2:54 pm

    Some interesting points. To err is human. Sometimes it is good to run through a list of do’s and don’ts such as this one, with an objective eye and ask ourselves which ones we are doing or not doing.

    Thank you.

  51. Danny on August 5th, 2009 at 8:20 pm

    Are the example images supposed to be good examples or bad examples?

  52. Mike on August 5th, 2009 at 11:33 pm

    Interesting; the examples are a little confusing as to what you’re trying to illustrate.

  53. Robert Rawlins on August 5th, 2009 at 11:54 pm

    I love these do’s and dont’s type article, always great to test your own metal against them.

    Thanks!

    Rob

  54. Steph on August 6th, 2009 at 5:43 am

    Nice article, but I think it would have been better if you showed bad designs next to bad so you can really see the differences.

  55. Steph on August 6th, 2009 at 5:48 am

    Oops. *Bad designs next to good*

  56. Janelle Meraz Hooper on August 6th, 2009 at 8:15 am

    Thanks! I learn a lot from you guys!
    I wish someone would mention to you younger designers to remember that not all of us are as young as you are. Not all of us have perfect vision. Not all of us are enamored with a solid black blackground. And I don’t care if fonts are adjustible, I hate a font that couldn’t intimidate a flea.

    Thanks again,
    Janelle Meraz Hooper, author

  57. Krftd on August 7th, 2009 at 4:24 am

    This is a pretty good checklist to go through before we publish any site :)

  58. Chris on August 7th, 2009 at 5:36 am

    Well done. Its good to be reminded every once and a while about these things.

  59. jack on August 7th, 2009 at 12:29 pm

    Nice topic but your examples are very difficult to parse through. Good job but please get better.

  60. Dev Prakash on August 7th, 2009 at 8:13 pm

    This is very use full tips for all designer

    Thanks

  61. Kaplang on August 8th, 2009 at 12:24 am

    really useful, thanks :)

  62. eDreamer on August 10th, 2009 at 10:26 pm

    Very useful. Thanks!

  63. Steve Spatucci on August 11th, 2009 at 8:34 pm

    That was great – lots of common sense, but sometimes we all need to be reminded of that stuff. Nice examples for each mistake, too.

  64. Kate Payton on August 17th, 2009 at 12:24 pm

    Very nice article, thank you for sharing :)

  65. jatropha on August 18th, 2009 at 12:47 pm

    The first piece of advice about page layout I ever received was “don’t be afraid of the whites”

  66. Driveways on August 20th, 2009 at 11:18 pm

    well written and very useful

  67. Wordpress Arena on August 28th, 2009 at 8:32 pm

    :)
    not only well written…there were mistakes in my blog and I have correct them after reading this post…thank you

  68. Shovan on September 3rd, 2009 at 6:08 pm

    Thanks for the useful info, Want to read an article on EM font size

  69. Best Web Designing Contest on February 2nd, 2010 at 8:07 am

    If every web designer keep this points in mind and design there sites then they will be on the top of mount Everest. I would design my site carefully by keeping this in mind and then post my design in a contest running by grafikguru.com

  70. Rana on March 12th, 2010 at 11:46 am

    Thanks for a nice article,
    I learned a lot from you.

    Please do mention some sites, those have made these mistakes.

  71. Yofie Setiawan on April 29th, 2010 at 11:39 pm

    Thank God, most of them already fit with me…

  72. Ted Thompson on April 30th, 2010 at 5:03 am

    Great article. Can’t say that I’m perfect, probably guilty of a few of these sins myself! Thanks for sharing.

  73. @trudesign on May 5th, 2010 at 11:10 am

    Great post! Thanks!

  74. James-MobileWebsite on December 9th, 2010 at 7:28 am

    Hey,great channel and information you have here, keep it coming, best of luck- James

  75. Jeff on March 9th, 2011 at 1:35 am

    Just what I needed. Thank you!

  76. Sumit Khaneja on April 6th, 2011 at 12:57 pm

    A very well written & useful article. You have put all this in nice way. Thanks for sharing.