Why Android Fragmentation is Irrelevant to Web Designers

We’ve all seen them: Pictures of an array of hundreds of Android devices accompanied by some snide remark about how “Android Fragmentation” is making it impossible to build and test anything for the mobile web. I’m here to tell you that’s not true.

You content doesn’t care about the size of the visiting browser. Neither should your designs.

OpenSignal runs a detailed an ongoing survey of all types of mobile devices and their latest report on Android Fragmentation is interesting reading. They have detected 18,796 distinct Android devices running 7 different versions of the operating system. This is contrasted with the iPhone and iPad which only constitutes 10 or so devices running 3 different versions of iOS.

The result is a vast array of different screen sizes. This graphic below from OpenSignal shows Android on the left and iOS on the right.

Diagram showing Android vs. iOS screen sizes sourced from http://opensignal.com/reports/2014/android-fragmentation/

For app developers this is an impressive challenge that drives many to only focus on specific Android devices or even just iOS. Be that as it may. For web designers and developers this graphic is irrelevant. Let me give you three reasons why:

The web has no fixed size

The worry caused by seeing the many available screen sizes of mobile devices is deeply rooted in the anachronistic idea of fixed-width web design. When designers moved from fixed media like print and broadcasting to the fluid design pane of the web they quickly applied traditional fixed-width approaches to the new medium. And for a while it worked because most screens had the same size and same resolution. With the introduction of mobile web devices this all changed and the web design community had to adapt.

In the beginning there were only a few sizes: First the iPhone (horizontal and vertical) and then the iPad (horizontal and vertical). Designers and developers still stuck in the fixed-width paradigm adapted by creating boilerplate media queries to target these specific sizes. These boilerplates are still in use and the device-specific media queries are being perpetuated by tools like Firefox’s Responsive Design Mode. Designs were still fixed, but fixed to a predefined set of screen sizes.

The problem, highlighted by Android fragmentation but most visible in the regular web browser, is that the web has no fixed size. There are an infinite number of possible screen sizes and we can’t simply design for a select number of them.

The worry over Android fragmentation in web design is rooted in a fundamental misinterpretation of the purpose of Responsive Web Design. RWD was never about formatting the content to fit the screen but rather displaying the content in the best possible way based on the device used.

The web is a content distribution network. It provides content to whatever device accesses it and lets the device decide how to display it. Our job as web designers and developers is to style that content to display in the best possible way on whatever device the visitor chooses to use. Responsive Web Design allows us to use media queries to place breakpoints wherever the content should naturally change to best fit the available space. That means rather than starting with media queries based on specific screen sizes and applying breakpoints for all content in a view, you start with the content and create custom breakpoints for each element or group of elements based on how they are best displayed in the currently available space. Make the content respond to the available space.

The web is universal

When you publish content on the web you make it available to web users. How those users choose to access that content is up to them. You have little to no control over their choice in device, operating system, access method, or browser. The challenge for web designers and developers is to provide the best possible experience to all these users. And that goes beyond media queries and varying screen sizes: Many users access the content through other means: Apps, readers, accessibility tools like text-to-speech browsers and refreshable Braille displays, and new technologies like wearables, integrated automobile solutions, and beyond. In the near future people will start asking why they can’t browse the web with their voice while jogging or driving their car. In short, the device used to access the web is not the issue. Universal access is.

The web has standards

The final nail in the coffin of device fragmentation panic should be adherence to web standards. Because the web has no fixed size and the web is universal we have established web standards to ensure the same code produces the same results across all devices, operating systems, browsers, and accessibility tools. Here it’s important to make the distinction between the design result and the communicative result. The purpose of a website is to communicate a message to the visitor. This can be done with or without visual design. Web standards allow us to write one set of code that conveys the content in a consistent way that can be accessed by all browsers. The end result – how that content appears – depends on the preferences of the visitor.

In other words if you are worrying about the specific screen sizes your content is being displayed on you are confusing the task of making your content available to the visitor – something  you have complete control over – with the task of conforming your content to their devices – something  you have no control over.

Design your sites for their content

When you start your next web design project, shift your focus to the only thing that matters: the content. Design the content to be presented in the best possible way regardless of the screen size and use media queries on an item-by-item basis rather than site-wide. And if you absolutely must have some fixed sizes to refer to I’ll give you the only three that matter:

  • The smallest vertical mobile screen at 320px wide.
  • The biggest horizontal screen you can think of.
  • All the sizes in between.
Simone - a free accessible responsive WordPress theme

Simone and Building WordPress Themes from Scratch Using Underscores

Over the past few weeks two major releases took place, and now it’s time to talk about them: First, the new free WordPress theme Simone announced my re-entry into the free WordPress theme space. If you’ve been following me for a while you know I’ve released free WordPress themes before and you may also know […]