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...

10 comments
thinkus
thinkus

For those of you with an understanding of responsive design, we recently released a new tool to help you keep your stylesheets in their original format. This helps you make revisions easily and reapply any responsive calculations you may have made, following suit with your new values. Simply define you context and font-size where necessary and run your original CSS through the preprocessor and you're done! Check out: joyresponsivecss.com for more information.

lmarks
lmarks

...I cannot help but observe that pages coded in HTML 1 or 2 without CSS exhibit all the attributes of RWD with no designer effort required. The browser will do a fine job on its own if not forced by an appearance-driven designer. Once the designer attempts to impose his own preferences on the user, then unnatural acts like RWD are required to maintain usability. Simpler is faster and better.

Deadly Ernest
Deadly Ernest

fancy graphics and multimedia on the page, but I wonder what, if any, benefit it provides over basic html using percentage based settings for the frames where frames are used. Over the years I've built many web pages using basic html code and they ALWAYS adjust to suit the open size of the browser. If banners or frames are needed because that's what's needed to convey the information, then I set them based on percentages. However, I will say I usually only do websites that are providing static information, that is they are NOT collecting user input information, and they are not dragging in stuff from third parties either (no mashups for me). I do know that display issues can arise on different sized devices if their are problems with the way the CSS is set up, which is one reason why I rarely use a CSS. In short, what I wish to know is if I'm not using a huge swag of graphics, just a lot of text what benefits does TWD give over basic html code, or would you class basic html as RWD to begin with?

ncodetechnologies
ncodetechnologies

I think Responsive Website Design is good for all. Because it works perfectly on almost all devices, there is no need of mobile friendly design. So it reduce the webmaster's work as he need to monitor only one site. Also your website's look remains almost same which is good as per user perspective. Check this website http://www.ncodetechnologies.com/

clarencelouie
clarencelouie

Can you help me to build a perfect responsive website?

charlesdavid
charlesdavid

Hi friends, This is charles. While surfing i just stumbled this website http://www.perfuture.com and i had a doubt? All i need to know is most of the companies are moving to the responsive web designing and making their presence through mobile but, do all the customers use smartphones or iPads or Tablets to check the business websites? And do all the companies getting source from the following web designs?

richardbarker
richardbarker

I believe this is one of the most important points for new web designers/marketers to get. A lot of new designers coming out of school have a great grasp on modern design and can make a great looking page/site. But to have it direct the visitation to the correct call to action is where the real talent lies. Great article brother!