Ignore These 13 Web Design Standards At Your Own Peril (2022 & Beyond)

As you work through the design process on a new website, you might feel like your ideas go against the “norm.”

Sometimes, that’s a good thing. There are over 1.9 billion live websites—some of them likely to be your competitors. Standing out from the crowd with a unique web design is a great way to attract your target customers’ attention.

But some design elements are standard. They’re basic expectations that internet users have (also known as “best practices”), and web designers need to abide by.

In this guide, we’ll share the web standards that apply to any web page, from homepages to landing pages.

1. Accessibility

There are certain elements that websites need to have. The most basic? Accessibility. This simply means that anyone is able to access your site, and that you’re not preventing anyone from using your website. This includes people with disabilities.

The Web Accessibility Standards were introduced by Tim Berners-Lee, the inventor of the World Wide Web. He said:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Websites need to meet accessibility requirements, with some countries making it the law. (In the United States, for example, it’s a legal requirement for federal government websites to make their electronic information to be accessible to those with disabilities.)

So, what does an accessible website look like? Here are some things you’ll need to avoid. They could be preventing certain groups of people from accessing your site:

• Color contrast that makes text difficult to read
• No alt text for photos or videos for visually impaired users
• A lack of keyboard functionality for people who can’t use a computer mouse

It’s a basic need (and law) for websites to be accessible. So, make sure you’re not accidentally preventing people from visiting your website by adding alt text, enabling keyboard functions, and thinking about your color choices.

2. Simple User Experience

We’ve already touched on how websites need to be accessible. But once you’ve nailed the basics, why not go a step further and improve the overall experience someone has when visiting your website?

One major thing that could be causing UX problems are 404 error pages: Broken links that direct people to a page that’s been removed from your site.

Some designers forget to design these pages. People landing there are shown a boring “Sorry, this page hasn’t been found” notification.

…Yawn.

You can (and should be) designing a 404 error page that is much more interesting than that line of text. Our 404 page, for example, have a number of design elements to keep a visitor engaged:

Once you’ve designed the perfect 404 error page, it’s worth running website usability tests—like heat maps or visitor recordings—to find areas for improvement. If you spot that visitors are hovering over a certain design element, check whether you can make it simpler.

3. Right-Hand Sidebar

Research by Nielsen found that people use the “F Pattern” when reading web content.

They’ll start on the left-hand side of the page, focusing heavily on the first few words, before gradually moving to the left. Then, we’ll move down and across again, by plateauing towards the end of the page:

While this might not sound like something website designers need to consider, it is—especially when thinking about the position of your sidebar.

Western audiences’ eyes move from left to right when visiting a new website.

It’s best to give them the content they’re looking for on that specific page (like a blog post, for example). Then, position your website’s sidebar on the right-hand site. It’s ready for them to scan once they’ve read the main bulk of your content.

…Still not convinced? Matthew Woodward run an experiment on sidebar position. He found that a right-hand sidebar had a higher conversion rate, session duration, and conversion rate:

4. Light Background, Dark Text

Speaking of color choices, you’ll probably have recognized that the vast majority of written text is black. It stands out against a white background.

However, that’s not the only reason why designers use (and internet users expect) this style of typography. It’s because readability suffers when we need to read white text on a dark background, and we have to concentrate more.

Take a look at this example:

It’s much easier to read the black-on-white text, right?

Not only that, but dark text on a light background is also more accessible. People with visual impairments don’t need to concentrate hard on the text in order to digest it. (In fact, people with astigmatism find it extremely difficult to read white text on black backgrounds.)

The bottom line? While dark backgrounds do stand out amongst the sea of websites, the majority have white backgrounds for a reason.

5. Stick to No More Than Two Fonts

There are several font styles you can use on a website, ranging from standard serif to cursive scripts. (Steampunk, we’re looking at you.)

This huge choice could leave you with analysis paralysis: Which fonts should you pick?

You might create a shortlist of 20 fonts. However, you should stick to a maximum of two fonts on any web design. Too many can be distracting for a visitors’ eyes, and cause their attention to stray away from your content.

So, which fonts should you combine? You’ll need to dig deeper into each font before you select them for your website’s typography.

Double-check that your chosen fonts work well together. Generally, it’s wise to have one sans-serif font with a serif font. But if you’d prefer a unique, cursive script, pick a basic sans-serif font to accompany it.

Don’t worry if you’re feeling overwhelmed, though. Web designers frequently share font combinations that complement each other, like the examples below:

(You could create a brand style guide for this. Include your brand’s colors, two fonts, and proportions in a single document. Your team can refer to this to make sure branding is consistent across every channel.)

Additionally, here’s a great breakdown Mike Smith did as a part of a brand kit:

6. Place the Main Navigation Bar Above the Fold

A navigation bar does what it says on the tin: Allows visitors to find their way around your website using one single menu.

The vast majority of websites have this main navigation bar above the fold—so much so, that it’s become a web design standard… But it’s not coincidental.

Placing your navigation bar above the fold captures people without forcing them to scroll.

You’re giving every site visitor the chance to move around your website, regardless of the page they’re visiting or the length they scroll. Everyone visiting your site will view the main navbar if it’s just below your site title.

The links you should include on your website depends on the site’s purpose. But as a general standard, it your main navigation bar should contain links to your:

• Homepage
• About page (either yourself, brand, product, or software)
• Contact page
• Pricing page
• Category pages (especially for ecommerce)

7. …But Not on a Landing Page

…Wait, what? We just told you that a website navigation bar will be visible to everyone landing on your site if it’s placed above the fold.

But not all pages should have a navigation bar embedded into their design.

We’re talking about landing pages—web pages that focuses on a single thing, with one single goal. (That’s usually an email sign-up, but can be anything from a purchase to a link click. The landing page is the fuel you’re using to get something.)

Landing pages shouldn’t have navigation bars because you want to eliminate the paradox of choice. A list of links in the navbar could give them five other things to do, but you want them to complete the goal of your landing page… Not click around and visit something else.

That’s why you should remove navigation bars from your landing pages.

Don’t distract them with too many things to do. Instead, lead with your main offer, and place your landing page’s call to action above the fold.

8. Contrasting Website Footer

The footer of your website can act as a mini navigation bar. It’s the final chance for you to capture someone who’s scrolled to the end of your design to continue using your website.

A website footer can include:

• Social media buttons
• Sign-up form
• Search bar
• Legal information (like disclaimers and privacy notices)
• Popular or recent posts

When you’re designing your website, best practice is to make the footer section contrast from the main design.

Take a look at this website footer on HubSpot, for example:

The footer area is a much darker color than the rest of the web page.

…But wait. Didn’t we just tell you that web designs should avoid dark backgrounds with light text? This footer example does that—yet it works. The navigation links aren’t huge walls of text, and the entire section stands out from the rest of the site.

In fact, contrasting website footers have become a web design standard. It’s an obvious sign that someone has reached the end of the page.

9. Mobile-Friendliness and Responsiveness

You might have heard the term “responsive web design” crop up when building a new website. This simply means that your design works on several devices, and design elements automatically resize to fit the screen.

Let’s put that into practice and say you arrive on a website that isn’t using a responsive design. You’re pinching and scrolling to find content you like, but the whole experience is frustrating.

You’ll just exit the site and find another that’s mobile-friendly, right?

You don’t want this process to occur as the result of your web design. And, with the internet usage on mobile devices has recently overtook traditional desktops, an unresponsive design could alienate almost half of your potential site traffic.

If that wasn’t convincing enough, remember that a responsive web design is good for SEO. Search engines (like Google) run using mobile-first indexing, meaning they check usability on the mobile version instead of desktop.

If you aren’t winning Google spiders over with a mobile-friendly site, you won’t have a successful SEO strategy—nor a constant influx of website visitors.

10. Fast Loading Times

Web design research has found that 83% of visitors expect a web page to load in less than 3 seconds. Not only that, but almost half of internet users will develop a negative image of a company if their website takes too long to load.

Unsurprisingly, this has an impact on conversions: An increase in site speed from 8 to 2 seconds can boost your conversion rate by 74%.

That’s why it’s standard practice to have a website that loads within three seconds of someone landing on your URL. As a web designer, you can do this by:

• Compressing or minimizing images
• Optimizing CSS code
• Using a fast hosting provider
• Removing unused plugins

(Head to Google Analytics’ Behavior > Site Speed report to find out whether your site meets—or beats—the three second goal.)

11. Show Your Contact Information

One of the biggest mistakes a web designer can make is hiding a site’s contact information.

On the homepage, some 64% of website visitors want to be able to view details such as the business’:

• Physical address
• Email address
• Phone number

You can include your business’ contact information in the footer of your site. Or, you can include a link to the Contact page within your main navigation bar. Regardless of where you place the information, remember that people are looking for it. Make it easy for them to find.

12. Use Visuals

We’ve all been there. You land on a website and see an overwhelming wall of text. There’s no visual element to the page, other than black-and-white text with the occasional link.

It’s off-putting right?

You don’t want people arriving on your site to have the same first impression. (After all, first impressions are 94% design-related.)

A superb way to prevent that from ruining your web design is to use visuals, like high-quality:

• GIFs
• Screenshots
• Photos of your team

All of those would help visual learners get the most value from your website, while breaking up overwhelming walls of text.

13. Show the Breadcrumbs

You’ve got the main navigation bar at the top of your website. But when someone lands on a page further down your site hierarchy—like a product page or blog post, for example—it’s smart to help them understand how they got there.

You can do this with breadcrumbs: Mini navigation menus that show previous pages, like this example on our blog:

The “University > Insights & Guides” breadcrumb tells people visiting that blog post that they’re in a specific section.

People visiting this page can use this to head back to their original URL if they’ve clicked the wrong link. Or, if they’ve enjoyed this blog post, they can click the breadcrumb to find similar, related content.

The same idea applies to ecommerce web design, as demonstrated on Bed Bath & Beyond:

Shoppers might land on this product page and find that it doesn’t really fit what they’re looking for. The breadcrumb makes it easy for them to head back to the category page and continue their search.

Are You Meeting These Website Design Standards?

Online shoppers are fussier than ever. And with a huge barrage of websites pushing the waters with their web design, it’s important to remember these web design standards. They’re traditions that work—and you should stick with.

But other than that, feel free to go crazy. Your website’s design is a perfect way to differentiate yourself from your competitors.

There are still thousands of ways to do that whilst sticking with these best practices.