Better Design and Testing for Mobile Viewport Madness

These days, every website we build must be responsive. With mobile web usage accounting for over half of all traffic, catering to these users is a no-brainer.

Thankfully, foundational technologies like CSS and JavaScript have made this easier. Web designers no longer need nonstandard hacks or separate mobile templates. Modern layout and document object model (DOM) manipulation techniques allow us to build for all devices.

Testing your designs on mobile, however, is a different story. Ensuring a pixel-perfect look on every phone, tablet, and hybrid device can be a massive challenge.

It doesn’t help that mobile screen resolution is all over the map. In years past, there were a few outliers that defied the expected number of pixels displayed. But now it seems like every smartphone generation comes with a different set of viewport sizes. Not to mention enough quirks (thanks to additions like notches and dynamic islands) to throw off the most carefully-crafted CSS media queries.

That begs the question: how can we design and test with any confidence? Today, we’ll look at the common pitfalls of mobile testing and share some tips for making your designs look great on every screen.

New Devices Are Clashing With Traditional Media Queries

The early years of responsive design brought a fairly standard set of device viewports, such as:

• Phones (portrait): 320×480 pixels
• Tablets (portrait): 768×1024
• Laptops: 1024×768 or 1240×1080
• Desktops: 1240 and up

We say “fairly” standard, because not every device used these exact viewports. Still, writing CSS media queries within these generic dimensions was a common practice.

That’s not such a safe bet today. Manufacturers have turned those basic guidelines on their heads.

Take the iPhone 14, for example. It has several versions available – and they come with varying viewports:

• iPhone 14 Pro Max (portrait): 393×786
• iPhone 14 (portrait) / iPhone 14 Pro (portrait): 390×664
• iPhone 14 Plus (portrait): 428×746

Mathematically speaking, the differences aren’t huge. But they are enough to potentially disrupt a website’s mobile layout. Thus, you might feel compelled to test each model.

To be fair, this isn’t just an Apple phenomenon. Devices from Samsung, Google, and other manufacturers are adopting similar strategies.

Regardless, it makes a web designer’s job that much harder. And it’s a clear indicator that we need to adjust how we build and test.

Adapting to the New Mobile Design Landscape

We can’t rely on mobile devices to consistently fall within a specific viewport range. Therefore, it’s up to us to make some adaptations.

Perhaps the biggest single step designers can take is to simplify mobile design. This is already good practice, as overly-complicated layouts don’t tend to work well on small screens. But anything that requires a specific viewport to work is bound to cause headaches.

Building with resiliency in mind is worth the effort. It may not look as fancy. But it will allow content to better adapt to the multitude of screens out there.

In addition, there’s something to be said for letting CSS layout techniques work unfettered. Both CSS Grid and Flexbox are responsive by default. Plus, the control offered by CSS clamp() can take the guesswork out of sizing elements.

By forgoing some of the bells and whistles (on mobile, at least), layouts will be better able to adapt. That means fewer worries about potential breakage as new devices come to market.

Use Tools To Stay On Top of Testing

Mobile website testing has always been a challenge. But with so many makes, models, and viewports available, it has risen to another level.

The good news is that there are plenty of tools to help. And there are both free and commercial options.

It all starts with your desktop web browser. Virtually every modern browser includes the ability to test on a variety of mobile viewports. And they can also emulate the exact viewports of specific devices.

Here are a few resources to get you started:

• Chrome – Simulate Mobile Devices with Device Mode.
• Firefox – Responsive Design Mode.
• Microsoft Edge – Emulate Mobile Devices.
• Safari – Web development Tools.

These tools can be a massive help in ensuring that a design works across a wide range of screens. They’re not perfect. But they still provide a lot of insight. And you can’t beat the price!

But what if you need to test a lot of devices and browsers – including some more obscure choices? Doing this one at a time can be incredibly tedious. Plus, it can be difficult to access budget phones and niche browsers.

That’s where commercial tools come into play. Some offer hundreds of real devices to test with. And with automated testing, you can save massive amounts of time. If your project requires this sort of functionality, these services are worth the extra cost.

The bottom line is that no matter your budget, you can test on devices well beyond the ones you own.

Beauty and Function on Every Screen

The requirements of a responsive website are becoming more complex all the time. And the glut of unique mobile devices is only adding fuel to the fire.

More than ever, getting things right means a commitment to simplicity in design. It also takes a lot of testing to catch potential issues firsthand.

It may seem like a tall task – but we don’t have to do it alone. There are tools available to make the process easier. Not to mention that modern CSS layout techniques were developed with responsiveness in mind.

The key is to develop a plan for designing, building, and testing for quality. Once established, it’s something that you can rely on for each project.