Two catastrophic web design errors can kill the performance of any website. A website requires a significant investment in time and money. Therefore, you need to avoid two particular errors to deliver a positive ROI: a responsive web design and a fast page speed. Plus, if you read to the end, I throw in a bonus error and how to avoid it.

Critical Web Design Errors Fall into 2 Buckets

Critical errors are defined as those errors, which will cause a user to bounce or exit quickly. Many errors can affect bounce rate, pages per session, and dwell time. However, there are a few that have a disproportionate effect. Before you sign off any design, you want to make sure that you have checked for these.

Website is Truly Responsive

In a quick search of WordPress themes—or any other popular web design and build sites—you will find hundreds of themes that claim to be responsive. All probably are to some degree, but the question is, are they genuinely responsive enough to handle the potential ways that our users may interact with our site.

A Truly Responsive Design Works Across All Formats Our Visitor Use

This is the first critical web design error you need to avoid. It is critically important to view your site in a real-time setting to determine if the design or theme is truly responsive to all the ways a user can view and interact with our content.

The Desktop Design Bias

The reason this is important is that there is an inherent bias in how we design. Every web design company that I know designs on the desktop. This is not necessarily wrong, but it does introduce a bias. We are looking at our work either only on desktop or as a version of a mobile device, typically in a vertical alignment. Few if any consider a horizontal phone view, for example.

Mobile Has Overtaken Desktop in Device Usage

This is important because as a percentage share of device use, mobile has become the most commonly used device worldwide.1 2

Therefore, you cannot afford to ignore it or assume it looks the same on a mocked-up desktop version as it will on a mobile device. This is why it is very important to aware of the design bias because something that might look good on a monitor might not be functional on-screen.

How to Avoid the Desktop Bias

There are three ways to avoid the desktop bias.

1. Design Mobile First

This isn’t the traditional approach, but the best way to ensure it works well on mobile is to design it on the mobile setting. Then, view what that design looks like on desktop mode. Below is an example using our site.

You would also want to see it in a horizontal position as well. However, this example should give you a sense of how it could be done.

2. Custom Build

This option avoids the need for themes and the baggage that comes with them. We’ll cover that in the next section. This is our preferred method because it minimizes code bloat and doesn’t rely on a theme to perform the resizing. It is built in from the beginning.

This option requires more code knowledge and expertise but generally provides the best experience across multiple large screens (HD, Laptop, Small monitor) and small (Tablet, Mobile in both orientations).

3. Two Sites

This requires you to build an AMP version of your site. AMP stands for Accelerated Mobile Pages. Google and other search engines introduced AMP in about 2016. AMP is an open-sourced HTML platform designed to speed up mobile performance.

AMP is a lightweight, stripped-down version of a desktop site. News organizations provide the best example:

As you can see, the one is not just a scaled-down version but a completely separate design. It can be helpful for dynamic pages that rely on a significant amount of new copy. Once the templates are built, the same data (content) and be serviced in two formats depending on the device use.

Slow Page Speed

The constant companion of responsiveness is page speed. Unfortunately, they are intrinsically linked. Slow page speed can wreak havoc on your bounce rate and conversion.

A study conducted by Pingdom showed the impact page speed, load time, has on bounce rate and conversion.

As you can see, there is a dramatic increase in bounce and decrease in conversion after 3 seconds. This is significantly less forgiving than the 4.5-second threshold Google published in 2016 3.

Run a Speed Test on Your Site

Before building a web design, run the page speed of your developer or page using the theme that is being recommended. You can use Google Pagespeed Insights or any other tool. Google is the hardest grader, so we recommend them. It’s always wise to see if the designer is really any good or if the theme is as fast as they claim. If they are slow, then you can almost guarantee that your site will be slow.

How to Avoid Slow Page Speed

These are three ways to avoid slow page speed.

1. Custom Build

As we mentioned above, a custom-built web design avoids the issue of code bloat. Code bloat is defined as the extra unused code that is loaded when a page is created. Every page of a theme includes all of its potential features, whether you use that feature or not. The browser reads each line, whether it uses it or not, which inevitably slows things down.

A custom build allows for a seamless experience from desktop to mobile. Therefore, it is not as drastic as a shift as we showed with AMP.

2. Two Sites

AMP was essentially created to resolve this issue. AMP only has a fair but limited amount of features and has stripped out the rest. When you are writing a site in AMP HTML, you need to be aware of what is and is not available. AMP will undoubtedly be faster, but it will not likely provide the same experience as the desktop version.

3. Stripped-Down Theme

To be fair, there are plug-ins available for theme-based responsive sites that make them faster. However, they never get to the same performance levels as a custom build or AMP site.

One way to get closer is to strip out the code from the theme that you do not use. This requires a developer or advanced knowledge of coding. You can easily break a theme if you are certain about what you are doing.

Summary of How to Avoid These Two Web Design Errors

There is a trade-off that ultimately has to be made between cost and performance. The simplest and easiest way is the theme-based CMS (content management system, e.g., WordPress) approach. You will likely end up with a great looking desktop site but will have low to mid-level site performance on mobile. Depending on your audience, that might still be OK.

However, if you are going to invest money in either developing an AMP daughter site or a stripped-down theme, your money is likely better spent on a custom build.

Bonus Error – Not Knowing What Your Users Want

At the most basic level, a website is a communication vehicle. We are providing information to our visitors/users to motivate them to take some action. In order to motivate them, we need to have a detailed understanding of what information they need. If this sounds a lot like marketing, it is because it is.

The Most Important Factor of a Website

The number one, most important web design attribute to users is “Easy to Find What I Want”.

This feature is nearly 8-times as important as any other aspect of web design.

The reason I gave this bonus point is the first two can have a profound effect on the third. A poorly responsive, slow site is the exact opposite of making it easy to find.

How to Find Out What Your Users Want?

The beauty of this age of information is our people are constantly telling us what they want; we just need to listen. But, the key is knowing to whom we should be listening. There is a process on how to do this. This isn’t a shameless plug to promote our site, but this is too long of a topic to cover in one post. We cover marketing strategy on our site in great detail. We focus more on small business, but the process works regardless of size.

Summary

In summary, the best steps to take to avoid these three critical web design errors are

1. Ensure that you have a truly responsive design that works well on any device
2. Decide on which trade-offs to take on page speed performance vs. cost.
3. Know what your visitors want and make it easy for them to find.