Basics of Responsive Web Design

Charlie R. Claywell
Tablet, Cell Phone and Computer

One of the age-old challenges of web design is creating a site that displays well across multiple platforms and browsers. With the explosion of mobile devices, this challenge has intensified due to the even larger variety of operating systems and browsers and the wider range of resolutions and viewing widths. Responsive web design evolved as a way to handle these variants.

Understanding Responsive Design

At its core, the concept of responsive web design, introduced in Ethan Marcotte's 2010 article A List Apart, simply states that one website should work for all devices. There should not be a need for multiple sites, such as one specifically designed for a desktop monitor and another designed for a specific handheld device. This means that the layout of a properly designed site needs to adjust - or respond - to the device being used.

Two very significant issues are addressed with responsive web design.

  • User experience - As a designer you may not have control over what device is used to view your site, but you should retain control over the design that is delivered. With responsive web design, you accomplish this from one set of code unlike in the past where multiple sites were created - one for desktop machines and another for mobile devices.
  • Maintenance - Site maintenance is also greatly simplified with responsive design since any changes made to the site are updated inside the same set of code.

Responsive Web Design Grid

One of the many great advantages of the Web is its open source community reducing the need to 'reinvent the wheel' each time a new technology emerges. There are a substantial number of responsive web grids available for designers use. These grids give you the framework needed to build out your responsive web site design. It is usually best to begin with a grid and then adjust it to fit your needs.

  • To use a grid, select one that most closely aligns to your objective.
  • If the chosen grid matches exactly, simply copy and paste the HTML and CSS into the document and style sheet respectively.
  • If it is not a perfect match, tweak the CSS until you have a grid that works with your content.

What the grid is designed to do - besides saving you the time of creating the code - is collapse in an organized way on smaller screens. It should expand and stretch in a controlled manner on larger ones.

Coding for Responsive Design

Fluid Layouts

Coding for responsive design builds off the idea of fluid layouts, which are similar to liquid layouts, but they go a step further.

  • In liquid layouts, pages would expand in relation to the resolution, but that did not mean they always performed well at different sizes.
  • Fluid layouts use exact percentages to control the width of a content container and its gutter so they are measured in proportion and not just in arbitrary widths (like fixed layouts) or percentages.

The basic formula for a fluid layout is: target/content = result. So, for example, if the target area is 300 pixels and the content container is 930 pixels, the percentage is 300/930 or 32.25.

Media Queries

The second part of the coding deals with media queries - a concept introduced with CSS3. The applicable parts of media queries for responsive web design are the min-width and max-width attributes.

By using these attributes, a specific style can be applied to a screen based on its size. For example, you could create styles for the following min-width: 240px, 400px or 960px. When a user visits your site on a desktop the layout pulled in would be for the 960px style - if they viewed your site on a 400px screen, then the styles for a 400px min-width would be used.

Coding Tools

Several tools are available to assist in building out a site. Some of the more popular programs include Adobe Edge Reflow, TopStyle 5, or WebFlow. These programs do the behind-the-scenes coding required so your site can adjust in size based on the device it is being viewed on, saving you the time required to code it.

Sample Coding

Using the formula above and the max-width attribute, here are some snippets to help you understand how the coding works. In this example, there us a 960px wide content well with two columns inside it. The left column is 620px wide and the right column is 300px wide. There is a 10px margin (gutter) between the columns.

HTML

<div class="content-well">
<left-column>...</left-column>
<right-column>...</right-column>
</div>

CSS


.content-well{
width: 960px;
}
left-column{
float: left;
margin: 1.04%; /* 10px ÷ 960px = .0104166 */
width: 64.5833%; /* 620px ÷ 960px = .645833 */
}
right-column{
float: right;
margin: 1.04%; /* 10px ÷ 960px = .0104166 */
width: 31.25%; /* 10px ÷ 960px = .0104166 */
}

Media Query

The media query can be set up multiple ways including orientation (landscape versus portrait) and a common way is to create styles associated with various widths. In this case, this is the style for a screen with a minimum width of 420px. This style removes the float attribute, forcing the content to stack instead of trying to position itself horizontally. If the screen had a minimum width of 600px, a style created for that width would be used instead.

@media all and (max-width: 420px) {
right-column, left-column{
float: none;
width: auto;
}
}

Combine Resources

Responsive web design in many ways represents a freeing up of resources. No longer should designers and developers be creating multiple sites for multiple platforms. Instead they can combine resources and collaborate to determine what the end user will use the content for - and design a site that can deliver that information regardless which device the end user chooses.

Basics of Responsive Web Design