Kissmetrics Blog

A blog about analytics, marketing and testing

Built to optimize growth. Track, analyze and engage to get more customers.

7 Deadly Web Design Sins You Might Be Making

Web design is a tricky subject.

People have different opinions about what constitutes good web design and what doesn’t.

Some people think your site needs to be super sleek with an up-to-date, modern design in order to get attention. Others believe that web design doesn’t really matter all that much and you just need a site that works and lets people do what they want, like Craigslist.

Both answers are right depending on which industry or business you’re talking about. But, how do you figure out what’s right for you? And, how can you make sure you’re web designer knows what they’re talking about and won’t make mistakes?

This post presents seven deadly web design sins you don’t want to make on your site. The good news is that they’re all simple principles every website should follow. So, whether you get a slick design or not, you still need to know about these design principles and how they apply to your site.

Also, you can use these principles to make sure your web designer knows what they’re doing. Just because someone is a good designer doesn’t mean they know how to design for the web. And, just because someone designs websites doesn’t mean they know how to design a site that will convert. Pay close attention to the principles presented in this post, and use them if necessary to make sure your designer designs a site that’s optimized to get the results you need.

Mistake #1: Fonts That Are Too Small

The first mistake people make is creating a site with fonts that are too small.

The reason for this is that, back in the day, most websites had small fonts. The standard was somewhere around 12 px, and nearly everyone followed that standard.

But, over time, people started to realize that 12 px fonts are hard to read online. When a screen is 24 inches from someone’s face, small fonts make it difficult to read.

People also started to realize that you have only a limited amount of time to get visitors’ attention and let them know they’re in the right place. One study even states that the average attention span in 2013 was 8 seconds, one second less than the average attention span of a goldfish. The same study also states that people read only 28% of the words on an average web page.

1 goldfish shot

A 2013 study found the average attention span of people is 8 seconds, one second less than that of a goldfish. Is that even possible? Flickr: photographer23, Creative Commons license

In order to get people’s attention right away, you need to do the following:

  1. Compose great headlines that grab readers’ attention.
  2. Write interesting content that will get them to read more than 28% of what you’ve written
  3. Use headline fonts that are big enough to demand attention
  4. Make sure body fonts are large enough to read so readers don’t give up because they’re tired of squinting.

For all the reasons mentioned above, font sizes have increased over the last few years to the point that many view 14 px as the very minimum font size, and many sites go even bigger with 18 px as a minimum, especially when a lot of reading is involved.

Here are some examples of exceptional web design with great font sizes:

Kissmetrics

  • Headline: 35 px
  • Footer: 15 px

2 kissmetrics home page

Vero

  • Headline: 41 px
  • Body: 18 px

3 email platform talk to users

Help Scout Blog

    Intro text: 26 px

    Body: 19 px

4 getting people to sign up

The point to keep in mind is that the purpose of writing copy is to get it read. When you pay a writer good money or painstakingly write website copy yourself, you want to make sure it gets read and doesn’t get hidden by a small font that makes the copy difficult to read.

You also need to remember that not all fonts are the same size. A 16 px Arial font can be smaller than a 16 px version of another font. This is something you need to be aware of when choosing a font size, so you don’t arbitrarily pick 19 px because another site did, only to find out your 19 px version isn’t as big.

Keep in mind that footer fonts can be on the smaller side and so can subtext, but if you’ve written something you want people to read, consider using a 16 px font at a minimum. And, in case you don’t want to take my word for it, Smashing Magazine preaches the same thing in this article: 16 Pixels for Body Copy. Anything Less Is a Costly Mistake.

Pro Tip: In order to get a feel for the size font you’d like to use, based on websites you like, download the WhatFont extension for Google Chrome. It’s a Chrome plugin that makes it really easy to click on fonts in order to find out what font type and size a website is using.

5 whatfont

Mistake #2: Moving Sliders

I still don’t understand why so many websites use moving sliders.

Are they effective? Do they convert? Are they the best way to present your information to customers?

In most cases, they are not.

Peep Laja wrote an article for ConversionXL titled Don’t Use Automatic Image Carousels or Sliders, Ignore the Fad. In the article he quotes Chris Goward of WiderFunnel and Tim Ash of SiteTuners as saying the following:

We have tested rotating offers many times and have found it to be a poor way of presenting home page content.

-Chris Goward

And…

Rotating banners are absolutely evil and should be removed immediately.

-Tim Ash

Laja also mentions two studies where rotating sliders were proven to be ineffective:

The first was by usability guru Jakob Nielsen. He asked a visitor if Siemens had any special offers for washing machines on their site. In fact, they did have an offer in 98-point font that said customers could get cash back on a new appliance. Unfortunately, the user didn’t see the offer because it was cloaked in a moving slider and ended up being completely missed.

6 siemens washer machine

This points to a theory among conversion experts that sliders cause banner blindness similar to ads in a sidebar. People are used to lame ads in a sidebar, so they have a tendency to ignore them. This principle seems to apply to rotating sliders as well.

The second study was from the University of Notre Dame. They found that only around 1% of visitors clicked on the slider, with 84% of the clicks on the item in the first position.

7 edu click through rate

What’s the point of having a website slider if only 1% of people click on the item that is taking up your most valuable homepage real estate, especially when 84% of those clicks are on the first item anyway? Why annoy people with something moving that’s difficult to keep track of? Why not give them a single option to choose from since the majority click the first item anyway?

So, why do so many people use sliders since they appear to be so ineffective?

The best theory I can come up with is that it seems like a cool and high-tech feature, and it’s easy for web developers to implement. Based on those two factors, business owners say, “Hey, I want one of those fancy moving slider things,” and web designers comply because they look “cool” and aren’t that hard to do.

But website owners need to consider whether they’ll be effective and whether they’re the best way to convey information on their site, something Peep Laja, Chris Goward, Tim Ash, and many other smart internet marketing folks no longer believe is the case.

To solve this problem, start by asking yourself what is the best way to present your information instead of picking a site you like and copying their design, including the cool-looking slider they use on the homepage.

I used this approach with a friend of mine a few years ago for a website he was building for his tutoring company – Genesis Tutoring.

He and his business partner approached me and said, “Hey we want to build a website…and we want to have a slider on the homepage that has this information,” and then he showed me a flyer they hand out at schools to advertise their service. The flyer was beautiful, presented the information incredibly well, and, surprise, surprise, didn’t include a slider (those pesky sliders just don’t seem to translate well into the world of printed flyers).

So, I suggested, “Why don’t you just duplicate your brochure that’s already working on your homepage and then put a contact button along with your phone number and email underneath.” We tried that, and here’s how it turned out…

8 where learning begins

The site ended up looking great, avoided the dreaded default slider, and converts well. What’s not to like?

When it comes to building your own site, follow these instructions to get the same results:

  1. Remember not to blindly add a slider just because everyone else is doing it (even if your designer recommends one).
  2. Consider what is the best way to present your information on your homepage instead of just blindly copying what your competitors are doing.
  3. Choose a single important offer to list in the A-Space on your homepage and go with that. There will always be other things you want to promote, but you can do that farther down on the page or with a button at the top of the page. Pick one offer, make it prominent, and then get out of the way and let your website go to work.
  4. And to really hammer down the last point: think about the #1 goal you want your website to do. Focus on that and can all the other calls-to-actions.

Again, in case you don’t want to take my word on this, here are some articles you can read that support this point:

Mistake #3: Low Contrast Fonts

Another huge mistake people make is using low contrast fonts.

Low contrast means a lighter font on a light background or a darker font on a dark background. I’m not sure if this is something that looks ok in print design, but it’s never a good idea on the web.

You always want to make sure your website content is as easy to read as possible. The Smashing Magazine article referenced above told us that the amount of light that gets through our eyes at age 40 is only half the amount of light that gets through our eyes at age 20. This drops to 20% by age 60. On top of that, nearly 9% of Americans are visually impaired.

With these stats in mind, do you really want to make it harder for visitors to read your content, especially after you’ve paid so much and worked so hard to get them to your site in the first place?

9 bad text example

Low contrast for fonts is always a bad idea.

You can solve this by always using high contrast fonts. If the background is dark, the font should be light, and if the background is light, the font should be dark.

Actually, I’ll take this even one step further. Rarely are there times when you need to use any font colors besides black or white. Sometimes designers choose a lighter gray font on a white background or a light blue font on a dark blue background.

Why? Is that really easier to read, or are you just trying to add “visual appeal”? Books use black fonts on a white background for a reason – it’s easy to read. Websites would do well to follow this example.

Here are some samples of great font contrast:

Help Scout Blog

10 onboarding mistakes

Evernote

11 evernote home page

This is an example of good contrast on an image, which is not easy to do.

Harry’s

12 harrys feature products

The lesson to remember is that fonts should always have a high contrast with the background behind them. If you find the text difficult to read and feel like there should be more contrast, don’t hesitate to call your designer and let them know. Your website isn’t a design showcase. It’s a place to make sales and increase conversions.

Bonus Tip: Not only is high contrast important, but you also want to use reverse type sparingly. (Reverse type is white text on a black (or color) background instead of black text on a white background.)

In fact, David Ogilvy, one of the greatest ad men of all time, said ads should never be set in reverse type. Colin Wheildon, editor of the largest Australian motoring publication, set out to test this theory. His findings were astounding.

According to the study, below is a list of the comprehension level for different colors and backgrounds:

  • Black text on white: 70% good, 19% fair, 11% poor
  • White text on black: 0% good, 12% fair, 88% poor
  • White text on purple: 2% good, 16% fair, 82% poor
  • White text on royal blue: 0% good, 4% fair, 96% poor

Isn’t that incredible? The results from black text on a white background compared with white text on a color background are nearly the exact opposite!

The takeaways are:

  • Always remember to use high contrast fonts, but also…
  • Use reverse type sparingly.

Sometimes reverse type looks good, but it can have a drastic impact on readability and retention. As such, you should use it only for parts of your site that don’t require as much reading and aren’t as important. Overall, you’d be smart to think twice before using reverse type.

13 hubspot grow

This reverse type looks “cool” on HubSpot’s homepage, but it may not be the best for readability and comprehension, especially in the most important space on the entire site.

Mistake #4: Poor Line Height for Text

Line height for text is something that often gets overlooked. A lot of web designers and developers choose a font, pick a size, arbitrarily select a line height, and then call it a day.

But line height has a surprisingly significant impact on a site’s overall design and appeal. Choosing the wrong line height can leave fonts looking crowded. It can ruin your entire design.

The good news is that talented web designers have a good eye for this and will automatically select a good height for you. The bad news is that the average web developer doesn’t have an eye for this design and will often pick the wrong line height.

Chris Pearson of DIYThemes felt so strongly about this that he built a line height calculator configured to something known as the golden ratio. Here’s Google’s definition of the golden ratio:

14 golden ratio

A more simple definition is that the golden ratio is a proportion that’s believed to be aesthetically pleasing. Without boring you with more detail, Chris Pearson used this ratio to build a calculator that combines font size and content width to come up with the ideal line height. The good news is that the calculator makes this super easy to do. You simply plug in your font size and content width, and the calculator will tell you what your line height should be.

15 golden ratio typography calculator

You may not have realized it, but there’s a reason some designs and font combinations are more pleasing than others. Great designers know how to achieve the golden ratio on their own, but Chris Pearson’s calculator makes it easy for everyone else to do the same.

Mistake #5: Line Length That’s Too Long

Another mistake you can make is creating lines of text that are too long.

So, what’s the optimum line length?

The Baymard Institute published an article that says 50 to 60 characters per line is best, with up to 75 characters being acceptable.

The reason line length is so important is because long lines of text are intimidating to read online. If the line length is too long, some people will not begin reading because it doesn’t look like a very good reading experience.

On the other hand, if line length is too short, readers have to start and stop lines frequently, which becomes annoying.

This problem is compounded by the popularity of responsive design. If you don’t set a maximum width for content section, you have no way of knowing how long the line length will be for your blog or any other piece of text since screen sizes vary so much.

At the time the referenced article was written, The Baymard Institute dealt with this problem by setting a maximum width for their text of 516 pixels which leaves an average of 65 characters per line at a font size of 18 px. This creates a great reading experience, as you can see in the image below.

16 readability

Once again, this is a design detail that not all designers are going to pay attention to, but now that you know long lines of text are intimidating to read, you can direct your designer and developer to make sure you deliver an optimal experience for readers.

Mistake #6: No Accent Color for Calls to Action

The next web design sin is not using an accent color. Here’s what I mean:

Smart internet marketers know that you need a good accent color to draw attention to key calls to action. If you’re asking someone to “Buy Now” or “Start a Free Trial,” you want to make sure you use a button color that will draw people’s attention so they’ll click and take the action you want them to take.

This seems simple enough, but I’ve seen multiple occasions where designers didn’t reserve an accent color for the most important calls to action. Instead, they chose a color that’s already used on the site for something else. That’s not a good idea.

Here are some rules of thumb to follow for accent colors:

  1. It needs to be bright enough to draw attention to whatever you’re attempting to draw attention to.
  2. It needs to be complementary with the other colors on your website so that it doesn’t clash.
  3. It needs to stand out from whatever background it’s on. This means that a blue button on a blue background probably isn’t a good idea.
  4. It needs to be reserved for key calls to action so it doesn’t blend in by getting overused on the site.

In the example below, you’ll notice that the CTA button is bright orange. This helps it stand out from the white background. Also, orange is not used anywhere else in the design (except for a splash in the logo which is small enough that it doesn’t compete for attention). You can check out the full page here if you’d like.

17 ispy

Mistake #7: Common Design Principle Violations

The final deadly mistake is not following common design principles, which is something that Steve Krug talks about in his book Don’t Make Me Think.

The point he makes is that website visitors are used to being able to find certain features in certain places. For example, they’re used to finding logos and taglines in the top left of a page, and menus in the top right. They’re also used to being able to find an About page and a Contact page if they want to learn more about the organization or get in touch.

This means it’s a good idea to include those features on your site and that you should think twice before breaking common design principles. This may be something you think is obvious, but it’s not always.

Some website owners, for example, decide to be super creative and come up with a different way to display the menu. Instead of being at the top where it’s normally found, it’s included in the branches of a tree that’s built into the background design (or some other creative way to include a menu other than the standard way).

Sometimes these crazy new approaches work, but often they don’t. In most cases, it is much better to follow common design principles (so you don’t confuse visitors) than it is to come up with a crazy new layout that may be creative but not intuitive.

Conclusion

Hopefully, you’ve learned a lot by reading about these seven deadly web design sins. Most of them seem to be common sense, but they all get broken more frequently than you would think.

Remember, if you’re going to do any design changes at all, make sure you test your changes to see how they affect your bottom line! (hint: use KISSmetrics for this.)

Now that you’re aware of these principles, pay attention to the websites you come across and see how many follow these rules. I’m confident you’ll start to realize how important these rules are, which will reinforce why they are important to follow.

Over to you: Did I miss any deadly web design sins you frequently see committed online? Leave a comment to add to this list.

About the Author: Joe Putnam (@josephputnam) is a Growth Manager for iSpionage, a PPC competitive intelligence tool that makes it easier for smart advertisers (and agencies) to set up profitable campaigns faster. Sign up today for a free iSpy competitor alert to get automatic updates about new PPC keywords, ad copy, and SEO terms for the website of your choice.

  1. Michael Houghton Nov 19, 2014 at 10:46 am

    But doesn’t the colour contrast study you point to concern paper, not the display?

    I’m almost certain that repeating that study with illuminated displays has a quite different result.

    • Yes, it is for print. I’d love to see a study done for digital, but I’d be shocked if the results aren’t at least close to similar. Start paying attention to reverse-type text when you read it online. I’ve personally noticed that comprehension is more difficult. Maybe it’s not quite as bad, but I believe it has an impact and is something designers/marketers should be careful about overusing.

      • Michael Houghton Nov 23, 2014 at 11:16 am

        Take a look at the colour schemes available for coders in editors like SublimeText and TextMate. Lots of inverted and low-contrast options.

        Personally, I prefer a light background, but I know of coders who say “I don’t know how you can read that”. Mind you, their eyes are 15-20 years younger than mine. Display brightness is such these days that developers are deliberately choosing low-contrast palettes in their text editors, and those are people who work with a lot of text.

        Illuminated displays are different to print. Contrast still matters, but dark-on-light is not the only way to achieve that (whereas in print it’s very hard to achieve contrast with light on dark).

  2. There are more. One is graphic images that are the size of postage stamps.

  3. hello! Great post. What do you recommend to a fashion brand home banner. What kind of message must be if we sell shoes products with different styles?

    • I’m not sure. The first thing I’d do is study other fashion sites to see if anyone is doing this really well already. Next, I’d come up with something that matches the goals I have for the space by starting with this question: “What’s the best way to use this space to share what our visitors will be looking for?” This might be one big image that has your sale information with smaller images as links to different categories of shoes. It’s really hard to say without seeing your site, but this is the approach I’d personally take.

  4. Matthew Bushery Nov 20, 2014 at 8:07 am

    Great post, Joe. From a written content perspective, the one “sin” that resonated with me most was line length that’s too short or long. Developing a quality UX doesn’t mean solely focusing on image-based elements and spacing each page section accordingly. It also means ensuring the copy you publish on each and every page is easily readable/scannable and allows for quick and easy content consumption.

    • I totally agree. While doing research, I found a popular blog (Marketo) that has line lengths that are so long it makes the content difficult to read. Some people realize this is a problem, but others don’t which is why you can still find sites that have line lengths (or heights) that are too long.

  5. Pamela Lappin Nov 21, 2014 at 10:11 am

    Well I’m guilty of using the slider. I’m not using it for offer since I write a blog on vintage style. I like it so I can rotate content rather than only using a drop down menu.

    • I’d have to see it but content may be one instance where a moving slider might be ok. With that said, I personally hate the experience of looking at a piece of content, trying to decide whether I want to click, and then being foiled when it moves to the next piece where I have to start all over again. My personal preference is to make sliders 100% manual with easy to find arrows so you can include more content if you’d like but visitors have complete control over when and if the slider moves.

    • Pamela – I’m with Joe 100% on sliders. I think they look cool, and I can see where designers and developers love them. But if you’re trying to make money, they suck. If you’re trying to get content read, they suck. The company I was with a few years ago did a study on this topic. We found, not surprisingly, that the first panel got all the views, and the other three received almost nothing. Thus, the conversion rates and page visits on those three promotions were also near zilch. So, if you’re an ecom site, ask your merchandise buyer / category manager: “would you want the 2nd, 3rd, or 4th panel?” Nope. And if you’re using them for a “just content” site…just remember, no one is reading those other articles.

  6. I’m glad to see number 1 firmly where it is. Fonts make such a difference, not just the size but the actual text font choice. It’s an easy fix and like Mr. Jobs made it to be – it’s essential.

  7. Many older sites use such a small fonts, I agree they need to be at least 16 px. I also see many designers using a lot of light gray for text. A darker shade of gray is easier on the eyes, The font color in this article is a bit light, but it can be related to the brightness of my computer screen. Another reason that a darker font is better.

    Sliders are an area where it is difficult to convince people that they don’t need them. I like to ask, “When you visit a website, do you sit there and watch all of the slides go by?”

    There are some instances where I think sliders are useful, but, in my opinion, most websites don’t need them or shouldn’t have them.

    Good article, glad I stopped by.

  8. I’d say you are breaking rule #1 in this article.

  9. Joe, thanks for this great article. I’d never heard of WhatFont but I have spent ages trying to identify fonts that I’ve seen and loved. Also, the line height calculator is genius!
    I really appreciate all the help you’re passing on here.

    One thing that I have noticed a lot lately is that website content is often not justified and it irritates me because it looks ragged. Is there a reason for this? I’d love to know because it is a ‘thing’ I’m noticing more and more.

    Thanks Joe

  10. Really great tips! Do you have any thoughts about the placement of things that you want people to pay attention to but aren’t the meat of your product? For example: opt-in forms (we find pop-ups/unders kind of irritating most of the time), a “bookmark this” icon, a plugin or widget, or a special offer? Most new website designs we see coming out in HTML 5 focus on fewer pages, scrolling for more boards of details, and less clutter. We don’t want to overload, but we also want to include things that can help spread the word about our site and develop a relationship with people who use it. Thanks for your input!

  11. SAURABH BAKSHI Dec 03, 2014 at 10:40 pm

    I just completed my training in web design and looking to start my career as a web developer. Your write-ups will really helpful for me and I will sure to keep these tips in mind. Thanks Joe!

  12. Really nice post, there is no doubt that font design is also an important issue in website design. Readability is totally on font design. We have seen many times that people use very light font in light background, people never like it because it is not so much user friendly.

  13. Great & useful tips you share with us in this post. Thanks for sharing this article post with us.

  14. know of coders who say “I don’t know how you can read that”. Mind you, their eyes are 15-20 years younger than mine.The guy might be new to design, he might still be learning, and down-voting his comment without even telling him

  15. Very nice post.! You have highlighted very important points and also well described. Now days many designers are making that mistake during designing and result less traffic or high bounce rate on the website. Font type, size, color, background, visibility of contents & images are very important part of our website. Your post is really helpful to understand the problem of these mistakes.

  16. Thanks for sharing such a great post and also would like to read such post in future also.

  17. Joe Putnam, wow what an article and what a read. Lost of points noted. Thanks for the valuable resources you shared here, especially the line height calculator. I usually suggest to keep 150% line height, though from now onward, I will suggest the line height calculator.

    I am not a designer, professionally I am an optimizer (a recent entrepreneur) and I always examine a design from user’s standpoint. You are absolutely right, font size, font color, Call to Action position and color are big factors for a site’s view and conversions.

    Even in-case of mobile responsive sites the vertical and horizontal distances between links, buttons are the signals of how usable a website is, and these are all the User Experience factors and eventually affect the ranking and dwelling time of a site.

    Regards
    Soumya Roy

  18. I’ll have to pass this to our designers, I totally agree with all statements – I wish I had a better eye for design so I could just do this on every project I run!

    Thanks, I’ll treat this as a small page of our designer bible.

  19. Great tips!!! These tips can save lots of time for us designers which we can use in designing a different website.

  20. It was pleasure to read. Great list of tips! Thank you for sharing.

  21. Nice tips. I am feeling very lucky to get on this helpful article. I will make quick analysis of my site now to check if I am making these mistakes. Thanks for help.

  22. Alex Jennings May 22, 2015 at 6:31 am

    I’ve been writing on my personal blog for a while now. I never thought that font size and contrast affected your website. In the future, I’ll be sure to use a standardized font, with a unique, but readable contrast setting.

    Alex Jennings |

  23. Waw, Great site. I have read your article. really your have shared your natural Idea. I like your article very much. I think it is the best Webdesign site. Everyone can understand everything easily.

  24. Great article, really good tips – I definitely agree about being wary of using sliders, although I do think they can be useful, but for more unessential homepage information – for instance, they are great for displaying a client portfolio but aren’t as effective at showing things like special offers.

  25. Deadly design we need to update our site with this type of design thanks for update this list.

  26. Your thoughts on using accent colors for calls to action is brilliant! I have been working on a website and we are trying to get more subscribers. I will change our color a bit and we will see if that helps us get more subscribers. Thanks for the helpful article!

  27. Alfre Woodard Sep 30, 2015 at 1:45 am

    I think that this can help you, if you run a link-checker at least once a month on the links from your site pages, both to other pages within your site and to external websites.

  28. One thing that I have noticed a lot lately is that website content is often not justified and it irritates me because it looks ragged. Is there a reason for this? I’d love to know because it is a ‘thing’ I’m noticing more and more.

  29. kaushal patel Oct 20, 2015 at 7:51 am

    Great reading. We are having sliders on our website homepage. Now I understand that slider could be one of the reasons for not having good conversion rate on our website. Thanks for the tips.

  30. There are many website designers who don’t know even the basics of website designing. As a result they end up creating a website which doesn’t grow the business in the first place. It is required to do proper research on the website designing and use good templates to save time, money and efforts.

  31. Eliza Cranston Dec 21, 2015 at 12:12 pm

    Thanks for posting on what not to do in web design! I’m trying to create a website and I want to make sure that it is accessible and readable. This gives me some great information on what visitors to my site will respond the best to. What fonts would you consider to be classic and readable?

  32. Nice post. Designers should design for their clients and not for themselves or their portfolio. Also trends die.

  33. Nice post. Designers should design for their clients and not for themselves or their portfolio. Also – trends die.

  34. Mistake #1…my biggest pet peeve. How can you expect someone to get anything from your site if they can’t read it. What is even more amazing is that many out-of-the-box themes come pre-set with ridiculously small fonts. SMH.

41 comments

Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →