Web browsing is a changing landscape that has been presented with a host of challenges over the past decade. Today, anyone surfing the web is treated to websites that adjust to their device. In a world where businesses need a ‘future-proof’ browser, responsive websites that will adjust content to the device accessing the website is now.
The problem faced with the “raw material” of websites was that it can’t be magically transformed into something it is not. Original intention and context limit just what and how anything was displayed. With lower resolutions, stress points appeared. On smaller viewports, graphic illustrations behind a logo were cropped. Surrounding context on a widescreen display images swelled to sizes that crowded out the surrounding context.
Responsive Website Design
A debt of gratitude is owed to Ethan Marcotte, the developer who brought about responsive web design. The world now knows a web experience in which there is almost always a seamless experience even when switching between an iPad and a desktop. Front and back-end developers now have a far lighter workload. He reveals the technical ingredients in his 2010 article: “[f]luid grids, flexible images, and media queries.”
Marcotte approached the problem of digital space inspired by solutions offered in physical space. He remarked how the discipline of responsive architecture influenced him, specifically the creation of rooms designed to reorganize and respond to human behavior.
"Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced 'smart glass technology' that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy."
From there, the world of responsive website design emerged.
“This is our way forward. 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.”
Now desktop, laptop, and mobile users browsing from smartphones, laptops, and tablets are treated to the same experience. Responsive websites detect the user’s device via media query and automatically reorganizes itself accordingly. Behavior and environment are responded to via a mixture of flexible grids, layouts, and images. This eliminates the need for separate websites built for each possible device. For example, if size of the viewer is the issue, the page and content will automatically adjust to give two columns of text.
In another example, a smartphone might have vertically stacked content reorganized to display only a single column. Both businesses and developers have technology with which to approach the ever evolving web browsing experience.