Mistakes to Avoid When Designing a Website

Web design has become an undeniably significant factor of modern website marketing. From properly communicating one’s branding efforts to guaranteeing functionality, it can make the difference between a conversion and a bounce. With increasingly tech-savvy, demanding, and sophisticated online audiences, excellent web design is nigh imperative. Thus, to help guarantee optimal results, this post will delve into common mistakes to avoid when designing a website. These will range from ones that impact Search Engine Optimization (SEO) to those that hamper conversion rates.

7 mistakes to avoid when designing a website

For the sake of convenience and scannability, let us explore 7 among the most crucial design mistakes to avoid. These will be ones that can directly hamper site performance, search engine visibility, and user usability and engagement.

#1 Hampering your website’s loading speed

Perhaps most importantly, both in terms of SEO and overall User Experience (UX), website speed is famously crucial. SEO success depends on the speed of your website, just as much as final conversions do. 

Firstly, there is indeed a clear correlation between bounce rates and page load times, as Google’s own research finds.

Source: https://www.searchenginewatch.com/wp-content/uploads/2021/01/Image-2.png

At the same time, Core Web Vitals now gauge Largest Contentful Paint (LCP) as a crucial indication of expected UX. Combined with the above, it should be clear that both search engines and visitors value this metric quite strongly.

There are many factors that can affect loading speeds you may consider, including:

• Heavy plugins
• Outdated themes and modules
• An underperforming Content Delivery Network (CDN)
• HTTP requests
• Bloated JavaScript

Of course, not all such issues hinge on web design alone. Many do, however, like using sluggish UIs and large images. Thus, overloading your website and hampering its speed is among the most crucial mistakes to avoid when designing a website.

#2 Overlooking mobile-friendliness

A second, arguably equally significant and famous, factor to consider is mobile-friendliness. Offering a consistent, fast, and responsive experience for mobile devices is nigh imperative in the digital age. Simply consider the related numbers Hootsuite reported for 2019:

Source: https://p.widencdn.net/kqy7ii/Digital2019-Report-en

SEO aside, when 5.112 billion people use mobile phones and 4.388 billion use the internet, that’s a vast potential audience. Additionally, consider that 59% of US organic search engine visits were on mobile devices as of Q1 2021. Finally, SEO-wise, Google itself states that it “predominantly uses the mobile version of the content for indexing and ranking”. Indeed, Google’s algorithm takes note of the above findings and considers mobile-friendliness a significant SEO factor.

To ensure mobile-friendliness, you may consider such practices as the following:

• Adopt mobile-first design development over the traditional desktop-first approach
• Opt for a clean UI that fits smaller mobile screens
• Avoid heavy elements that lower speed and responsiveness

Notably, most similar mobile-friendly practices also offer general benefits. Opting for a clean navigation menu or ensuring responsiveness will benefit all your visitors’ UX, regardless of device. In this regard, Google’s PageSpeed Insights tool can also provide invaluable insights to inform your efforts. 

#3 Using unclear website navigation and poor architecture

On the subject of navigation, providing users with easy navigation is a self-evident benefit. For users themselves, it provides a better UX as they can more easily navigate to valuable pages. For search engines, the clear site architecture that enables it gives them context and helps them crawl pages faster.

In terms of design, navigation can be enhanced in different ways, including:

• Clean header menus. Consider splitting content into important subcategories within your header menu for easier access.
• Optimal internal linking. Pages should link to other pages hierarchically and logically to ensure users can navigate to all pages of interest.
• An HTML sitemap. A visible sitemap on your main page will also assist with navigation.

As regards sitemaps, they are also an important aspect of SEO in themselves. While internal linking and HTML sitemaps will ensure no pages are orphaned, XML sitemaps will assist crawlers index pages. While invisible to human visitors, XML sitemaps offer search engines a list of your URLs and metadata, improving indexing speeds. Design-wise, they can also help inform site structure.

While creating an XML sitemap may take some coding knowledge, third-party tools and plugins can expedite the process. Google consolidates the required steps as the following:

1. “Decide which pages on your site should be crawled by Google, and determine the canonical version of each page.
2. Decide which sitemap format you want to use. You can create your sitemap manually or choose from a number of third-party tools to generate your sitemap for you.
3. Make your sitemap available to Google by adding it to your robots.txt file or directly submitting it to Search Console.”

#4 Poor Calls To Action (CTAs) and improper placement

Having ensured proper website navigation, webmasters still need to ensure conversions. In this regard, suboptimal CTAs are among the most vital mistakes to avoid when designing a website. When high Customer Acquisition Costs (CAC) can already burden businesses, low conversion rates through poor CTAs can only exacerbate it.

There are a plethora of mistakes to be aware of, from copy to placement. These include:

• Weak copy and lack of visual appeal; consider how clear your message is. Examine your choice of font and text color to ensure readability. View your page in monochrome or use other tools to ensure button colors don’t bleed into your background colors.
• Obscurity through placement; your layout may be making your CTAs hard to locate. Consider placing your most valuable CTAs above the fold for visibility. Examine if CTAs in close proximity give your visitors choice fatigue.
• No sense of urgency; CTAs that incite urgency, through date limitations or otherwise, work best. Consider Sleeknote’s findings on popups with countdown timers, which outperformed ones without timers by 113%. The same concept applies to CTAs, especially for impulsive purchases.

Of course, any changes to existing CTAs should entail extensive A/B testing. Thus, you may consider such tools as heat maps, which already see use in mobile-first design practices.

Source: https://cdn.webdesigntips.blog/wp-content/uploads/2021/03/1614891771_808_How-to-Develop-and-Test-a-Mobile-First-Design-in-2021.png

Heatmaps can offer insights into how visitors interact with your pages. As such, you may use them to inform your decisions, including decluttering your layout, optimizing their placement, and more.

#5 Using irrelevant images and alt texts

Another very common mistake to avoid is using images and alt text that are irrelevant to a page’s subject. This practice impacts both SEO and UX, despite webmasters’ contrary intentions. Moreover, an overabundance of images can also draw attention away from CTAs, as we’ve highlighted above.

Alt, or “alternate”, the text is descriptive text that explains the subject of images. Thus, it serves a few different purposes:

• UX consistency; when an image fails to load, alt text displays instead. This informs readers of the unloaded image’s subject.
• Accessibility; alt text also assists screen readers in reading images. Google notes that “without alt text, screen reader users just hear “image””.This is invaluable for visually impaired visitors who use such assistive technologies. 
• SEO; finally, alt text informs search engines of an image’s intent and purpose. This helps them gauge a page’s overall value and relevance to users’ search intent.

SEO typically dictates that pages break long pieces of text with images. Understandably, this helps readers scan content more easily and provides more visually engaging content overall. However, in trying to do so artificially, one may fall to this mistake, using irrelevant images of little contextual value. In turn, this impacts both engagements, as visitors find little value in them, and SEO, as alt text is misaligned.

#6 Lack of accessibility

Having touched on accessibility above, it is similarly crucial to ensure your site remains accessible to everyone. Indeed, designing for accessibility has a plethora of benefits besides encouraging simplicity, readability, and a tighter structure. It helps reach a wider audience, bolster your SEO score, and adhere to the law.

As regards the law aspect specifically, the World Wide Web Consortium (W3C) ‘s Web Accessibility Initiative (WAI) introduced Web Content Accessibility Guidelines (WCAG). While these guidelines are not law per se, they have informed such laws as the Americans with Disabilities Act (ADA). In turn, there has been legal precedent for accessibility lawsuits, from the recent Golden State Warriors to others worldwide. 

The law aside, however, accessibility also offers substantive benefits to SEO and visitor engagement. You may thus start ensuring accessibility through alt text for screen readers, as highlighted above. Then, you may consider additional practices and design choices like the following:

• Examine your color choices; use contrasting or easily distinguishable colors wherever possible. Accessibility-wise, this can assist colorblind or otherwise visually impaired visitors. At the same time, it can make your website more visually appealing for all visitors.
• Facilitate text resizing; examine your layout, font choice, and other factors to ensure visitors can enlarge text effectively. Kris Rivenburgh notes that “[t]ext must be able to be resized up to 200% without negatively affecting the ability to read content or use functions”.
• Ensure keyboard-friendliness; try to make your website’s navigation simple enough for keyboard-only or Tab key-only navigation. To do so, you may examine the “keyboard focus” of your site’s major features. This measure will ensure assistive technologies can more easily let visitors navigate to your content. In turn, this design philosophy will encourage simpler, more concise designs that benefit your visitors’ UX.

These and other practices should establish a healthy foundation for improved accessibility across your website.

#7 Overly busy designs with no white space

Finally, we may consolidate some aforementioned points into a final mistake to avoid when designing a website. Namely, using busy designs that discourage visitors from staying or scrolling down, thus missing your CTAs.

To rectify this, you may use such tools as Google Analytics, the aforementioned heat maps, and other tools of choice. Carefully examine all insights into referral traffic, engagement, and on-page behavior to inform such efforts as:

• Reducing visual clutter; only use visual elements that directly enhance the UX and drive conversions. Busy designs can discourage visitors and obscure your CTAs.
• Keeping valuable information and CTAs above the fold; makes crucial information immediately visible. This can include Name, Address, and Phone number (NAP) information, CTAs, and other elements visitors may value.
• Using white space appropriately; white space offers an excellent asset toward readability and scannability, as well as simplifies content layouts. If you find visitors don’t scroll down enough to reach CTAs, lack of white space may often be to blame.

This factor is, of course, invaluable to note. Conversion Rate Optimization (CRO) typically begins with such design examinations, precisely because such design mistakes can visibly hamper conversion rates.

Conclusion

To summarize, there is a vast array of mistakes to avoid when designing a website. Heavy elements, too many HTTP requests, and sluggish UIs can all hamper loading speeds and responsiveness. A poor site structure, irrelevant images and alt texts, a lack of accessibility, and busy designs can all discourage visitors. Finally, overlooking mobile-friendliness and using suboptimal CTAs can both further drive down traffic, engagement, and conversions. All of these factors overlap in one way or another. A slow website will not be responsive or mobile-friendly; a busy design will obscure CTAs; a poor structure will hamper accessibility. Thus, one should likely view them as a cohesive whole to tackle holistically, not as separate, unrelated issues.

About the author

Chris Phillips is a copywriter and psychologist with a keen interest in digital marketing, web design, and the areas where the two overlap. He contributes articles to various websites and publications where he discusses SEO, web design, and similar topics.