What is Responsive Web 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.
Components of responsive web design include:
- • 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.
Why is Responsive Web Design Important?
When the World Wide Web first became a mainstream sensation, those who surfed the internet were only able to do so on a desktop and on a limited number of browsers. This meant that the online experience was the same, or at least very similar, for everyone.
When mobile phones were first introduced, they were mainly used for messaging and calling; but this quickly changed. Today, mobile internet usage is a huge part of our everyday lives, and mobile devices account for around 50 percent of web page views worldwide.
While using the internet on a mobile device was once a revolutionary idea, we now use our phones and tablets from everything to staying in touch with friends and family on social media to booking our next vacation. And while having a website that worked on mobile used to be a competitive advantage for businesses, now it's a requirement for organizations who wish to survive in a highly digitalized era.
However, as mobile usage increased, so did our choice of devices. Whereas there used to be limited options when it came vendor, operating system, and screen size, now there are thousands of combinations to decide between thanks to an explosion of device fragmentation.
Additionally, site owners could no longer get away with creating a static mobile website and desktop version that were not necessarily user-friendly. While these sites were technically adaptive to different screen sizes, they were not fluid in the way that responsive design was, which meant layouts on mobile were often hard to read or use.
Responsive web design became crucial to ensure that a website was optimized for various screen sizes and resolutions. Thus Marcotte’s rules were needed in order for web applications to respond, react, and adapt to different devices.
The Need For Responsive Testing
Though Marcotte provided a foundation of development and design principles to install, responsive testing was equally as important to verify that web applications were visually and functionally acceptable on different devices, operating systems, browsers, and screen sizes.
However, as the number of mobile devices continues to grow, testing on all the necessary machines has become a lofty goal, and maintaining extensive and expensive device labs or Selenium grid to cover all these options and keep up with emerging ones has become expensivee and difficult for organizations.
With the introduction of cloud testing tools like CrossBrowserTesting, teams that wish to build and verify web applications for mobile users have been able to enjoy access to a breadth of real devices as well as mobile emulators and simulators for testing.
This way, there is no more second guessing what your users see when they visit your site on a phone or tablet and no more pricey maintenance or upkeep of a device lab -- just instant access to over 1500 configurations for live, visual, and automated testing 24/7.