Good Design Deserves Good Code

1. Google Lighthouse Score

This is a no-brainer, you must run a Lighthouse test on the website to see how it holds up against Google’s metrics. Install the Chrome browser and load up the staging website, simply run the test right in the browser’s devtools. Note that the test only runs on a particular page, so you would need to run it on every page (or just the essential pages) for precise results.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. — Google

Simply put, the Lighthouse score gives Google insights about how good (or bad) a web page is. If Google considers it good, then it will obviously rank higher in their search engine. The test audits many front-end aspects of a website so the front-end code must be solid in order for a web page to score high in each metric.

Looking at all the data might seem overwhelming and complicated, but you only need to pay attention to the score of each category (biggest numbers on top of the report). To score 90+ (the green zone) on performance, accessibility, progressive web apps, SEO, and best practices is not hard at all. Lighthouse is only running a series of automated tests to check the foundation of a web page. If your front-end developers are doing their job (writing semantic HTML and following modern day web best practices), your website should have no problem reaching the green zone.

You would not buy a house with poor foundation. You certainly should not pay for a webiste with poor foundation.

2. Web Semantics

After you got the automated tests out of the way, let’s dive into something more technical. Load up the staging website in any desktop browser, right click anywhere on the page and click “View source”. It will display the markup of a web page in HTML. I know, it is intimidating to look at so much code, but trust me, you can easily spot some patterns within the code.

Do a quick find in the HTML for the keyword div. Do you see an insane amount of matches (for context, a complex website like YouTube would return about 600)? Is EVERYTHING written as a <div> element? If the website is a div galore, you should fire the web agency right away.

Look, we are not living in 1999. Any good front-end developer nowadays should do you the common courtesy of writing proper HTML. While a generic element such as <div> can be used to build most things, there are landmark elements such as header, main, footer, section, nav, aside, and more. You should be watching out for these standard landmarks when inspecting a web page.

Landmarks provide a powerful way to identify the organization and structure of a web page. The structural information conveyed visually to users should be represented programmatically in the markup using landmark roles. — W3C

Note that <div> is not evil, it just should not be the start of every line of code.

3. A11y (Web Accessibility)

You created the design with a11y in mind, but did the developers excute with the same level of care you had? Luckily there is a Chrome extension for you to check the basic stuff easily. Install the Chrome axe DevTools extension and load the website, then open up Chrome devtools (press option + command + i or go to View > Developer > Developer Tools in the menu bar) and navigate to the axe DevTools tab. Click on Scan all of my page to run a test.

Once it finishes running, it will show you a number of potential issues on the particular web page. You can click into each issue to see the reason for it and how to solve it. Keep in mind this only checks the most basic stuff, you should consult an a11y professional for better findings. What you should not do is to pay for an overlay solution that will get you sued. Read more facts about accessibility overlays here.

As a designer, you would want the design to reach as many people as possible. As a human being, you would want the website to be usable for all groups of people. This is why we all should pay close attention to a11y.

Final Words of Wisdom

When working with a web agency, sometimes you don’t get to have their most qualified developers to work on your project and you end up with a poorly built website. Knowing how to check a website’s quality will make sure if your money is well spent. If possible, try to write something into the contract to ensure that the web agency would deliver good front-end code. Your good design deserves good code.