They won’t let me sleep!

It is 1 AM. Just hours after pushing a release, your phone starts buzzing with notifications. It’s your team trying to get through. Apparently, there is a serious compatibility issue in IE 11 for Android 7.0, and customer complaints have started flowing in. While scrambling over to your laptop, you can’t help but wonder, “What the $#%* went wrong? I thought we tested this on mobile.”

Sound familiar? Most of us have heard a version of this anecdote, if not lived through it. It leaves us with an important lesson—a website needs to be optimized for the devices customers are using.

Trends in mobile tell a similar story:

  • Mobile surpassed desktop in 2016: More customers today access the Web from a mobile device (52%) than a desktop (48%).
  • Responsiveness affects SEO: Google changed its search algorithm in favor of mobile-first indexing in 2018. What does this mean? The mobile version of a page is crawled first, and non-mobile-friendly websites are penalized.
  • More people are testing on mobile: In 2014, 34% of BrowserStack customers tested on mobile devices. Today, this number is 65%.

It is standard practice to develop, design and test websites for mobile. Everyone is doing it, but they’re also still complaining. Why?

There are too many devices!

Today’s global device market consists of 9,000+ smartphones and tablets manufactured by hundreds of different brands. Of course, everyone’s target audience is only a slice of that pie based on varying user demographics. Even so, any slice of the market is fragmented enough that bugs of all kinds can break your code and trigger frenzy at 1 AM.

Before getting into the solution, let’s look at exactly what you’re up against:

  • New specs bring along new headaches. Just weeks after Samsung caused an uproar with their foldable smartphone, Lenovo went one step further and filed a patent for a vertically folding phone! The mobile industry is constantly innovating. Exciting right? Not for the web developer who now has to build and test for one more dimension (literally).
  • Users are on 4 iOS and 8 Android versions. The top two mobile operating systems roll out one upgrade every year. Most iOS users (89%) are on the latest two versions, but the same isn’t true of the highly fragmented Android userbase. One of the most used Android versions today—6.0—was launched in 2015! The top 2 most used Android versions make up less than 40% of the current market, making it essential to test your website on multiple versions.
  • There’s no one-size-fits-all. As the range of screen sizes gets bigger, so does the list of screen-related issues. For example, if an image is too big for a viewport, it gets cut off and forces the user to scroll horizontally. What’s worse is when a user can’t carry out basic actions because a critical UI element is displaced, or has disappeared altogether. Imagine a customer who’s about to make a purchase, but they can’t check out because the ‘Confirm’ button is behind the keyboard. Avoid backlash by keeping a responsive design testing checklist at hand. It’ll help you keep track of the endless factors affecting responsiveness.
  • Screen resolutions and display capabilities. Mobile users expect brilliant visual displays on smartphones and tablets, whether it is high-res images or the wide color gamut. There is no room for low-res images or janky animation; this puts off users faster than you can say “user interface”. Customer expectations are constantly evolving with advances in technology. You have to keep up.
Meme 1

The message is loud and clear. More devices mean more complications. But how exactly do you keep up when the list of devices is huge and constantly changing?

Test on every the right devices

Developers, designers and testers came to us with this problem several years back, right around when mobile users overtook desktop users on the Web.

We came up with a solution to manage the complications with a growing device market—a framework that would account for variations in devices while minimizing the number of devices you have to test on. Every few months, we use this framework to update our list of device recommendations.

This list is called Test on the right mobile devices, and the best teams around the world rely on it. You can also subscribe to be notified the next time we publish an update.

So what’s the magic formula?

We look at global trends in mobile usage, device popularity and BrowserStack data across 2M+ users. After multiple rounds of optimization, we arrive at the minimum number of devices that give you maximum coverage of the market. Since the device market varies based on geography, we also offer country-specific device recommendations.

We have 3 main lists of device recommendations, tailored to the volume of traffic a website gets. The reason being—the larger an audience, the more variations in devices introduced.

Take for instance a website that gets 15,000 unique monthly visitors. These are the 6 devices to be testing on:

Right devices to test on, for startups

Why these devices?

By testing on these 6 devices, you cover 89% of the iOS market and 47% of Android. The list also covers the most popular viewports; 77% of users access websites from devices with these viewports.

Here is why we selected each of these device/OS combinations:

Apple iPhone XS

 

  • iOS 12 – Leading market share
  • Latest iPhone generation
  • Flagship device
Apple iPhone 8

 

  • iOS 11 – Second most used iOS version
  • 375×667 – Second most popular viewport
  • <5″ – Small screen category
Apple iPad 6th

 

  • Apple – Leading tablet vendor
  • 768×1024 – Most popular tablet viewport
  • 9.7″ – Most popular tablet screen size
Samsung Galaxy S8

 

  • Android 7 – Third most used Android operating system
  • Samsung – Leading smartphone vendor
  • Flagship device
Google Pixel

 

  • Android 8 – Leading market share
  • 360×640 – Most popular smartphone viewport
  • Pure Android environment
Google Nexus 7

 

  • Android 6 – Second most used Android operating system
  • Pure Android environment
  • 2013 release – Legacy device category

We hope you found this blog useful. Don’t forget to check out the full list of device recommendations.

That’s it for today, folks. Stay tuned to our blog for more from the BrowserStack team.

Happy testing! 👋