⚠️️ 10 Dangerous Web Design Mistakes That Destroy SEO

To most people outside of the digital marketing industry, web design is still mostly a mystery. To further muddy the waters, many people think web design is subjective, and that as long as the client likes it, then it must be good. Even though that’s false for a myriad of reasons, which we won’t cover in this article, there is another issue. A plethora of problems can be lurking beneath the surface that can kill your SEO efforts.

Most web designers have no clue when it comes to true search engine optimization. Most think that as long as they stick a few H1 and H2 tags, image ALT attributes, and meta tags in a web page, their work is done. Every seasoned SEO professional knows that is both completely false and dangerous. In fact, once your web design is complete, that’s when the real work begins.

The first time I realized this was around the year 2000 when I analyzed the website of one of my first clients. They had previously hired a New York ad agency to design their website. Their site was built using Adobe Flash and was embedded in what was essentially an empty HTML page. This came at the bargain price of…wait for it…just a tad over $120,000 dollars!

At the time, they were spending tens of thousands of dollars every month on PPC ads, which was their sole source of traffic, and getting less than four leads each month.

Since their website was built in Flash and had zero search engine optimization, the content was completely invisible to Google. That drove their PPC costs through the roof, because Google couldn’t assign an accurate quality score and they had virtually no organic traffic.

I designed a new website for them, that while visually powerful, utilized clean, fast-loading HTML that search engines could easily crawl. Coupled with ongoing content development and link building, they went on to land a $54 million dollar deal with a major hotel chain later that year. (If you want a more detailed explanation of specifically how, I outlined my process in a recent post, Dominate Your Niche, on Search Engine Journal.)

My point is that even the so-called experts often make mistakes that have a negative impact on SEO. Sometimes because of ignorance and other times because they overlook critical details. So today, I want to help you avoid that by sharing some of the website mistakes I commonly see that kill SEO efforts.

10 design mistakes to avoid

Mistake 1: Failing to set quantifiable goals and measure your results

If you don’t know where you’re trying to go, how can you figure out how to get there? And how will you know when you have? Without setting quantifiable goals and measuring your results, you can’t, which is why it’s an essential part of web design.

I once had a client who constantly insisted that they wanted to be the leader in their industry, but refused to ever set any specific goals. They would regularly change course in the middle of campaigns, so they wasted time and money, and never made much progress.

If you have specific goals, it’s easy to quickly determine if a particular decision will lead you closer to or further away from them. Without specific goals, however, it’s easy to wander aimlessly, chasing the newest shiny object.

So what exactly constitutes a legitimate goal? Two things; a legitimate goal must be both specific and quantifiable. Here are a few examples of legitimate goals for your website:

• Generate an additional $300,000 in revenue from existing traffic sources
• Increase page views per visit by 20%
• Decrease bounce rate by 20%
• Improve conversions of existing web traffic by 15%
• Increase organic search traffic by 50%

At a bare minimum, this means utilizing Google Analytics, Google Search Console, and Bing Webmaster Tools. A smart marketer would also measure social media activity, inbound links, PPC, and email metrics. If you want to maximize both your efficiency and effectiveness, you need to compile all of your data into one consolidated report, and speaking as a client, Raven is the perfect tool to tie everything together.

Ideally, you should also utilize a CRM system like HubSpot or Infusionsoft, and configure your accounting software so you can measure and analyze other critical business information like:

• Revenue by channel and campaign
• Return on investment by channel and campaign
• Customer retention rate
• Length of your sales process
• Customer acquisition cost/cost per lead
• Conversion ratio (visitor to lead, lead to prospect, and prospect to customer)
• Average customer value

The more data you can effectively analyze, the better decisions you’ll be equipped to make.

Mistake 2: Not thoroughly testing all design elements

I can’t tell you how many times I’ve seen a website that is gorgeous when viewed on a desktop, but degrades into a steaming pile of poo when viewed on a mobile device.

When we design a website, we should be testing it several times in multiple browsers and screen sizes so we don’t encounter any surprises at the end. But we also need to test everything again on a staging server once it’s completed. It should also be tested yet again after it’s launched and made publicly available.

This may seem like overkill, but it’s easy to make a small CSS fix that ends up creating even more problems. It happens all of the time, even to me.

If you don’t take the time to review the entire website after completion, you may miss serious issues because you’ve “already checked that part.”

Minor issues to check for include:

• Margin and/or padding issues
• Font sizes causing odd line breaks
• Element sizes at certain screen sizes
• Improperly sized images
• Color or transparency issues

Individually, these issues can have a slight, but cumulative negative impact on the user experience. You can get away with a few, but remember that they add up quickly, leading to shorter time-on-site and higher bounce rates, which means less revenue and diminishing organic ranking.

Some of the more serious issues that could render your website completely unusable include:

• Positioning issues (absolute, relative, and fixed)
• Float issues
• Z-index issues
• Unclosed curly braces in CSS
• JavaScript errors

Before declaring “mission complete,” you should test your website in multiple browsers and on multiple devices, including:

• Google Chrome
• Firefox
• Microsoft Edge / Internet Explorer
• Safari
• At least one iOS and Android device, but preferably two (A phone and a tablet)

There are tools available for testing in almost every environment imaginable, but web browsers have come a long way over the last decade, so you really don’t need them as long as you can test in the most common browsers on desktop, as well as on one or more iOS and Android devices.

You should also use Google’s Mobile Friendly Test because it can identify specific criteria Google is looking for, including tap target size, touch element proximity, and viewport size. You don’t necessarily need to run all of your pages through it, but you should run at least on of each page that has unique design elements.

Mistake 3: Not prioritizing page speed

Page speed isn’t just something that only obsessive developers need to worry about anymore. Today, Google places a huge emphasis on its importance, and it has tremendous and proven subconscious impact on visitors.

According to a study done by Amazon, a difference of just 100ms—a unit of time that the ordinary human can’t even perceive, was enough to reduce their sales by 1%. If that tiny unit of time has that much direct impact on sales, what kind impact do you think an extra second or more will have?

So how do you design the fastest website possible? You start with clean, efficient HTML and CSS, and then minimize plugins and http requests, optimize your media, minify CSS and JavaScript, and implement caching. There’s always room for continued improvement.

In a 2016 episode of Webcology, Jon Henshaw shared some of the techniques he used to dramatically speed up the Raven Tools website, and the numbers he achieved are, in a word, enviable.

While I probably wouldn’t go quite as far as Jon did, this episode shows just how far a little creativity can take you. There are several techniques you can use to drastically improve page speed, including:

• Minimizing http requests
• Optimizing media
• Reduce redirects
• Minimizing widgets
• Utilizing caching
• Enable compression
• Minimizing plugins
• Sticking to system fonts
• Minimizing ad scripts
• Using sprites
• Minifying CSS and JavaScript

Mistake 4: Improperly sized/unoptimized media

If your website loads too slowly, visitors will leave without becoming customers, Google may rank your competitors above you, and the local villagers will toss a basket of kittens into a volcano. Nobody wants that, so we need to size and optimize our media properly to get the best page speed possible.

While content management systems like WordPress have put tremendous power into the hands of the average user, they’ve also introduced tremendous problems. One of those problems is that it makes it easy to upload improperly sized and/or unoptimized media.

The average user only knows they have a beautiful picture on their iPhone that they want to use on their website. They don’t realize, however, that the image is significantly larger than it should be for their website, so they simply upload it, resulting in a dramatic reduction in page speed.

This isn’t surprising considering that an image from the average smartphone could be up to 40 times larger than it needs to be. If you include just a few unoptimized images on a page, you can drastically slow down your site for mobile devices.

While a blazing fast website is essential in business today, we don’t have to give up gorgeous designs to achieve it. Properly sizing and optimizing your media can go a long way in achieving the fastest page speed possible without detracting from the aesthetics of your website. When you do that, your customers, Google, and kittens everywhere will thank you.

Here are some tips to optimize your media:

Images

• Choose the ideal format. JPG is best for photographic images, GIF or PNG for images with large areas of solid color.
• Properly size images. If an image is displayed at 800px wide in your website, there is no advantage to using a 1600px wide image.
• Compress the image file. In addition to being the top image editing program, Adobe Photoshop has amazing image compression capabilities, and starts at $9.99/month. There are also free WordPress plugins like Imsanity, EWWW Image Optimizer and TinyJPG that will automatically compress uploaded images.

Video

• Choose the ideal format. MP4 is best in most cases because it produces the smallest file size.
• Serve the optimal size (dimensions) based on visitors’ screen size.
• Eliminate the audio track.
• Compress the video file. I use Adobe Premiere most of the time, but Camtasia is a solid choice too.
• Minimize the video length.
• Upload videos to YouTube and/or Vimeo and use their iframe embedding code.

Mistake 5: Not prioritizing responsive design

We live in a mobile world. In fact, Google is so serious about catering to mobile visitors, that they rolled out their mobile-first index near the end of 2016, which means they will create and rank search listings based on the mobile version of content rather than using a separate index for mobile and desktop.

Most competent web designers today understand the importance of responsive design, both because of the rapid rise of mobile traffic, which has surpassed desktop traffic, and because of the importance Google has placed on it.

While it’s not yet an direct ranking factor according to Google, responsive design is an indirect ranking factor because of it’s impact on user experience. If a visitor using a mobile device arrives on a website that isn’t responsive, they will return to the search results to find one that is. That has a direct impact on your bounce rate, pages per visit, and time on site, which are all direct ranking factors.

Google has a handy tool to test whether your website is mobile-friendly, but it’s also a good idea to test it on an actual mobile device to make sure it functions the way you expect it to. If your site isn’t mobile-friendly, consider using a responsive framework like Zurb Foundation.

Mistake 6: Changes in URL structure

Changing a website’s URL structure, if handled incorrectly, can completely destroy organic rankings and search traffic. That’s not to say you need to avoid it though, because if handled properly, it can have a positive impact on your website.

Redesigning a website doesn’t always result in a need to change URL structure, but when moving from a static HTML site to a CMS like WordPress, it’s usually unavoidable. Most websites can benefit from implementing a hierarchical URL structure and a redesign is the perfect time to do it. The key is to identify all of the current pages on your website and implement a 301 redirect to the new location of each page.

Tools like Screaming Frog will eliminate most of the heavy lifting by generating a list of of the spiderable pages on your website, which you can then paste into your .htaccess file. Then you simply add the necessary information to tell bots and browsers where to go for each new page, as such:

Redirect 301 /old-page-1.html https://your-domain.com/new-page-1/
Redirect 301 /old-page-2.html https://your-domain.com/new-page-2/
Redirect 301 /old-page-3.html https://your-domain.com/new-page-3/

To be safe, it’s a good idea to manually test each redirected URL in a browser, and then pay extra attention to Google Search Console for a few weeks to ensure your website isn’t generating any 404 errors.

Mistake 7: Ignoring website security

Many people think they don’t need to worry about website security because “no one would waste their time trying to hack my tiny website.” That’s misguided thinking. Hacking is a numbers game, and most hackers leverage tools to exploit common weaknesses on a large number of websites. They may be trying to:

• Intercept sensitive data
• Infect other computers with viruses and/or malware
• Embed links to other websites
• Amuse themselves

If your website is hacked, there are a few potential consequences you could face, depending on what the hackers do.

For example, if they hack your website to distribute a virus, Google will highlight your website in the search results as a security risk that visitors should avoid. If this happens repeatedly, Google may deindex your website.

On the other hand, if they hack your website to embed links, Google may issue a manual penalty for unnatural outbound links. After you’ve removed the embedded links, that penalty may last a few weeks, or may last so long that it makes more sense to start over with a new domain.

So how do we properly secure our website?

Truth be told, it’s impossible to completely secure a website. If it’s online, it can be hacked. It’s just a matter of time and resources. That’s why most computers at the CIA and NSA are not connected to the internet.

The idea is to disincentive hackers by making it a waste of their time and resources to try hacking your website. They are looking for easy targets, so if you ensure your website isn’t one, they will move on to the next one that is.

I wrote a detailed article on WordPress security that outlines exactly how to secure your website well enough to deter all but the most determined hackers. The short version is:

• Don’t use the default username
• Limit wp-admin to your IP address
• Implement two-factor authentication
• Limit login attempts
• Reduce plugins
• Keep WordPress core and plugins up to date

Mistake 8: Failing to test mission-critical elements

If certain parts of your website don’t work, it becomes virtually useless. Whether you’re starting from scratch or redesigning an existing website, it’s essential to test any mission-critical elements, including:

• Contact forms – Check all form settings and send a test submission to confirm that all necessary recipients receive the appropriate message, with all applicable information, and that it’s properly formatted.
• Crawl settings – During development, it’s common to configure WordPress to block search engine bots so as not to create duplicate content issues. After migration to the live server, you need to ensure that nothing you want in the search results is blocked. This is a simple matter of checking your WordPress settings and your robots.txt files.
• Ecommerce – You should run a few transactions in test mode to make sure your ecommerce system works properly, especially if you have multiple product attributes, complex shipping rules, or highly-customizable products. Don’t stop with the test transaction though. I always like to run at least one live transaction to make sure that everything works exactly as it should. You can always void it out afterwards.

Mistake 9: Making excessive http requests

Every single http request adds to the time it takes for your pages to load. This includes scripts, CSS files, and images. You may not think you have all that many, but I’m willing to bet you’ll be surprised when you look at the 1) rendered code; 2) all images that are embedded; 3) all of your plugins and widgets; and 4) all tracking and ad serving scripts you’re using.

The little things add up quickly

Long before most of you were in the digital marketing industry, and even before many of you were born, most people connected to the internet through dialup modems. At that time, most connections were a paltry 56 Kbps, which meant every single image dramatically increased the time it took a page to load. It was common to wait for 30 seconds or more for the average web page to fully load. To compensate for this, we would break images up into smaller pieces so that a web page could render progressively rather than waiting for a single large image to load.

Today, most of us are blessed with broadband. The 3G internet connection on your mobile device is over seventy-one times faster than the fastest connection that was available during the dial-up and ISDN days. As a result, people have gotten sloppy. They’ve gone from trying to keep an entire web page well under 100KB, to a time when a single background image may be well over 100KB. Many people think we don’t have to worry about trivial things like image size anymore, but that’s simply not true.

As Dave Davies pointed out in a recent episode of Webcology, it’s very likely that we’ll soon come full circle to a point where people who are dependent on tools like site builders and pre-built themes won’t be able to compete with those who know how to design and build websites from the ground up.

When you’re capable of hand crafting every part of a website, you’re armed with a powerful knowledge that enables you to fine tune and optimize how it’s presented to search engines. That’s knowledge that site builder jockeys, WYSIWYG draggers and droppers, and theme modders simply don’t have.

And with the emphasis that Google is placing on page speed (real-world page speed, not just the dumbed-down metric in their tool), that knowledge is going to become essential in the coming years.

A great example of this kind of knowledge is sprites, which you may have seen in older video games like the original Nintendo. Since game consoles didn’t have much processing power back then, developers would manipulate a single large image to display only the relevant portion. This meant that they only had to load one image, which significantly reduced the processing power required for a game.

Web designers can use this technique to significantly reduce http requests by combining multiple small images into one larger single image. Due to how overhead and compression are calculated, this usually results in a smaller file size compared to the sum of several smaller files, plus, only one file is downloaded.

Chris Coyier does a great job of explaining exactly how to implement CSS sprites over at CSS tricks.

It doesn’t end with images though…

Plugins, widgets, and ads, oh my!

Many WordPress plugins load at least one JavaScript and CSS file. Some load several of each. Let’s assume you have just 5 plugins that each load only one extra JavaScript and CSS file—that’s an extra 10 http requests!

If you want to see how bad it can get, here is a section of code from the head a website that was recently disabled because of the load it placed on the CPU. The worst part is that this image only displays about one-third of the JavaScript and CSS files loaded on every single page of this website!

Every social widget, like the handy little Facebook page plugin you see on most websites, loads an external JavaScript file. (Which is even worse for page speed than an external JavaScript file that resides on your own server.)

Ad serving scripts, like AdSense, Outbrain, and Taboola, as well as tracking scripts like Google analytics, all use an external JavaScript. As we’ve already covered, external scripts create a significant negative impact on page speed, but it’s especially bad with ad serving scripts because of the heavy lifting they do to dynamically create ads on the fly.

Mistake 10: Skipping the final launch checklist

There are a tremendous number of individual tasks within a web design project, and often numerous changes throughout the project, which makes a final launch checklist absolutely essential.

This ensures that you don’t overlook something important, and believe me, it’s easy to do that. Don’t make the mistake of thinking that because you’ve been designing websites long enough, you don’t need to worry about a checklist. I’ve been doing this for nearly 20 years and still use a checklist every single time.

Here are some of the things that should be on your final launch checklist:

• Valid HTML/CSS
• Cross browser compatibility
• Tested on multiple devices
• Menu display and functionality
• Broken links
• 301 redirects
• Missing pages / 404 errors
• .htaccess
• Robots.txt
• WordPress crawl settings
• Sitemaps
• Page speed
• Caching
• Responsive design
• Forms (Contact forms, email subscription forms, etc.)
• Ecommerce functionality
• Social sharing buttons
• Interactive elements
• Multimedia
• Favicon
• Titles
• Meta descriptions
• Alt attributes
• Analytics
• Google Search Console / Bing Webmaster Tools
• Remarketing tag / Facebook pixel
• Minified HTML, CSS, and JavaScript

Website Auditor

Learn About Our Site Auditor

Analyze over 20 different technical SEO issues and create to-do lists for your team while sending error reports to your client.