Project Management

How to get started with Responsive Web Design

Ryan Boudreaux explains the concept and methods behind Responsive Web Design. Here are some easy examples to help you get familiar with RWD.

Buzzwords and hot topics making the rounds in web dev circles these days include the phrase "responsive web design," also referenced by the acronym "RWD." The phrase was coined two years ago by Ethan Marcotte and first introduced in his List Apart article "Responsive Web Design" and then his A Book Apart format, Responsive Web Design. If you have not read his article, I suggest you take time to review his key points, including:

  • flexible foundation
  • fluid grids
  • flexible images
  • how "responsive architecture" in physical spaces became the catalyst for his forward thinking of practicing responsive web design
  • implementing the media query

What is RWD?

Still in its infancy, RWD is making scholarly attempts and inroads at defining the technologies necessary to effectively display websites across all devices. A responsive website design starts with the primary task of incorporating CSS3, media queries, the @media rule, fluid grids that use percentages, EM's, flexible images, flexible videos, and fluid type, all of which allow the responsive website to adapt its layout to the viewing device, user agent, and environment.

Why RWD?

The past few years have seen an explosion of browser-enabled devices hitting the market, including gaming consoles, tablets, notebooks, e-readers, smart phones, and smartphones, each utilizing its own browser, screen resolutions, orientations, and layouts. As this growth continues, users expect their web experiences to translate accordingly, and demand for scalable and responsive web design will persist and continue to expand. According to comScore Data Mine, "U.S. Smartphone Population Reaches 110 Million Consumers," nearly 110 million Americans own a smartphone, and by the end of 2012, smartphone owners will become the new mobile majority in the U.S. They also took a nostalgic look back at the rise of the iPhone, stating that the iPhone 4 accounts for the largest overall share at nearly 40 percent of iOS smartphones in May 2012.

Figure A

RWD examples

Before I get into the nuts and bolts of RWD, I thought it would be good to reveal examples of websites that utilize the responsive technology in their design, and not just any, these are just a few of the 20 favorite responsive sites hand-picked by the guru of RWD himself, Ethan Marcotte.

His first pick is Elliot Jay Stocks, the founder of typography magazine 8 Faces. Our first example of Elliot's site is displayed in full-screen view at a resolution of 1680X1050, as shown in Chrome 20.0 in Figure B.

The same Elliot Jay Stocks web page displayed in a simulated relative iPhone portrait view with a resolution of 320x480 as shown in Figure C:

Notice how the navigation goes from a single line to a set of three centered lines, the heading text scales to fit the screen, and the body text wraps according to the screen resolution.

The next example is Web Designer Wall, by Nick La, a Toronto-based web designer and illustrator. The first example is shown in full-screen view at a resolution of 1680X1050, as shown in Chrome 20.0 in Figure D.

The same web designer wall web page displayed in a simulated relative iPhone portrait view with a resolution of 320x480 as shown in Figure E:

Adapting your website to a RWD

The nuts and bolts of RWD start with fluid grids, media query, and adapting CSS to CSS3. Let's start with how fluid grids are created.

Fluid Grids

The fluid grid layout is a starting point for an adaptable foundation in responsive web design, allowing sites to scale with the browser window no matter the resolution or screen size and using proportions in place of the typical fixed-width represented in pixels or percentage values applicable to most traditional web design methods. An adaptable foundation means that all the elements of a web page will render at the same relative proportions whether they are displayed full screen on a larger desktop or a smaller window. Typically, the scaled fluid grid allows websites to be adapted well to devices in either portrait or landscape orientations; however, further optimization is necessary to expand the capability beyond the desktop.

Sizing text with ems is a good example of using the flexible fluid grid, and to best get the results, we will use what has been coined The Marcotte Calculator, where:

Target ÷ Context = Result Target in this calculation is the element in question, and in this example, let's use an H1 heading of 26px. Context is the default font size of the container, which for web browsers is typically set to 16px. Therefore, we divide the target value (26px) by the font size of the container (16px) and the result is 26 ÷ 16 = 1.625, which means that the H1 heading is 1.625 times larger than the default font size, or 1.625em, which when conveyed in a style sheet might look something like this:
h1 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.625em;
}

Now that the target is expressed in proportions, it can be sized to fit in relationship to the size of the container.

Taking this another step, let's look at two example articles contained within a section; first, we will display the typical traditional settings with fixed pixel widths:

body {
      background-color:#CCC;
}
h1 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.625em;
}
#blog {
      width:1020px;
      margin:0 auto;
      padding:10px;
      background-color:#D2EEEB;
}
#blog .article {
      width:800px;
      float:right;
      padding:5px;
      background-color:#E3FDF8;
}
#blog .aside {
      width:180px;
      float:left;
      padding:5px;
      background-color:#A5F1EA;
}
#blog p {
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
}
When viewed it appears as displayed in Chrome 20.0 in Figure F:

However, when we scale this page into a simulated relative iPhone portrait view with a resolution of 320x480 as shown in Figure G, notice that the content does not scale, the article content runs off to the right side:

Figure G

To get this page to the first step of RWD, we need to convert our absolute pixel references into proportional ems for the elements. Let's say our default browser window is a maximum of 1680px wide. We now convert our element styles from absolutes to proportions, for example, the #blog style with a width of 1020px needs to be divided by 1680px which equals 0.60714285714285714285714285714286, and then we need to convert this result to a percentage by multiplying it by 100, which equals 60.714285714285714285714285714286%. Yes, we're going be using these long numerical results; it might look ugly in the CSS, but browsers and computers love them. So now our #blog style looks like this:

#blog {
      width:60.714285714285714285714285714286%; /*Assume the native width of browser window is 1680px */
Converting the rest of the styles we get the following results (Note: I've renamed the styles with the added "_rwd" for the demonstration files):
#blog_rwd {
      width:60.714285714285714285714285714286%; /*Assume the native width of browser window is 1680px */
      margin:0 auto;
      padding:0.98039215686274509803921568627451%;
      background-color:#D2EEEB;
}
#blog_rwd .article_rwd {
      width: 78.431372549019607843137254901961%;
      float:right;
      padding-right:0.49019607843137254901960784313725%;
      background-color:#E3FDF8;
}
#blog_rwd .aside_rwd {
      width:17.647058823529411764705882352941%;
      float:left;
      padding-left:0.49019607843137254901960784313725%;
      background-color:#A5F1EA;
}
#blog_rwd p {
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:.875em;
}
When viewed at a resolution of 800x600 pixels, the web page now resizes to fit the screen as displayed in Chrome 20.0 in Figure H:

The demonstration page is not 100% there just yet, and we still have some more work to do. In the next segment, I will review media types, media queries, and the @media rule, which will bring our web page closer to a responsive web design. The example HTML and CSS is available for download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks