This infographic will walk you through the basics of fragmentation. It'll also help you understand how fragmentation affects your end user experience. In the end, we'll look at the solution, compatibility testing, and the set of devices that you should test on.
What is fragmentation?
The page that you are viewing is accessed by wide variety of devices—desktops, mobiles, and tablets. Within these devices, there are different OS versions, screen-sizes, and browsers. This variety creates a fragmented landscape for the same code to reach.
Why is it a problem?
The differences caused due to fragmentation in OS, devices, and browsers breeds a lack of interoperability. The same piece of code acts differently in different device-browser combinations. And the scarier part is that new device profiles are being added as you read this!
Testing on all 63,000 combinations (when this was being written) isn't feasible. The best way is to test on the most commonly used ones. Ensure that your testing covers the breadth in:
Device Types: Over 50% of web traffic comes from mobile devices. It is imperative to include desktop as well as mobile devices in your test suite.
Operating Systems: Both desktop and mobile have 2 major operating systems. Android further has custom implementations, and sub-versions, each of which behave differently.
Browsers: People use different browsers to access the same website. These browsers also run different sub-versions depending on the update frequency. Make sure that you cover the major sub-versions for each browser type.
Resolutions: The different screen sizes affect how your website appears to users. Ensure that your pages are responsive and verify them on a variety of resolutions.
To maximise the cross-browser-device compatibility of your website, combine these recommendations with your website traffic data to determine the right set of devices for your users. Happy testing!