What is Responsive Web Design?

As smartphones have come to dominate the mobile marketplace, and tablets have begun to steal marketshare from traditional laptop and desktop computers, it has become necessary to create websites which can adapt to various screen sizes as small as three inches and as large as 30 or more inches.

In general, there have been two approaches to solving this dilemma of size and space. One group of designers has committed themselves to so-called “adaptive” design which uses multiple fixed-width columns and generally doesn’t share the same base of code between all sizes and shapes of a website’s design. Another group of designers has dedicated their own efforts to “responsive” design which actually uses multiple columns to make just one design work on devices of all sizes. These designs don’t adapt to screen size by containing separate versions of the template itself, but instead respond to the screen size by determining the page width, number of columns, and appropriate design for the user’s current situation.

Frameworks and Columns — Plenty of Columns

The typical website design is one that contains between two and four columns of content, sometimes used in varying places throughout a design. Most seasoned web designers long ago transitioned to a grid-based design format, so these columns are relatively inform in their width and height throughout the site’s design. While this is fine for strictly desktop and laptop browsers, it is not okay for mobile devices which have room for exactly one column in portrait mode, and maybe two columns in landscape mode.

To cope with this, responsive designs use a staggering twelve columns of content to better adjust the website’s width to the size of the screen being used to view the website. This is done by using relative widths of each column (typically in percentage values) rather than using absolute, pixel-based column width designations throughout the site’s design. Scaling of these columns is accomplished by typically using a combination of stylesheets and XHTML which are paired with an extensive JavaScript routine and jQuery library file. For this reason, creating a response design typically requires a pre-designed framework which includes a basic template, a barebones stylesheet, and the necessary jQuery and JavaScript files to put development on the fast track.

Designers can choose from a number of different frameworks, each with their own features and benefits. These frameworks are relatively similar, though the JavaScript often varies and the exact use of jQuery library files is open to interpretation. Perhaps the biggest difference between these frameworks is the use (or non-use) of HTML5. While XHTML can certainly power a responsive design, it should be said that HTML5 is far more semantically-oriented and it’s certainly better at scaling elements up or own and employing CSS3 to give the responsive design some real style that sets it apart from rather boxy XHTML alternatives.

The unique thing about responsive design is that those web professionals who employ one of its many frameworks actually begin by designing for a single-column mobile layout first. After all, the biggest reason behind taking a website from adaptive to responsive design cues is to pull in smartphone and tablet users without forcing them to install a mobile application, scroll left-to-right, or zoom in on a full-size webpage. For this reason, a responsive design made of ten columns is almost always designed with its single-column format squarely in mind; designers should then scale up their designs to tablet-sized screens, laptop screens, and even larger desktop-style screen sizes as they continue work within the twelve columns which are typically a feature of any responsive design framework.

The Key is Instant Response to Environment Changes

A website that perfectly utilizes a responsive framework will adapt to sudden changes in its environment, and resizing a web browser window will show off its capacity to blend with larger or smaller viewing sizes. A good responsive design is one that is not constrained by smaller screens, nor made to appear awkwardly compact on larger desktop displays. It’s quick, efficient, and employs the latest HTML5 and CSS3 technologies to turn a standard, static website into one which which is both aesthetically pleasing and highly usable across the board, no matter the user’s data connection or screen size. It’s a truly innovative way to break free of static limitations and pixel definitions, instead embrace the fluidity of the modern web.

What experiences have you had with responsive design? Learning the ropes? Been at it for a minute? Let us know in the comments.