What is Responsive Design?

It wasn’t too long ago that designers didn’t really need to worry about how websites looked on mobile phones and tablets. Phones weren’t yet really practical for web viewing, and before the iPad, tablets were more of a novelty than an essential.

Obviously, all that has changed, and most tech experts predict that in the next few years, likely sooner rather than later, mobile browsing will overtake desktop browsing as the dominant way of viewing the Web.

With an ever-evolving range of screen sizes and devices, including video game consoles and Internet TVs, the old ways of web design are simply no longer up to the task. And with businesses realizing the need to optimize their online experience for mobile users, designers who don’t adapt will be left behind.

Editor’s note: The following is a beginner’s introduction to responsive design not intended for more experienced web designers.

The Main Components of Responsive Design

That’s where Responsive Web Design comes in, content and/or layout that automatically adapts to the size of the screen on which it’s viewed. At its most basic, the three primary elements of Responsive Design are a flexible grid, flexible images, and Media Queries, the latter introduced as a part of CSS3s. More on those in a moment.

Flexible Grids

Flexible grids are basically themes and templates in which design elements are set in percentages rather than pixels. With percentages as the unit of measurement, that means that an element that’s designed at 50% will always take up half of the screen, no matter how big or small the screen is.

Flexible Images

At their most basic, flexible images couldn’t be easier to create by writing a simple rule that states:

img {
     max-width: 100%;
}

Essentially, this means that if an element is larger than its container, the rule forces it to match the width of that container. And since modern browsers resize images proportionally, the image aspect ratio is preserved as well. What’s more, the 100% rule can also be used for almost all other elements as well, like embedded videos.

The Media Query

Since the introduction of Media Types in CSS 2.1, style sheets have been much more inclusive of mobile and other devices. Media Types essentially allow styling to target specific classes of web devices, with those types including handheld, screen, and tv. But with little standardization between devices and little support from device manufacturers, Media Types never lived up to their potential.

Media Queries live up to that potential and then some. But rather than being concerned with the type of device the way Media Types do, Media Queries look at the device’s capabilities instead.

A simple Media Query might look like this:

The two components of the query are the media type, set as screen, and then the actual query – (max-device-width: 480px) – which is essentially asking if the device’s width is 480px or less. If that’s the case, the device loads generic.css. If not, the link is ignored, as are others, until the correct resolution is identified and the appropriate style sheet is loaded.

More Than Just Resolution

But resolution is by no means the only design element that can be controlled through the use of Media Queries. Width and height of the browser window, landscape and portrait orientation, even layout, are some of the other parameters that can be set.

For instance, if a Media Query detects that a device is a smartphone, a design that may load showing three columns with a text area and two vertical sidebars on a computer screen might load on the smartphone screen as a full-width text area with the two sidebars as horizontal elements underneath.

A Flexible Mindset

Of course, a key requirement for flexible design is designers with a flexible design mindset. Unfortunately, most web pages still aren’t all that friendly on mobile devices, mainly because most designers still typically design just for the desktop with smartphones and tablets as an afterthought. Few designers approach design with multiple platforms in mind.

While there’s is a learning curve in incorporating Media Queries into style sheets, it’s the transition from designing with pixels to designing with percentages that stop some web designers. In reality, though, there’s really not much difference in designing with percentages, and it is easier as well.

Consider, for instance, the difference between assigning widths of 100% and 100 pixels to two identical elements. In one, you can be assured that the element will fill the screen, whether it’s the screen of a desktop, laptop, or iPhone. But an element that’s 100 pixels wide would be large on a 480-pixel iPhone screen but comparatively tiny on a desktop screen with 1600×900 resolution.

Responsive Design Means Business

For businesses, the main reason to implement responsive design is obvious. The easier it is for potential customers to navigate and find what they’re looking for, the higher the conversion rate. But for many designers, responsive design for a business website has typically meant just shrinking the size of the content to fit a smaller screen. Anyone who’s spent any time scrolling around and zooming in and out to find the information they’re looking for knows that a miniature version of a website isn’t the answer.

Another way businesses and designers have dealt with the issue of designing for a mobile device has been to create a separate site for different devices with auto redirects according to the device. This allows the best interface to be provided as well as avoiding slow loading caused by JavaScript and large images.

But there are several drawbacks to this approach. Certainly, one of them being the expense of creating and maintaining multiple sites and coordinating content across those sites. And, of course, there’s yet another new site to be built when a new device comes out. Fortunately, Responsive Design, if done correctly, can address almost all issues in designing for mobile devices.