Web Design Standards: 10 Best Practices on the Top 50 Websites

Share This
Andy Crestodina
Share

Even for marketers, design standards aren’t something you think about a lot. But for web designers, they’re critical.

“Standard web conventions” are web design standards and best practices. They’re a set of rules that web designers follow, knowing that they align with visitors’ expectations. They are guidelines for clarity and usability.

But what is standard, really?

To answer this question, we created a checklist of 10 web design standards, then looked at the top 50 marketing websites to see how standard these standards really are. Using guidelines from an earlier NN Group article, we use the following thresholds:

  • Standard: 80% or more of websites use the same design approach
  • Convention: 50 – 79% of websites use the same design approach
  • Confusion: 49% or fewer websites conform, no single design approach dominates

Note: The sites included in this research are the top marketing websites in the “business > marketing & advertising” category on Alexa. After excluding news, media and publication sites, which do not have conventional lead generation or ecommerce goals, we ended up with the top 50 marketing websites.

1. Logo in the top left

100% of the websites researched had a clickable logo in the upper left corner of every page on the site. That’s a standard!

2. Contact in top right

44% have the contact button or link in the top right corner of every page. Although this placement is very common and considered best practices, it cannot be considered standard.

designstandardsblogpost-contact-small

3. Main navigation across the top

88% of the websites had the main navigation located in the header at the top of every page, making horizontal top-level navigation a web design standard.

designstandardsblogpost-small

4. Home page slideshow

32% of the websites have a home page slideshow (also known as a carousel) with a rotating series of images and messages.

designstandardsblogpost-slide-small

This is one that Orbit designers are watching carefully, as more sites seem to be favoring a static featured image, rather than a rotating series of images.

Research is mixed on the effectiveness of each option. Results vary! Choose the best option for your site, your message and your visitors.

5. Value proposition high up on the home page

80% of marketing websites have an explicit value proposition located high on the home page. So the majority of websites explain their value to visitors “above the fold.” The remaining didn’t have an clear value proposition at all.

designstandardsblogpost-value-small

Any web designer will tell you that there is no standard pixel height for browsers. Therefore, there is no fold. But of course, some design elements appear high on pages and are generally visible to the majority of visitors without scrolling.

6. Call to Action high up on the home page

78% of the websites had visually prominent calls to action. The percentage fell below our threshold for standard, it’s certainly a convention.

designstandardsblogpost-cta-small

7. Search feature in the header

54% of websites have a search feature in the header. About half of all marketing sites do not have a search feature that appears “globally” on every page either as a link, icon or search box.

designstandardsblogpost-search-small

This isn’t surprising to us. Search tools aren’t necessary unless the website contains a large amount of content. A search tool is often a “crutch” for a poorly organized website.

8. Signup box in the footer

24% of websites allow visitors to sign up and subscribe to email updates in the footer. So this is a common place to gather email addresses, but not a convention or a standard.

designstandardsblogpost-signup-small

The most common content for footers is copyright, privacy, legal, sitemap and contact links. Visitors expect to find contact information in the bottom right or bottom center of websites.

Want to a better footer? Here are our Footer Design Best Practices, and 27 things you can add to the bottom of your pages.

9. Social media icons in the footer

72% of the websites include icons for social media websites in the footer. This almost makes these a standard design element.

designstandardsblogpost-socialfooter-footer

26% of the websites included social media icons prominently in the header.

designstandardsblogpost-socialheader-small

As in the footer, clicking any of these icons takes the visitor to the social media site. For this reason, this is a design element that can cost you traffic, increasing bounce rates and hurt results.

We recommend adding social media icons in the footer. To further reduce visual prominence, the full-color version can appear only after the visitor moves the mouse cursor over the icon.

10. Responsive design

68% of websites are mobile-friendly using responsive web design. This gives visitors a great experience regardless of the device – phone, tablet or desktop.

designstandardsblogpost-responsive-small

It’s a combination of design and programming that is difficult to add after a site is built. More often, it’s part of a redesign, which may explain why it’s a convention, but not a standard.

Responsive design has been best practices for years. We’re glad to see this become more common and we expect this feature to be standard eventually.

Note about the data: The sites included in this research were big, famous brands. They have lots of pages and diverse businesses. Some design aspects of large sites (search tools, generic navigation labels) may not be relevant to smaller marketing websites.

Let’s review…

designstandardsblogpost-bar-small

Custom Design is Dominant

Obviously, not all design standards are standard after all. Except for the placement of the logo, the main navigation and the value proposition, there aren’t standards for web design.

The nice thing about standards is that you have so many to choose from. – Andy S. Tanenbaum, Computer Scientist

Web design conventions include a prominent call to action, search tool in the header, social media icons in the footer and responsive web design.

Other common design features may still be considered best practices, but may not be used by the majority of websites. Custom web design, specific to the business and its audience, rules the day.

Practical Insights for Web Designers

Conforming to standards are an easy way to meet the expectations of your audience. Your visitors are not blank slates. Your website is the millionth website they’ve visited, so they come with strong ideas about what they’ll find and where they’ll find it. And the website is key to your digital marketing basics.

Why make your site different?

If a design element is expected in a certain place, then that’s where it should go.

Beyond design elements, there are types of web design standards that all good designers understand:

  • Brand Standards
    Colors, type and tone are specific to every business. You should have a style guide for your website and stick to it.
  • Accessibility Standards
    Access to information is a basic human right. This has been recognized by the UN Convention on the Rights of Persons with Disabilities. Follow these standards to make your site accessible to everyone.

Standard web conventions are shorthand for good design. If you break any of these rules, you should do so intentionally and with a very good reason. And you should plan on measuring the impact of being unexpected.

Does your site follow best practices? Or do you break the rules?

Share This

What are your thoughts?

By signing up you are agreeing to our Privacy Policy.

Comments (39)
  • This is fascinating research. I’d like to understand the “top 50 marketing websites” you surveyed a little better — all B2C? top 50 in online revenues? Broad cross-section of industries?

    • The “Top 50 Marketing Sites” were the sites from the Alexa list of the top sites in the Business > Marketing and Advertising category, without the media and news sites. If you browse through the list of sites from that link, you’ll see the ones we surveyed.

      It’s a somewhat arbitrary group with quite a few survey companies in it, but we needed to get a list from somewhere! And those sites all had marketing goals, so we felt it was a relevant source. If you know of a better list of sites somewhere, please share!

  • This is an interesting post Andy, and great research! However, I might disagree with the term “Best Practices” in the headline. I definitely would not consider a carousel/slideshow on the Home page as a best practice–just a good practice for distracting the users and stop them from converting. You said that research is mixed, but I’ve only seen one study ever where conversions did not decrease through the use of a slideshow (but several where it did). I’ve also always leaned toward what Brian Massey is preaching these days about Responsive Design vs Adaptive Design. Generally, I think mobile users have different wants & needs than desktop users, and I think those needs can be met better and faster with a design that is tailored to them, with their most common actions being easiest to find.

    Not trying to be a nay-sayer! In general, I usually endorse following the conventions that most of the big sites are using as it does tend to make the site easier to use, for the most part. But if such conventions make the site more difficult to use, then it’s time to test some alternatives (as it would appear a number of the top 50 are doing in different areas).

    • I appreciate the comment, Tom. It sounds like the research on slideshows isn’t that mixed. Is the verdict in on this? We actually just finished a test of our own homepage and the featured image got 195% more clicks than the links in the slideshow. Maybe this question is settled. I’d love to hear more of your thoughts on this. Maybe a guest post? 🙂

      The design team here would probably disagree about responsive web design. Even though this “feature” didn’t meet the 80% threshold to call it a standard, they feel that standard is the right word. That doesn’t mean I disagree with Brian. It’s dangerous to argue with a man who has that much data.

      Maybe we should get Brian’s input here…

      As for the headline, you’re raising a good question. Standards and best practices aren’t necessarily the same. Something could be standard and still break all the rules for what’s good and right. The standard UX design for a cable TV interface are unbelievably bad. But they’re so common, who could argue that these design elements aren’t standard?

      • My rules of thumb are these: If you want a high-converting small-screen site, you’re probably going to have to hack up a responsive web design (RWD) to a degree that makes it difficult to maintain. Calls to action should be different. Load times need to be faster than desktop. Responsive templates make bad decisions that have to be fixed.

        If all you want is a mobile-friendly site, for God’s sake, don’t redesign your desktop site. Optimize the desktop and build a separate adaptive web design (AWD) template.

        If you’re redesigning due to backend issues or a rebranding, and you’re happy with a low-converting small-screen experience, go with a responsive template.

        We have clients with better converting small-screen sites than their desktop site. Don’t write off your mobile visitors too quickly.

        Rear Wheel Drive (RWD) is fast. All-wheel Drive (AWD) covers the most terrain. If you’re working with Andy’s team, he’ll help you make the right decision.

    • Tom, we know how to test our way to a carousel that beats a static hero shot. We’ve done it more than once, but it takes several tests. I’d place bets on a static hero shot if I was building a site today.

      The question to ask is why the carousel is being used. The answer is usually something like, “We had too many departments asking for exposure.”

      You don’t want to be copying “best practices” that are the result of politics and not performance.

  • Terrific insight, Andy – and I would agree that these are best practices. I do have a couple questions regarding your list. How do you define a call to action? Content marketing? Buy it now? What about a proactive live chat feature? I wouldn’t expect that 78% of websites are employing the necessary variety of CTA’s to effectively convert customers.

    • Good question, Jonathan. A call to action is a button or link that asks the visitors to do something. It has to have a verb and it should give some indication of the benefit to the visitor. “Learn more” is a call to action, but it’s the weakest.

      I’m sure you’re right. 78% of websites aren’t doing it effectively. But some sites aren’t doing it at all!

  • i will make this practices.. :0

  • Wow, great info. Now that I am redoing my website it will certainly be very helpful, thanks!

  • Loved reading this and found some great data that I will use for an online course we’re drafting (I’ll obviously link back to your article). I’m surprised that 32% of sites are still not mobile-optimized. I think you’re correct that it is most likely cost prohibitive for some. Thanks for the tid-bits!

  • Thank you. I am just re-entering the world of design adding in web design. This is a wealth of information.

  • What do you mean by “Value proposition high up on the Home page”?

    Plenty of websites now present the Visitor with a HUGE photo and a few words (at the top of a long page requiring scrolling) – but mostly the pictures are just eye-candy and very few words about just one products or service amongst many.

    If these are “value propositions” then they are mostly very fuzzy, fluffy and a tiny fraction of what the business does/offers.

    There is nothing wrong with a strap line about “Value”, Quality” etc – but if is doesn’t provide context and content (e.g. list of products / services) then such a minimalist Home page has little value.

  • I’ve A/B Tested the Hell out of the SlideShow/Carousel . I’m not 100% confident in using it even for a product eCommerce page to swipe between views of the product. The use of it on landing pages, that I can vehemently oppose, because a full screen, no scroll landing page, has continuously out paced slideshows in conversion. It’s due large in part to catering to one target persona instead of three. If you’re catering to 2 or more personas, then your marketing funnel is in disarray. Try 2 or more landing pages instead of slideshow/carousels. Cheers!

  • Excellent post as usual thank you too much Andy for the good work !

  • Andy you have done a great job on keeping the language understandable for even non IT people. Great post thanks.

  • Great reading, but your site displays almost nothing in Firefox. Not trying to be cheeky, but how many sites still even check cross-browser functionality? Have developers given up because of the proliferation of mobile devices?

  • Totally agree with you . And its true there is a science to adventure.

  • Great research, I must say. I totally agree with all your insights on these web site design practices. However, I see something’s missing. What’s your take with the pop-ups when visiting websites? Pop-ups like “Subscribe to my newsletter” or offering something else. I personally find that annoying especially if it always appear whenever I visit the website.

  • One thing concerned me about this page: I couldn’t find a date. This content might have been up to date in 2015; less so in 2019. I think it’s good practice to let visitors know when the article was published.

  • Your findings are very interesting. I’m surprised so many web designers have chosen to go the same route and be like others. How have you been able to get all the data to prove these the top 10?

  • Considering the fact that tablets are somewhere in the middle of mobile phones and computers, websites should also be able to cater to these viewers, correct?

  • I really enjoyed your article. I had a question about what you meant or referred to when you spoke about the “call to action”?

  • This is very informative, especially for those who are new in the field–like me. I never realized that many websites had a contact link in the top right section of a website. It’s not standard yet but it’s almost 50% in that category. Is there a reason why many websites have the contact link there and is it highly recommended?

  • Enjoyed reading the information for best practices. I am interested in understanding more about a “call to action” that is prominently displayed on the home page. What kind of “call to action” is part of best practices?

  • I found it very interesting that 54% of websites have a search feature in the header. About half of all marketing sites do not have a search feature which I found disappointing because I hve always loved that feature on a website. How come only about half use the search feature?

  • I think your research was done well and that allowed your findings to come across as easy to understand by readers, so shouts out to you. I was wondering how you would determine what features to use on your own website that would help users navigate easily?

  • How important do you feel having a mobile friendly site is? I know that most pages are mobile friendly, but if it is not, how much will it decrease your traffic? Having a conventional website designed for computer users can allow for more advanced features, but are those features worth the loss of mobile traffic?

  • what are your thoughts on sites that use intentionally terrible design that still end up being massive hits?

  • Why don’t most websites have a “sign up” in the footer? Only 24% do.

  • I am just learning about web design in my high school and I wonder if you have any tips or recommendations for best ways to keep up with best practices in design?

  • 11. Prominently date your web article so your readers can tell how out of date the content is.

  • I am taking a Website Development course and the information here was very helpful and easy to understand so I can create my own website for class. I was just wondering why don’t many websites have the search feature at the top of the navigational heading? It would make more sense to put it up there because not many people (including me) would want to scroll down to find the search bar. Also, a search bar makes navigating a website easier, and I wonder why some websites don’t have one.

  • I have read your blog and information on your blog is helpful for me. Thanks so much for providing such information for sharing.
    Hire Web Development Services In USA

  • This is a topnotch research. I have learned a lot from this article alone and some insights too. Thank you so much for this Andy. Will absolutely follow these standards. Cheers!

  • Why is it that various website don’t include the search bar? Is it relatively hard to implement or is it not used as often in specific websites? The search bar makes website navigation much easier, and makes absolutely no sense as to why major marketing website don’t include them.

  • I noticed that 12% of the websites you surveyed didn’t include navigation in the header although that seems to be the most intuitive way to get back to the main page and is on just about every website i use consistently. Is this hard to implement or do some developers just not see the need to implement it?

  • This was very helpful in my web design course. I found it very interesting how rare a search feature was- as well as a contact feature in the top right. Such things would seem a lot more important and much more common. The only thing I wish you would add to this blog post was a more easily accessible date, as well as providing the date in which the research was carried out.

    • Follow up question, how would you say standards develop, and do you have any predictions for future standards in the industry?

 
Join over 16,000 people who receive bi-weekly web marketing tips.

By signing up you are agreeing to our Privacy Policy.

Share This