We will not contact you via WhatsApp or other messaging platforms. Please use our official email addresses or telephone number to speak with us.
本公司不會通過 WhatsApp 與您聯繫。請使用我們的官方電子郵件地址或電話號碼與我們聯繫。
| 12 min read

10 Critical Browser Testing Tips and Precautions You Need To Know!

Here are 10 mobile website testing tips for front end [web] development to help you avoid pitfalls and flaws in your cross-browser testing.
10 critical browser testing tips banner
Tiffany Pau
By Tiffany Pau
January 24, 2022
Share:

Introduction

Have you ever spent hours testing a site on different browsers and devices only to find issues on some of them? In this post, we’re going to help ease the pain of testing your site.

With our 10 browser testing tips and precautions, we’ll help you keep your users happier by making sure everything looks beautiful, works as expected, and doesn’t break anything else on other browsers or devices.

10 critical browser testing tips

Should you go big (screen) or small (screen)?

If you're a designer, ready to start with your web design, listen to us first. It is crucial to be aware of how the resolutions flow between different screen sizes.

One of the main challenges faced by designers is design proportions. With a range of available screens sizes, from 5-year-old phones to television-sized monitors, it's difficult to make the perfect versions for different devices. Users can also drag the browser window with a mouse to make it landscape or portrait. On top of this, users’ chosen resolution and monitor sizes - aren’t all the same proportion of landscape.

There are existing units based on the container or window/viewport size (%, VH, VW). But growing and shrinking every element of the site pixel for a pixel can cause severe slowdown.

Picture this:

We have a square image. We need the height and width to grow proportionally, avoiding turning it into a rectangle.

There is content below it that should never fall below the fold. The user tries to expand or contract the container's height. Should we squash the image into a flat landscape dimension, to preserve the layout around it?

Developers will use the browser’s viewport width to determine breakpoints. If you're making a standard vertical-scrolling, content-heavy website, there is often the greatest width accounted for. If you go past it, the content will no longer continue to widen.

This is where we have a pro tip for you.

The largest size you account for should depend on your userbase. For instance, it might not make sense for you to design a mobile app for TV-sized screens. In cases like these, it also helps to check global recommendations.

Let’s look at an example

We have some content inside a container (the block with the white background). The container’s width is 90% of the screen.

.container { width: 90%;

}

At a resolution of 1280 x 768, a common size of tablets and laptops, it looks as intended.

Responsive container

Let’s now look at the default resolution of some larger Macbooks (1920×768). The screenshot on the right was taken with the Mac bottom dock open. What we're trying to demonstrate here is a common use case in which asking someone for their screen resolution doesn't necessarily reflect what the browser will show. This is because it doesn't take up 100% of the screen when compared with Windows or an iPad, the dock on the Mac can be very large, which takes more height off potential browser window.

Here, the container is still 90% width, which is good. But the text starts to look too spaced out because the widescreen led to more words per line.

Responsive container - wide

A common suggestion is to make the text bigger so the proportions appear the same. But, we only increased the width of the viewport and not the height.

If you add more text content here, its height will increase further. And naturally, things will start to fall further below the fold.

The problem gets worse with ultra-widescreen resolutions. It’s typically not safe to base font size on-screen width or height in particular. You could try changing image sizes, paddings, line heights. But to write special conditions for all possible computer sizes isn't workable.

The safest option here could be to set a fixed container width. This will prevent the content layout from growing after 1280px wide or any other choice. We add more space to the sides, but the content remains intact.

To keep the 90% for the smaller resolutions (when a 1280px wide container would be wider than the screen), we can set the max-width. The result is:

.container {

width: 1280px;

max-width: 90%

}`.container {` `width: 1280px;` `max-width: 90%` `}`

Here’s what it looks like in 1920×768 resolution:

Container

We know that the blank space is not the most desirable, but here’s the thing — the legibility of the site stays safe. This also lets users manually change the browser window size, and zoom in or out.

Portrait vs landscape

If you're designing and developing with responsive principles in mind from the start, it can keep layouts under control. But it is difficult to account for the shortness of vertical space of certain devices.

To solve this problem, you can check it out on a phone or tablet to see if the collapsed columns spaced out perfectly.

Let's look at an example

When you collapse a row with text and image, is it too tall? If the text goes underneath, is the page still readable, especially for portrait images?

Desktop: When we look at a simple row, a portrait image in a 33% wide column looks good.

Container

But when it comes to mobile websites, the columns collapse, and the image becomes 100% width. Additionally, the text is pushed very far down.

Container

Common misconception

People often think that the solution is a portrait image for desktop, landscape, or square for mobile websites. But here’s why it doesn’t work: if the image has any important information, it could be sloppily cropped. Plus, it is additional work for a client to give two images.

Manually cropping or creating a landscape version sounds doable, right? But if this callout has to be used across a thousand articles for important images in each, it would be a hassle to manually manage it.

Ideally, site content is planned before the web design phase, so these can be flagged early on. If this isn’t the case, you might want to wait for site content to be finalised first, so you can find the best solution.

Compatibility of features or libraries

Finding compatible features

Here’s a quick question for you: do you think multiplying layers and smooth scroll could work seamlessly on the browsers you are targeting?

Tools such as Sketch and Figma offer quite a few new CSS features and filters, but it’s important to know that everything cannot be used on all browsers. We recommend using CanIUse.com to catch issues early on.

Resolving combination issues

Sometimes even when you find compatible features, a combination of them could cause issues. Let’s look at an example.

Example for combination issues

There is a navbar overlaid on content which is intended to be visible on dark and light backgrounds. This is done by inverting the content behind it. The backdrop is blurred for the overlay’s readability.

We use this CSS:

.sticky-header {

mix-blend-mode: difference; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);

color:white;

}

The result in Chrome on desktop (Version 96.0.4664.110) looks as intended.

Black background

Black background


White background.

White background

The issue arises on Chrome on an iPad.

Black background:

Black background 2

White background:

White background

And you’ll find the same issue in Safari as well, across both devices. The blur rendering is different - and the invert doesn’t work on white. When you do remove the blur, the issue with the white background invert is fixed, but readability is lost in the process. This is why we need to find a balance.

White background

If there's a required feature in the design phase that's on a shaky footing, it could be useful to do more research into creating mockups and catch compatibility issues early on.

Deep dive into form elements

Let’s look at inputs, text areas, selects, checkboxes, and others amongst form elements. Sometimes these are straightforward with CSS - making corners round or sharp, adding padding, changing borders and fonts.

A common problem is with selecting (dropdown) element arrows. If you’re going for a custom UI, disabling the default appearance across all browsers could come in handy.

webkit-appearance: none;

moz-appearance: none;

ms-appearance: none;

o-appearance: none;

appearance: none;

And if you need to support IE11 or below, you can select::-ms-expand {display:none;}

Let’s look at an example

When you’re going for form elements, even without heavy customization you could end up facing unexpected results. For example, the following select and input elements are using Tailwindcss 2 defaults and the following simple CSS:

background:transparent;

border: 1px solid black;

Mac, desktop Chrome:

Select box

But in iOS Chrome, the background property caused the arrow to disappear. In such a case, adding a bit of custom styling could help.

Select box

Make testing on real mobile devices a priority

Of course, responsive layouts can be tested by resizing a browser window with a mouse. But if you think about it, it’s always better to test touchscreen users’ overall experience. At Butter, we believe in tools that are closest to the real thing.

Let’s look at an example

Hover effects are one of the most common things that change between desktop and touchscreen devices. It’s always important to be careful with the hover menus. While most touch devices attempt to use click to simulate hover, complex hover animations can end up delaying or preventing a click.

We recommend these tools for testing:

1. Chrome’s mobile simulation can be a good starting point. Chrome’s ‘Device Toolbar’ offers a basic simulation of the browser size and touch input.

When you open the Developer Tools, it’s the Mobile/Tablet icon, second from the left.

Chrome console

1. Services like Browserstack could be worth investing in if there is a device to test that you don’t have on hand.

2. iOS Simulator is useful for iPhones and iPads, especially with its connection to the Safari developer tools.

It’s possible for preview tools to not always account for how much is covered by browser UI, and the transitions - for example, iOS Chrome and Safari browsers will hide their UI when you scroll down and reappear as you scroll up. It’s important to note that the behaviour of items that are 100% height in mobile is not simulated in Chrome’s developer tools.

Here’s another example:

Left: when you land on a page, the URL bar and bottom row of buttons are visible.

Butter mobile

Right: when you scroll down, the URL bar minimizes at the footer. The viewport size also changes.

Butter mobile

Favicons on dark and light

Designing a favicon for your website is a requirement for having a well-designed website. While designing the favicon, we have to keep in mind that it will appear on different types of backgrounds and devices.

Therefore, we have to design the favicon in both light and dark modes. The dark mode is the default theme of Windows 10 and web browsers such as Google Chrome and Chrome prevent websites with dark-mode favicons from loading on that operating system.

The dark mode is also used as a preference when browsing a website on mobile devices, smart TVs, Windows tablets, etc. If you are designing a favicon with your favourite responsive design tools such as Adobe Photoshop or GIMP then you may want to know how to make the favicon in both light and dark theme formats.

Let’s look at an example

The favicon is a black graphic with a transparent background. While it’s hard to see on Chrome Incognito window’s dark UI, if you make it white, non-Incognito window’s light UI will have the same issue.

You may want to go with a border, a background, or maybe a coloured version of the icon instead.

Css test

Similarly, transparent favicons will be placed inside black boxes when a shortcut is added to an iPhone Home Screen, assuming you have an icon set for this purpose (57x57 at time of writing, 76x76 for iPads). While it could be rare that a Home Screen shortcut is made, it’s good to keep in mind that the person who is most likely to do it is the client themselves.

‘Safe’ fonts and fallbacks

Have you ever wondered if you are using those so-called “safe” fonts on your website? There is a misconception among front-end [web] development professionals that web-safe fonts are only meant for websites. But today, there is an abundance of fonts available to download and use. With increasing demand and variety of choices, it has become difficult to choose the right font for your website. Will it work cross-browser? Is it web-safe? These questions always haunt you while choosing a new font for responsive design projects. Let’s look at the next example to know more.

Let’s look at an example

Helvetica on Windows

For some reason, Windows just wouldn’t work with it. Getting a license for Helvetica as a web font isn’t quite as easy or cheap as it may sound either. Read more about font licenses here.

System fonts depend, as the name suggests, on the operating system, so switching from IE to Edge on the same machine will not be a solution.

Choose fonts carefully in design and have backup suggestions ready- a client’s favourite font for print might be costly to license for use on the web.

Languages while designing

browser testing tips - languages used for the website


We sometimes expect that it’s okay to fill in the default language first, and the rest of the content for other languages later. But it’s important to get some of it in before or during the testing phase, especially when you are building a multi-language website, because of layout changes.

Language and layouts

A common second language for our websites is Chinese, which can have quite broad effects on the layout. When going multi-language, be cautious with your fonts. For example, some Chinese web fonts will be simplified or traditional only and will show a distorted, system font version of missing characters.

Logographs

With logographs like Chinese for your Chinese website, where symbols replace words, the length of content could also change dramatically, requiring a tweak of the font size. If you’re changing the lang attribute of your page, some language-sensitive CSS properties such as hyphens could stop working as well.

Date Formats

There are many other points to look at, some unrelated to styling, such as date formats.

When using PHP DateTime, the simple M Y’ format results in a perfectly readable date ‘11 Jun 2022’ - in English. But in the Chinese locale, this creates something odd: ‘11 6月 2022 ‘. We need to write in a condition to use a more conventional format for the Chinese site, like ‘Y年m月d日’.

SSL and HTTPS

Did you know that there are times when browsers will mark pages as insecure even if the SSL is installed and configured? This is why it’s crucial to check that there are no third-party libraries or images that lack HTTPS in their URLs. Browser dev tools will sometimes list out the offending URLs.

Testing Ads

browser testing tips -testing ads

It’s 2022. You are most probably running an adblocker on your browser. But here’s the catch — so are your clients and testers. These will attempt to recognize and block ads on a site through CSS classes, content and, so on. So, if you’re trying to test how the ads look, you will need to turn off Adblock for a bit and go through the nitty-gritty before you hit publish!

Final Word

Finally, note that for each of us, the impact of browser testing on the website is going to be different. We each have our own unique set-up that relies on multiple keyboards, plugins, add-ons, and apps – not just browsers.

While these tips may help improve your experience with a particular browser, depending upon your make-up and browser compatibility they may also cause issues or even make things much worse.

Therefore, if you need expert support through your testing journey — book a call with our Butter professionals!

Share:
Tiffany Pau
By Tiffany Pau
Digital Strategist
Tiffany is a Biochemistry graduate from CUHK. After graduation, she worked as a Digital & Analytics intern at L'Oréal APAC for more than a year before joining Butter as part of the Graduate Programme. Tiffany now works closely with the Strategy and Business Development Team to meet output expectations and contributes to managing client projects within Butter.

Insights

Contact1
Join us

We’re always wanting to meet talented people who would enjoy working with us, while helping us be better at what we do.

View Jobs
Contact2
Get in touch

Looking for a strategic Digital Marketing Agency in Hong Kong? Reach out and talk to us today!

Contact Us