As our reliance on information grows and our need to manage more of our professional and personal lives online, the ongoing challenge of designing websites that work anywhere, anytime on any device becomes ever more difficult. We consume content and services across various devices and configurations every day, and your organization shouldn’t leave some of them in the dark by failing to support their preferred platform.
Multiple platforms require significant digital resources to maintain. When working on an application, developers must take into account the features of each platform in addition to the real business logic. And it’s not just about code: frameworks, tools, and processes all have an impact on team productivity, time-to-market, and maintenance costs.
How Much Fragmentation Is There?
More than 4 billion people use a variety of devices to access the internet. The different combinations include:
- More than 9000 different devices, with
- 21 different operating systems (vendor + version), as well as
- 8 major browser engines that power hundreds of different web browsers
That adds up to at least 63,000 different browser-platform-device combinations. And these are only the ones we are aware of currently. Algebra anyone?
That’s how much fragmentation we are really working with.
The wide range of devices in use at any particular time is referred to as device fragmentation.
Here is how the world’s web traffic is split between mobile, desktop, and tablet:
- Desktop: 36%
- Mobile: 61%
- Tablet: 3%
Techniques like responsive web design have made it easier for developers to ensure that a website works well on laptops, tablets, and game consoles running a browser. The device landscape, on the other hand, is always changing. As a result, the complexity is exacerbated by the introduction of new models, operating systems, and browsers.
For example, the Android operating system is available on thousands of different smartphone models. When one considers that there may be multiple different versions of the Android operating system in use today within a single device model, the complexity and fragmentation increases even further.
Operating Systems Fragmentation
We’d divide operating system fragmentation by device type. However, the desktop OS is important for determining how many browsers a platform supports when it comes to web development. So, let’s get right to the heart of the matter: mobile OS fragmentation.
Let’s start by talking about mobile device manufacturers. Globally, six mobile device vendors have a market share of around 83%.
Here’s the breakdown:
- Samsung: 27.57%
- Apple: 26.74
- Xiaomi: 11.4%
- Huawei: 7.88%
- Oppo: 5.66%
- Vivo: 4.57%
These figures will seem significantly different depending on your traffic or if you filter by country.
Android vs. iPhone
If you look at the history of the iOS device series, you’ll notice that the differences between Apple iPhones are small. While a good testing approach should cover a few iPhone models, a handful still haven’t become obsolete. iPhones older than the four account for only about .03 percent of the smartphone market.
Although the iPhone has set the standard for the design and feel of today’s devices, the Android market lacks Apple’s consistency.
The sheer number of manufacturers (Samsung, Google, LG, HTC, Motorola, Blackberry, and Nokia, to name a few of the thousands) ensures that these devices will not render developer code in the same way.
While there are already many more Android brands and models, this also means that new Android devices are released 90 times more frequently than the one or two iPhones released each year. And, unlike the iPhone, Android users’ preferences among these options aren’t confined to a few comparable devices but rather vary from state to state and country to country.
Furthermore, because iOS updates are automated or otherwise encouraged, the majority of iPhone owners are running the most recent iOS. Meanwhile, Android users have OS versions ranging from 5 to 11, with every digit in between. So, in reality, only about 1.2 percent of Android devices run the most recent operating system.
No other platform offers as many screen options as Android. Tablets and smartphones have varied pixel density and aspect ratios on their screens. Creating the appropriate user interface for each screen is a time-consuming task for any developer. From this perspective, the iOS platform appears to be far more appealing: while developing an app for it, you only have to consider a small number of screen sizes and resolutions.
Despite all of the fragmentation issues for developers, Android operating systems control the majority of the smartphone and tablet industry.
There are six major browser families. Here’s a breakdown of their market share:
The World Wide Web Consortium (W3C) established a set of standards in order to “homogenize” how browsers render pages. So, why doesn’t your web app display the same on all of them?
- They use several rendering engines. WebKit is used by Safari and Opera, but Blink is used by Chrome, Gecko is used by Firefox and so forth. These have an impact on the client-side appearance of your web pages.
- W3C standards aren’t always implemented in the same way by browser vendors. Consider a race: the W3C set up the course and established the regulations, but browsers found their own shortcuts to the finish line.
As a result, it is the responsibility of developers to test across browsers. It’s tough to choose the right ones, but consider this:
- Each browser family has numerous versions on the market, each with its own (substantial) market share.
- A browser version will act differently on desktop and mobile. For example:
- Chrome 76 on desktop compared to Android. HTTP Live Streaming (HLS) is supported by all Android versions of Chrome, but not by Chrome for desktop.
- Any Safari version on MacOS vs. iOS. PNG favicons operate flawlessly in all Mac Safari versions but not in any iOS Safari version.
Now that you know about browser, OS, and device fragmentation. Here’s the final piece to understanding and coming up with solutions to creating great websites for any device, of any size, anywhere.
Here are the most popular screen resolutions worldwide right now:
- 1920×1080: 9.2%
- 1366×768: 8.38%
- 360×640: 5.01%
- 360×800: 4.43%
- 414×896: 4.23%
- 1536×864: 4.04%
So, what does this mean? You’ll need to test on 10 different screen resolutions to cover 80% of worldwide web traffic.
As screen resolutions improve, more devices are introduced, and browsers continue to compete with each other, web designers’ challenges are here to stay. At New Target, our team understands these difficulties. We use our knowledge along with extensive compatibility testing to design our clients’ websites to provide exceptional experiences from any device, of any size, at any time.