The Past, Present, and Future of Testing Responsive Design

The Inception of Responsive Design

Ethan Marcotte coined the term “Responsive Web Design” when he published an article outlining its definition and components in 2010.

"Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design."

In Marcotte’s responsive design article, he made a case for combining media queries, flexible widths, and flexible images to respond to different devices rather than creating multiple versions of a website.

But what exactly are these elements that Marcotte say make up responsive design?

• Media queries – The rules that tell content to behave differently on different screen resolutions and adapt to conditions by defining style rules and breakpoints in CSS.
• Fluid grids – Content inside the wrapper of a fluid grid has percentage widths and proportional values in CSS that adjust to different screen sizes rather than a static layout.
• Flexible images – Images and other media that resize with ratios and percentages in CSS depending on how large the window or screen is to keep images in container widths.

While many designers had previously utilized these properties on their own, none had thought to integrate the methods to make a website responsive as Marcotte exemplified.

Combining these practices is what revolutionized the idea of responsive design as we think of it today to achieve optimal user experience on every device and browser.

The Need for Responsive Design

Once upon a time, when first iPhone was released in 2007, the idea of accessing the internet on a mobile device was revolutionary. Having a web app that people could access on their phones was a huge competitive edge for companies that were trying to make their products and services stand out.

Luckily, once people had the design and development part down, testing was fairly uncomplicated in the early years of mobile technology. There were only a few different smartphones on the market and equally minimal operating systems, which meant that testing could be taken care of by going through a few different devices. This also meant that a lot of companies could get away with creating one static mobile website and one desktop version.

As time went on, however, designing for the mobile web became more competitive, and most businesses had a mobile website. Additionally, more choices of phones, versions of operating systems, and browser options also made the user experience more diverse.

This meant that just having two websites no longer made sense; the only way to survive on a mobile web viewed on various screen sizes and resolutions was to optimize for all of them at once. Thus the need for Marcotte’s concept of responsive web design in order to respond, react, and adapt to different screens.

Fast forward a few more years and today there are even more fragmented ways to access the web. As of 2015, there were over 24,000 unique Android phones, which is 6 times more than in 2012. Since then, new devices and operating system updates have still been consistently released, leaving us only to guess how many more have been added.

Of course, this means responsive design is more important than ever, but it’s also more complex. While the concept of responsive design maintains the same, testing on all the necessary machines has become a lofty goal, and maintaining extensive and expensive device labs to cover all these options and keep up with emerging ones is becoming more and more difficult for organizations.

The Future of Responsive Design

As we watch a continuous proliferation of devices, we can only expect this will continue in the future, and devices will become more fragmented. If you think developing and testing for responsiveness became difficult with the sheer number of phones on the market, it’s sure to become more difficult as the devices themselves become more distinct.

For example, as most mobile phones followed the lead of Apple’s original iPhone design to some extent, upcoming device releases are starting to follow new trends. For example, the Google Pixel 2XL, iPhone X, Galaxy S8, and Huawei Mate 10 are all showing that big screens and small bezels will be the preferred style as customers choose to upgrade.

When small devices are getting larger and large devices are going smaller, hardware companies are trying to gain a competitive edge with unique, breakthrough models, making it tougher to predict just how we’ll design applications to be truly responsive in the coming years.

Take the iPhone X, for example, the front of which is virtually entirely touchscreen except for one notch containing vital functionality components. Upon first look, the newest iPhone seems innovative and sleek. But for those who have to design with the notch in mind of UI/UX, it calls into question how we can make applications responsive to devices that will not fit the customary smartphone mold.

Additionally, while there’s certainly a number of different kinds of devices to choose from now — phones, tablets, desktops, laptops, notebooks, watches, etc. — it’s presumed that we’ll be connected to even more types of screens in the future with a projected 34 billion devices connecting to the internet by 2020, up from 10 billion in 2015.

Not to mention, screens may take different forms than the flat objects we’re used to now; they could be foldable, bendable, or expandable. As we begin to see new devices becoming more and more unique, it’s almost impossible to determine how we will meet the needs of futuristic responsive design.

So, how can testers continue to consider responsive design well into the future? Our advice is to gather device configurations as they’re released, master the balance between manual and automated testing, and follow a set mobile testing strategy.