Article Title

Author Name

{CATEGORY}

{date}

{#hash1}

{#hash2}

Illustrations by {name}

{excerpt} A sprint is when a company or team dedicates a certain amount of time (around 2-4 weeks) to work on a specific project at full speed.

{0} Min read

Profile picture of Lilly Smith

3 min read

Editor X's site checker is the automated QA designers have been asking for

Product manager Liron Monitz and UX designer Hagai Shalev explain how they designed the QA tool, and how to use it.

Editor X's site checker tool shown over a website design.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

You don’t need us to tell you—there are a lot of unseen variables at work behind the scenes of a website to make its final ux seamless.


That’s where Editor X’s site checker comes in. The automated tool, which you can find under “tools” in the top bar of your site’s backend, scans a selected page, identifies issue areas, and navigates to them so you can fix them (or ignore them) before going live. As of now, it can check for ten wide-ranging trouble-makers, including overflowing content, readability, hidden elements, and missing links. (See the full list here.)


Here, Editor X product manager Liron Monitz and UX designer Hagai Shalev explain how it’s useful (when “reality bites you in the ass”), a time they really could’ve used it, and how it can help you learn as you go.


Quickly check open issues like low-res images and text using the site checker.



What is the site checker, and how does it work exactly?


Hagai Shalev: The site checker is a tool to QA your site before you publish it. It goes through different issues you might have, like overflow content, heading types, errors in your code, et cetera, so you can find out what’s wrong with your site in a very quick way. Then you can deliver a much better product to your clients—or to your online audience.



How is it useful for designers like yourself?


HS: A designer works like an explorer. As a designer, I’ve never had a completely linear process where I make a design in Figma and build it, and it’s exactly the same. A lot of the time, you imagine one thing and then reality bites you in the ass.


"I’ve never had a completely linear process where I make a design and build it, and it’s exactly the same. A lot of the time, you imagine one thing and then reality bites you in the ass."

So then you have to adjust, and be creative, and figure out different solutions. You might move things to the right of the screen or test different font sizes. That’s why, even if you have a pre-made design, you are exploring as you go, moving things around, and making changes. The site checker will then help make sure everything is still correct before you launch the site.



Tell us about a time when you could’ve used a tool like this. Is there a mistake you've made in the past that the site checker would’ve caught before going live?


HS: As a designer, I don't have a SEO mindset. I don’t understand how Google codes my website. So a lot of the time, I see things through the lens of aesthetics, but I might miss the readability of the text, for example. The site checker completes the role of the designer and extends your skillset, by confirming the right heading to use, the right font size that’s accessible, et cetera, to make a better site for my users and for Google.


Overflow content is another tough one to figure out. You used to have to troubleshoot in the editor while working. So you’d publish your site and then it’d move sideways, and you wouldn’t understand why. You’d have to go layer-by-layer and figure out which layer is overflowing. Now all you have to do is run the site checker and it will tell you where there’s overflowing content, and you can just delete it or move it back to where it should be.


Liron Monitz: It also catches some of those last fine tunings designers sometimes forget because the site looks amazing—like unlinked buttons, or missing social links.


At Editor X, we try to give designers full design freedom to place content where they want, and to set any size for text. So we had to add a tool that tells them, “Ok, that text is unreadable. Here’s how you can fix it.”


Find and correct missing web and social links in a few easy steps.


At what point in the process should a designer use the site checker tool? How long does it take to scan a page or site?


LM: I’d say page by page. You find issues as you go, and then you understand how to build your next page. If you realize your images are low-quality, it’s better to know on the first page, for instance.


It’s also an education tool: Each issue is linked to articles that explain how to solve the issue and why it’s important so you can learn about accessibility or SEO just by reviewing your own site issues.