I think it's time someone started talking about the cost of bad code.
A Google study showed if a website takes just 3 seconds to load, it'll lose 53% of its traffic.
It’s the reason Google added a ranking penalty for sites that take longer than 2.5 seconds for their largest content paint.
Yet despite this the average website takes 27.3 seconds to load on mobile.
The reason for this is because the Web Design Industry as a Whole is a MESS! Where instead of focusing on producing high-quality code, it’s all about how quickly you can complete the project.
This has led to a decline in the overall coding standards. And a dependency on mass-produced frameworks, which has led to mundane, plain, ordinary designs, where everyone looks the same, stifling creativity and innovation.
These frameworks offer a range of ready-made templates and components, making it easier and faster to build websites.
However, this convenience comes at an unforeseen cost.
These frontend frameworks come bundled with a bunch of code for features that most users will never use. This excess code affects website performance, leading to slower loading times and cost the business owner money that they never see themselves loosing and no one ever talks about because everyone is doing it.
And these frameworks limit the ability for web developers to tailor website experience.
This results in websites that look and feel similar, lacking individuality and failing to make a lasting impression on visitors.
And in turn it devalues the web design profession.
Because of the emphasis on quick turnarounds, clients may prioritize finding the cheapest and fastest solution over the best quality work.
This puts talented web designers at a disadvantage, as their expertise and attention to detail may be overlooked in favor of a quick and inexpensive alternative.
Because of this every industry is flooded with subpar designs.
W3C validation
Testing millions of websites have shown that 97% of websites have coding errors that are easily identified using tools like W3C.
The reasons for coding to W3C standards are too numerous to list but I’ll give you a couple.
When you fail to validate your code to W3C standards, your website suffers from errors, poor traffic, poor formatting, and readability problems.
W3C web standards are optimized for browsers, security, privacy, web accessibility, and they make the web work for everyone!
Professionals validate their code.
Yet despite this 97% of websites fail W3C validation!
If a developer does not validate their code, how can they be sure they didn't forget to close a tag?
One of the most important parts of building a website should be making sure the code is W3C valid.
It's the first step in making sure your website is crawlable, optimized for the search engines, and ADA compliant.
A study by Moz found that W3C validation improves search engine rankings. Google said W3C validated sites rank higher in the search engine results page.
W3C validation helps to ensure that websites are compatible with and work on all modern web browsers. A study by W3Schools found that websites with valid code are more likely to display correctly across different browsers.
W3C validation Improves User Experience
A study by Jakob Nielsen found that websites with valid code are more likely to provide a positive user experience. Because valid code is more likely to be rendered correctly, faster, and with fewer problems in browsers.
How can a professional web developer introduce a website that doesn’t meet all the standards?
I can’t answer that question but I can tell you (RNIB) found that 97% of websites fail to meet the basic accessibility guidelines set by the W3C.
What Makes a Good Website
If you are a coder and someone asks you what constitutes good code then you have to say the quality of the code.
The way you establish the quality of the code is that it meets all the standards and doesn’t have any errors. The way you find errors is by validating the code and if you can’t validate the code how can the developer be sure he didn’t forget to close a tag?
A professional writes code that meets all the standards and validates so a good website should do the same.
And W3C validation is the first step towards being ADA compliant.
ADA Compliant Websites
And Overlays and Plugins are nothing more than Band-aid Fixes for bad code.
There is a 98% chance your current website is NOT ADA compliant!
According to the 2020 Web Accessibility Annual Report where they checked more than 10 million websites found that 98% are not ADA compliant.
They found that 98 percent of websites fail to comply, 52 percent of images fail to comply, 89% of pop-ups fail, 71 percent of forms fail, 76 percent of icons fail, 83 percent of buttons fail, and 22 percent links fail.
showed an average of 56.8 errors per page.
And Overlays do not fix accessibility issues.
Overlays do not make a website compliant!
To start with the reason for the law is to give everyone equal access to your services and products. However, since the plugin or overlay needs some type of input to be activated ... it is already not treating everyone the same.
In addition to that 75% of the things that need to be checked need to be done manually. Accessibility overlays can make sure that the pieces are in place but it can’t make sure that the content and information is set up correctly.
So at its best it can only fix about 25% of the problems.
Overlays give a false sense of security.
An overlay gives the impression of fixing your site without actually fixing your site. You've still got bad code on your site but now it's hidden behind more options and more confusion.
The Reason Your Website needs to be ADA Compliant is because it's the law.
Fines can run $50,000.00 per problem and lawsuits can run you $100,000.00 or more.
And you can get sued and fined over and over again until you fix the site.
There has been a steady increase in lawsuits for non compliant websites as well as government fines. And the business owner is solely responsible for making sure their website is ADA compliant.
And while a small website can cost you $5,000.00 or more.
Fines and lawsuits can run you $100,000.00 or more and you can get sued and fined over and over again until you fix the site.
Your Also Losing leads
Not having an ADA compliant website means you're turning away a lot of people.
In 2010, 8.1 million Americans were considered blind or unable to see, 7.6 million Americans had difficulty hearing, and 19.9 million people had difficulty lifting or gripping objects like a touch screen, trackpad or computer mouse.
Accessibility overlays also hurt website performance!
Plugins and overlays add friction to the user experience. And ad blockers sometimes block overlays.
Overlays are scripts hosted on third-party sites.
These plugins and overlays always create a bad user experience because they always slow a site down. Plugins and overlays add friction to the user experience that wouldn't be there had the site been coded correctly.
They add more code to the site and the more code a site has the more ways it can be hacked and each line of code slows the site down.
Creating a good web experience means fixing the code!
Fixing the code, validating it, and making it ADA compliant.
Because if the site hosting the plugin or overlay is slow to load, off line or any number of problems you have no control over it.
Web Page Speed
There is nothing that affects website visibility more than Page Speed!
To Start with Bigger Sites Rank Better!
A larger site will out rank a smaller site because with a larger site you're able to control the flow of your internal link juice and you’ve got more pages to receive external links.
A larger site will have a Higher Domain Authority!
Large sites have more pages to rank and tend to generate more links and achieve higher domain authority. When you have more page links to share and distribute, you have greater potential to earn a diverse mix of high-quality links.
And you have more internal link juice to control, unless the first content paint takes more than a second.
Because Google has a Crawl Budget
Google doesn't have unlimited resources to spend crawling websites.
Crawl Budget
The Crawl Budget is the number of pages Googlebot will crawl within a given time frame. If a page takes more than a second for the first content paint it can lead to a lower crawl budget, meaning fewer pages from your site get indexed.
Google doesn't have unlimited resources to spend crawling websites. That's why there are crawl budgets in the first place. Basically, it's a way for Google to prioritize which pages to crawl most often. If Google's resources are limited for one reason or another, this can affect your website's crawl limit.
Google has a Crawl Rate
Crawl rate is the number of requests a search engine crawler makes to a website in a day and was introduced to reduce server overload.
If your site takes longer than a second for the first content paint, Googlebot will reduce its crawl rate to avoid overloading your server, leading to less frequent updates and potentially missing new or updated content.
Google has a Crawl Depth
If your site takes longer than a second for the first content paint the site may not have their deeper pages crawled and indexed, affecting the visibility of those pages in the search results.
Crawl depth influences how efficiently Google can index your content. Googlebot has limited time and server resources. Therefore, the number of pages Googlebot can crawl on your site during a specific time frame, is finite.
Google has a Crawl Timeout
Googlebot has a limited amount of time to crawl each page. So if your site takes longer than a second for the first content paint, Googlebot may abandon the crawl altogether, leaving your pages unindexed.
Your crawl budget refers to the number of pages Googlebot can crawl on your site within a certain timeframe. If a page exceeds its crawl budget there will be fewer resources for crawling other pages on your site.
Core Web Vitals
In May 2021, Google introduced Core Web Vitals. You can check these yourself using Google’s Lighthouse tool. The first content paint needs to be in under a second to prevent crawling problems but the largest content paint needs to be under 2.5 seconds.
LCP
One of the key components of Core Web Vitals is Largest Content Paint (LCP). Google considers an LCP of over 2.5 seconds as needing improvement. LCP measures the time it takes to render the largest content element visible in the viewport.
Google has clearly stated that your site should achieve an LCP under 2.5 seconds to avoid performance issues. If your largest content element takes longer than this to load, it indicates a problem that could negatively impact your SEO rankings.
Optimizing for Core Web Vitals, particularly LCP, is crucial for maintaining and improving search visibility.
And Then You Have User Experience and Engagement
Google’s own research indicates that bounce rate increases dramatically as page load time increases.
Bounce Rate
Bounce rate almost triples when page load time exceeds three seconds. This means users are more likely to leave your site before it fully loads, negatively impacting user engagement metrics that Google considers in its ranking algorithm.
And You’ve Also Got User Experience and Session Duration
Search engines like Google look at user engagement as a signal when ranking websites because they want to send people to websites that provide a great experience. The longer someone stays on and the more pages people click on is an indication to Google people are enjoying their web experience.
Studies have shown that 53% of people will leave a site if it takes longer than 3 seconds for the largest content paint.
Direct Impact on Conversions and Revenue
Amazon: Found that for every 100 milliseconds of improved load time, there was a 1% increase in sales.
Web Page Speed Affects Conversions!
- Amazon: Found that for every 100 milliseconds of improved load time, there was a 1% increase in sales.
- Mobify: Reported a 1.11% increase in sales for every 100 milliseconds improvement.
- Walmart: Saw a 2% increase in conversion rate for every one-second improvement in page load time.
- Cook: Observed a 7% increase in conversions for every 850 milliseconds improvement in load time.
Let’s say you’re spending $1,000 a day on ads and getting 1 sale!
To double your income you could spend $200 or you increase conversions by just 1%.
Increasing page speed by 100 milliseconds!
The average site takes about 23.6 seconds to load on mobile, if you get that down to .8 milliseconds
23.6seconds−0.8seconds=22.8seconds, 22.8seconds×1000milliseconds/second=22,800milliseconds, 100milliseconds divided 22,800milliseconds =228
Therefore, if a website's load time is reduced from 23.6 seconds to 0.8 seconds, they could see a 228% increase in sales based on Amazon's math.
However if a web developer doesn’t care about the things you can’t see they will most likely not care about the things you can see.
For example, let's take the hero image.
Over 90% of people will leave a website in the first 15 seconds if the hero section isn’t designed to grab their attention.
And having a good looking website doesn’t matter if it's not getting you new clients.
The website owner believes they are the hero of the story!
However the website visitor doesn’t care about you, your ratings, past clients, or education because in their head they are the hero of the story.
Forget about your pedigree, past clients, seven-figure income and think about the questions the clients are asking. Because if you can make the website visitor the hero of the story you can go from obnoxious, boring, and mundane, to a website that's getting clients.
The goal of the page should be that the end user never has to scroll, much less reaches the bottom.
To do this you need a powerful hero image and a call to action that forces the visitor to click. A hero section that convinces the visitor that their life would be better, happier, and more productive if they just clicked the call to action.
And it's got to be done in an area the size of a business card.
Which means your hero image should focus on the main keyword of the page, clarify the offer, enhance the flow, nod at your Call To Action (CTA), show your benefits, answers some questions, and paint a picture that puts your customer in the center of it, playing the part of the hero.
And giving too much information in the header can cause information overload.
It’s the reason that study after study shows sliders and videos kill conversions.
You’ve got less than a second to convince someone they’re in the right place. To do this you have to be extremely clear about what you're promising.
Once you’ve communicated the promise, it’s your call to action job to deliver on that promise.
It’s the website's job to keep and Direct the Flow of the user's Attention!
And to prevent scrolling your website needs to be designed to show the visitor as the hero of the story. Because people will always see themselves as the main character in the story of their lives.
This means you have to position yourself as the guide to the hero and the problem as the villain.
To convert the hero into a potential client your website needs to convey Empathy and Authority. Which means connecting with your potential client emotionally while showing authority.
Step 1
- Decide who should care and why?
- What do you want people to do?
- What are the goals of the website?
Then all that information has to be broken down into a sentence with a call to action that represents the goal of the page, along with an image that is powerful and creates an emotional reaction with the visitor.
You have to have an image that evokes an emotional response and makes the visitor feel like the hero of the story, and then comes the title, the entire idea summed up in a sentence and a call to action.
And I’ve heard people say things like you don’t need a website all you need is a landing page and you can build one on third party sites but the reason you want to have your own website is because you want full control over your business.
You don’t want to get caught up in an algorithm, get banned, and not even know why.
And you don’t want just one landing page, all the people coming to your site are not the same so your landing pages should not be the same.
Each landing page should be designed for a different group of people.
Let's say you're selling motorcycles, some people are looking to save on gas, some are looking to travel, and some are looking to jump ramps.
And then for each group you need a page for the people who have just become aware of your product or service. They may hear about you from your advertising, social media, or even word of mouth and you need a landing page for each of those groups.
Some already know about you and are interested in learning more.
Others are ready to make a decision and want to dig deeper into your pricing and packaging options.
While others are ready to take action.
You need a landing page for the different personas, age, sex, and demographic.
Some landing pages are making an offer, others are trying to upsell, and others are giving away ebooks.
Each landing page is designed to move them on to the next stage of the buying process.
And then you study your stats and do split testing to find…
- Where are the bottlenecks in your sales process?
- Where do you tend to lose track of potential customers?
- What specific actions typically result in a sale?
You look at the stats, tweak your landing page, finetune it and test again.
You can also build an automated email follow-up campaign that speaks directly to each potential client from each landing page.
After all, you're more likely to convert if you follow up within the first five minutes after they express interest? Wait 30+ minutes, and your lead is 21 times less likely to turn into a sale.
This also allows you to deliver the right message at the right stage of the sales funnel.
Custom code goes far beyond just unique, memorable, websites that truly stand out. Clients get more than just a faster, well-crafted website that can yield higher profits through better user engagement, brand recognition, and overall business success.
The focus on mass appeal and the reliance on generic frameworks have led to a decline in creativity, uniqueness, and overall standards.
But when you start writing your own code not only does this open up an unlimited array of ideas as far as the design goes. It is crucial for the industry as a whole to recognize the value of thoughtful, custom design and to prioritize quality over speed. Only by doing so can we elevate web design to its full potential, creating online experiences that captivate and inspire users while driving business growth.