Understanding Responsive Web Design: Clear Concepts and Practical Applications

Tweet
This entry is part 1 of 6 in the series Understanding Responsive Web Design

Understanding Responsive Web Design

Some readers may wonder, not unreasonably, why there’s been such a rapidly growing interest in “Responsive Web Design” (RWD) and why it has become more and more essential for developers to achieve a deep and detailed knowledge of this nascent technique. This term is often brought up as an anecdotal buzzword uttered to convey an understanding of cutting-edge mobile technology.

We’re not going to talk abstractly or philosophically about responsive web design; we’re going to define it clearly and demonstrate some real-world technical applications of the technique. The advantages of responsive web design becomes very clear if you take a moment to examine and understand the realities of modern web and mobile technologies, and implementing a responsive design is easier than you might think.

How we experience the Internet is changing very quickly, and the impetus for this change is the advent of powerful and diverse mobile devices. A very recent study predicted that Internet surfing via mobile devices will surpass desktop surfing within 3 to 5 years. This rapid transformation from desktop to mobile makes it critical for developers to stay ahead of the curve and accommodate the latest industry demands.

The fast and inevitable shift from desktop to mobile means that web designers will have to plan their projects not just for devices with keyboard and mouse, but also for smartphones, game consoles, and tablets. The number of these devices has increased exponentially, which in turn has increased the variety of browsers specifications and screen resolutions. It is obvious that creating a new version of the site specifically for each and every screen size and device would be impossible or at least highly impractical.

This is precisely how Responsive Web Design comes to our rescue by providing mobile developers with a way to accommodate the vast and ever-growing variety of screens and devices pragmatically and efficiently. It’s a new approach that takes into account several important factors such as user behavior, screen size, and operating platform. Responsive design responds automatically and optimally to the preferences of the user, regardless of their screen or software of choice.

Thinking in these terms, you might think that this practice is already widely used through the use of fluid layouts, media queries (which give the opportunity to inspect the characteristics of the device on which the work will be shown), and various scripts able to adjust the layout of web pages. A common oversimplification of responsive web design is to define it as nothing more than a design the one that takes into account the size of the screen and automatically makes adjustments to the content. But, responsive design is much more than that; it’s an approach that takes many other design aspects into consideration. RWD is, in this sense, a new way of thinking. It’s also easier than you might imagine.

What Exactly is Responsive Web Design?

There is a wide variety of information on responsive web design available all over the Internet, and much of that information is abstract, philosophical, and anecdotal. If you’re looking for a clean, concrete understanding of the foundation of responsive web design, it comes down to three techniques that all work in conjunction:

  1. Fluid Images;
  2. Fluid Grids;
  3. Media Queries.

Let’s have a closer look at each of these three key components of responsive web design.

Fluid Images and Grids

What is the best way to design a website that will be viewed on hundreds of different screen sizes, some of which may not even exist yet? The best approach is not one consisting of catering to specific devices; it’s one that more generally makes your layout malleable, flexible, and adaptable to screens of all sizes, even sizes that are yet to be popular.

Years ago, when flexible layouts were not so popular, the only flexible layout elements were the structural ones—that is the layout columns and the text. Images were rarely designed with flexibility in mind, and in many cases the images could easily break and display incorrectly. Luckily, images are now included among the layout elements that can be automatically adjusted, and their inclusion into responsive design promotes the conservation of the greater conceptual design and the proposition of the original idea of the project. Images have always been very compelling, and thankfully, your responsive layout can and should preserve this powerful aspect of your responsive interface. Imageless mobile websites are a relic of a more primitive mobile design approach.

From a technical standpoint, creating flexibility for your imagery is one of the most important problems to solve when you are creating a responsive design. There are several techniques to resize images proportionately; some of them very simple to apply. The most popular, cited in the article by Ethan Marcotte on fluid images is to set two simple CSS rules: max-width, and height:auto, like this:

img
{
   max-width: 100%;
   height: auto;
}

The first rule ensures that images remain in their container box without falling out; omitting both the height and the width of the element; you let the browser resize the images relatively to the device. The maximum width of the image is set to 100% of the screen width or the browser, so that when the overall viewing width decreases, the images will scale down proportionally (rule, it should be remembered, not supported by IE ). If the image dimensions are too restricted and its view is not optimal using older browsers, the problem can be solved thanks to JavaScript, as explained in the article linked above.

Generally, this rule works beautifully on its own. However, if you are working on a very old site where height and width of the images are programmed directly into the HTML code as attributes, responsive imagery might be compromised. To avoid this, you don’t have to change the HTML code necessarily, but just adding the CSS rule height: auto and your imagery will render and scale correctly.

Another technique to consider is the one presented by Filament group that aims not just to resize images proportionately, but also to reduce the resolution of images on smaller devices in order to not waste space, loading time, and expensive mobile bandwidth on more modest mobile screens.

This requires some files available on Github: a JavaScript file (rwd-images.js), Htaccess file, and an image (rwd.gif). Then, in the HTML code, we refer to both images: a small one with an “R” prefix to clarify that must be adaptable (“responsive”), and for the large one, data-fullsrc (which is an attribute enabled by HTML5, for details you can visit this page).

Implementing this technique will look something like this:

img <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

For any screen wider than 480 pixels, the image with the higher resolution (largeRes.jpg) will be loaded. The JavaScript file inserts an element that allows the page to separate the adapted images from the others. When the page is loaded, all files are written in their original form, and only large or small images are loaded according to the previous settings. If this technique had not been used, all the images (even those that are too large to be used used) would be downloaded…wastefully. This technique prevents unnecessarily slow page loads, unresponsive layouts, and wasted bandwidth. Additionally, it’s properly supported by modern browsers (including IE8) and mobile devices too.

Media Queries

Media Queries are probably the most important tool that a web designer has to make their sites responsive. This set of rules enables developers to create fluid designs that adapt without distortion or loss of quality to the viewer’s device. It’s good to point out that this set of guidelines (or rules) should be stored in a separate CSS stylesheet from the one in which there are those for the general style (which is usually named style.css). This practice is recommended but not required, so you can choose to do it or not. Personally, I prefer a separation of the styles for my own organization, so I create a new CSS sheet which will report exclusively this type of information (do not forget to link this new stylesheet in the HTML code).

<link href="media-queries.css" rel="stylesheet" type="text/css" />

You can write as many media queries as you like. Their main purpose is to apply different CSS rules in order to obtain different layouts, depending on the width of the display window afforded to your content. The values in the media queries have the peculiarity of being expressed in percentages and not pixels, and it’s this specific choice that makes the various page elements fluid and flexible. Percentages expand and contract with varied screen sizes; fixed pixel CSS declarations are intrinsically unresponsive, and will result in rigid layout elements that do not scale at all.

An example of CSS code you might write could be this:

@media screen and (max-width: 980px)
{
   #pagewrap
   {
      width: 95%;
   }

   #content
   {
      width: 60%;
      padding: 3% 4%;
   }

   #sidebar
   {
      width: 30%;
   }
}

By setting the series of CSS rules above, devices whose screens have a maximum width of 980 pixels, the box content will occupy 60% of the width (with a 3% top and bottom padding and a 4% lateral one), while the sidebar will occupy 30% of the total width of the screen.

Media queries help to take into account multiple display possibilities and, consequently, the organized style rules can be modified quickly and easily. Using the same procedure, we can set different rules for screen widths smaller than 650 pixels, smaller than 480 pixels, and so on.

Conclusion

We’ve gotten past the buzzwords, philosophy, and conjecture of “responsive web design” and into clear conceptual understandings and truly technical applications. We’ve defined its basic features and how to start implementing the responsive approach with real examples. In the following articles, we’ll talk about fluid and grid layouts and how to manage font and images in our website.

Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!

Understanding Responsive Web Design

Responsive Web Design: Fluid Layouts >>

Free Chapter! HTML5 & CSS3 for the Real World

Get a free chapter of SitePoint's new book, the second edition of our popular HTML5 & CSS3 for the Real World and receive updates on our latest offers.

  • http://www.lexolutionit.com/ Maneet Puri

    Thanks Annarita for the nice information. Responsive website design as a trend is slowly growing into a parameter to judge quality websites by many, all thanks to shift in technology paradigm. Even I have written an article that you can Google by the name “Does my Website need a responsive website design”. Do Let me know how you feelabout it!

  • http://ChiefAlchemist.com Mark Simchock

    Suggestion: While the hands-on technical tools are certainly important, perhaps it would help to put more emphasis on the when and the why. The challenge I see with RWD is that you are architecting multiple experience from the same set of (content) building blocks. Given the twists, turns and compromises this could be as consuming as 2 or 3 different specialized / dedicated sites. Or so it would seem.

    How to build is relatively easy when compared to what to build. We are no longer design websites but architecting experiences – experiences that cascade over multiple devices and use-cases. IMHO, that is a significant and too often overlooked shift, yes?

  • http://www.netspysoftware.com/flexispy.html Derek

    This is a very informative article. I recently got my hands involved in website designing and I know that there are still a lot of things to learn. I have to keep myself updated on the latest design trends too.

  • Alan

    Hi Annarita,
    Ive read that ‘feature phones’ do not support media queries.
    Is this true?
    What is the best way around this?

    Alan.

  • http://www.softwaremadeeasy.biz Balki

    This gave me a clear starting point for the buzzword Responsive Web Design. Thanks