Little things that make the user’s world better. Believe. Hope.
It is common that front-enders have to take on the HTML/CSS developer’s mantle. The biggest trap to avoid here is being overconfident. Why? Because even if the layout looks great on one desktop, it doesn’t necessarily mean it’s that ‘great’ on other screens, browsers and resolutions.
Assume that you’re given a project. Let’s say it’s a website. The website design is presented as a mockup: in Figma, Zeplin (Sketch) or Adobe XD. So, you took the project design and already created the first HTML/CSS template. It’s time to start front-end performance testing. What steps to take? Let’s go ahead and figure this out!
This article will be super helpful for you if:
- You’re a front-ender who just started this thrilling, misery, and filled with pain front-end testing journey!
- Software development is your area of focus. At least to make sure that you never screw things up like this.
Now let’s get straight to the point.
Digging deep into front-end testing: compare mockup vs. final result
Learning from other people’s mistakes — this is truly effective. Front-end testing is no exception. Check out what might eventually happen if you skip the stage of comparing the web pages against the mockup images.
‘Contacts’, you’re wrongly placed!
Above you can see the ‘Contact Us’ screen from the Purrweb website. We designed and developed it last year. The mockup i.e ‘As it should be’ is on the left side. What you can see on the right side is ‘As it was’.
One more example.
Space between badges is different — this is a mistake
Another case, the same mistake. The mockup is one the left, the actual result is on the right. Here something went wrong with the badges.
To avoid front-end testing mistakes, check out if the element sizes, fonts, and colors are identical. To achieve pixel-perfect accuracy, try Pixel Perfect (the tool’s name speaks for itself, doesn’t it?).
Comparing web-pages against mockups is tricky. However, designers become disappointed when this step is neglected — they ‘draw’ mockups. The clients won’t be happy as well — the website which looks identical to ‘already approved’ mockups is exactly what they’re expecting from you.
Check the website at different screen resolutions
What happens if you don’t take into account the screen size? To give you the answer, let’s take a look at a few mistakes we’ve made while developing our website.
Here the screen height is less than 700px, so the ‘Contact us’ form got cut off, while the ‘Send’ button disappeared entirely
On what screens will the website be used? — figure this out first. It helps you minimize the risk of unexpected surprises in the future, while the users will be able to easily open it up. Even on a very small screen.
Here are the top 10 screen resolutions used by Purrweb website’s visitors:
At the very minimum, we needed to check the layout for each of them
Users might have widely different preferences. Some may prefer MacBook Air while others may love huge displays. But regardless of their preferences, all of them expect to see clear and high-quality websites — it’s great when the layout is not an obstacle for that.
Test cross-browser compatibility
One more thing to take into account in front-end testing is that you should move beyond Google Chrome and test the website performance in Safari, Firefox, and Microsoft Edge as well. To avoid a situation like:
Fonts seem bolder in Firebox
In this example, the ‘Search’ placeholder almost disappeared
Safari again. Here we can see the horizontal scroll bar issue
It seems that I’ve already shared too many screens of the Purrweb website. But it’s totally okay, isn’t it? Let’s check one more example.
In MS Edge, both the menu and the ‘Read’ button are highlighted while the arrow icon looks like a square block
It’s likely that you should also view how the website performs in ‘almost dead’ Internet Explorer. Purrweb website’s statistics just prove the fact some people still use it.
According to the statistics, IE is in the top-10 most popular browsers. See?
So, when it’s time for front end testing, you should take care of IE users. Simply because this issue may occur:
In IE, the width of the menu text and the text block aren’t adjusted
Supporting Internet Explorer has become a headache over the last few years. When it comes to browser compatibility, developers happen to ignore it. BUT! IE is alive as long as IE users live, right? So, test your website in this browser as well — in case it doesn’t look good, discuss it with your team (you can start with project managers).
Little advice: Mind that Google Chrome on Mac OS is completely different from the Windows version.
Test the website for mobile-friendliness (crucial for front-end testing)
Below is what regular users won’t make a drama about, while designers would freak the hell out.
This thing is…randomly placed icons!
How often do you open websites on your smartphone? I bet you do it all the time. 😀 Simply because today’s smartphones are as powerful as PCs were in the 00’s — we use them for studying, reading, and watching videos. So, if the website is used on smartphones (most likely, it is), make it mobile-friendly. Why? To ensure the users won’t put their eyes out once they see how terrible the website is on their mobile devices.
Check how long texts perform in input fields
Is it important in front end testing? Definitely, it helps you avoid the situation like this
Let’s say you’ve built a sign-up form where users are expected to share their names, emails, and passwords. So, you need to somewhere display the user’s name. It might be a super short name like ‘Ted’ OR it might be something like ‘Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky’. And yes, this is a real name, not my crazy imagination 😀 The name like this one can significantly spoil the impression of the website.
Front-end testing checklist: Why to test the layout?
Layout is a crucial part of every web project. This is the very first thing users pay attention to. The layout is the cover that affects the way we judge things. So, making it awesome is your sacred duty.
Because:
-
- Someone already paid money for it.
- Even tiny details matter.
- A consistent layout in Chrome is the easiest thing you can do.
These steps will help you drastically boost project performance. If you put them into practice, it’s unlikely that QA-specialist, client or manager will ever ask you to adjust the layout for, like, 100 times. And you’ll be happy!
