Responsive Web Design

The Internet has found its way into just about every facet of our lives. We can access it from nearly anywhere, whether we’re browsing at home on a personal computer or on the go with our smartphones. That ubiquity and accessibility now requires a different sort of web design – one that offers the best possible experience on all sorts of devices, and in any of the many different circumstances under which we might access the Internet.

To meet this growing need, Responsive Web Design (“RWD”) has come up with a number of solutions.

RWD

What Is Responsive Web Design?

Responsive Web Design is a web design technique that assists in the creation of websites that offer the optimal viewing and interactivity experience. In other words, readability is the name of the game with RWD; the websites must be easy to read and effortless to navigate.

Businesses that rely on excellent customer experience to earn and retain customers would be particularly interested in Responsive Web Design, since its focus is on creating the best possible first impression and user experience. Customers will be only too eager to take their business elsewhere if a particular company’s website is difficult to use, or inaccessible on their favorite mobile device.

With that in mind, Responsive Web Design seeks to improve the user experience in a number of ways, and to do away with common website frustrations. Among these is the need to re-size the webpage. Websites that are poorly made, or designed with only a particular sort of device or screen size in mind, may require the user to re-size their windows so that they can see the entire web page at once, or scroll and pan around in order to get the full picture.

This is the mark of a poorly designed website, and a common problem that the design philosophy of RWD hopes to eliminate for good.

A Brief History of Responsive Web Design

The term Responsive Web Design was coined by Ethan Marcotte in 2010, making it a relatively recent addition to our Internet phrasebook. Since then, the RWD design philosophy has caught on and really earned a place of prominence in the web design world. Mashable declared 2013 the “year of Responsive Web Design.”

As well, other industry luminaries have embraced RWD as an effective and affordable alternative to the development of dedicated mobile apps, which can be time consuming and expensive to produce, particularly for young or growing companies. RWD is a worthy alternative because it provides the design tools to develop a website that is functional and readable on a variety of screen sizes, from full-size desktop computers to smartphone screens of any size.

Progressive Enhancement

One of the basic design principles of Responsive Web Design is a reversal of some older web design techniques, where so-called “graceful degradation” was used to adapt an existing website for use on mobile devices. What this means is that the website is most attractive and usable on a computer, where JavaScript and other tools can be used freely to create rich, visually appealing websites.

The problem arises because not every smartphone or mobile device is capable of using JavaScript. As a result, “graceful degradation” is applied; this is the practice of slimming down and simplifying an existing website so that it can be accessed on a mobile device. This can often strip away much of the functionality and visual appeal of the original website.

In Responsive Web Design, the process is effectively reversed and use “progressive enhancement”; web designers begin with a basic web site that is accessible on all sorts of devices, and then enhance it visually for the more powerful smartphones and personal computers. This has so far been one of the most successful methods to create a website that offers feature parity on a variety of platforms.

The Basics of Responsive Web Design Techniques

There are a handful of design tenets and tools available for developers to fully embrace RWD. For example, the usual units of measure for determining the placement of website elements – typically pixels or points – are rejected in favor of relative units such as percentages. Because there are such a wide variety of Internet-capable devices, absolute units don’t have much meaning.

By designing websites in terms of percentages, the developer is better able to accommodate varying screen sizes; website elements take up a relative percentage of the screen real-estate, rather than some absolute and inflexible amount of space better suited to a desktop PC.

Media queries are also commonly used. A media query is a module that allows the particular content to adapt to certain variables, such as screen size and resolution. When used in concert with Responsive Web Design, the result is a webpage that can react dynamically to the needs of the user’s particular device. The website can call upon different style rules to change on-demand for different users.

Lastly, innovations with server-side and client-side components have produced websites that load faster on mobile devices that rely on cellular networks. This is a welcome alternative to device-side solutions.