Understanding Responsive Web Design: Clear Concepts and Practical Applications

Share this article

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!

Frequently Asked Questions (FAQs) on Responsive Web Design

What is the importance of responsive web design in today’s digital world?

In today’s digital world, where users access the internet from a variety of devices with different screen sizes, responsive web design is crucial. It ensures that your website looks and functions optimally on all devices, whether it’s a desktop, laptop, tablet, or smartphone. This enhances user experience, as they can easily navigate and interact with your site, regardless of the device they’re using. Moreover, responsive design also improves your site’s SEO ranking, as Google prioritizes mobile-friendly sites in its search results.

How does responsive web design work?

Responsive web design works by using flexible layouts, flexible images, and CSS media queries. Flexible layouts use relative units like percentages instead of absolute units like pixels, ensuring the layout adapts to the screen size. Flexible images are also sized in relative units to prevent them from displaying outside their containing element. CSS media queries allow the page to use different CSS style rules based on the device’s characteristics, such as its width, height, or orientation.

What are the key principles of responsive web design?

The key principles of responsive web design are fluid grids, flexible images, and media queries. Fluid grids allow the layout to resize dynamically based on the screen size. Flexible images resize themselves to fit within their containers. Media queries enable the application of different styles for different devices and screen sizes.

How does responsive web design benefit SEO?

Responsive web design benefits SEO in several ways. Firstly, Google gives preference to mobile-friendly websites in its search results. Secondly, it eliminates the need for duplicate content, which can harm your SEO efforts. Lastly, it improves user experience, which is a key factor in Google’s ranking algorithm.

What are the challenges in implementing responsive web design?

Implementing responsive web design can be challenging due to the need to cater to various devices with different screen sizes and resolutions. It requires careful planning and testing to ensure the website looks and functions well on all devices. Additionally, it may require more development time and resources compared to traditional web design.

How can I test if my website is responsive?

You can test your website’s responsiveness using various online tools like Google’s Mobile-Friendly Test. You can also manually resize your browser window to see how your website adjusts to different screen sizes.

What is the difference between adaptive and responsive design?

While both adaptive and responsive design aim to optimize websites for different devices, they do so in different ways. Responsive design uses fluid grids and flexible images to dynamically adjust the layout based on the screen size. On the other hand, adaptive design uses static layouts that are designed for specific screen sizes.

How does responsive web design improve user experience?

Responsive web design improves user experience by ensuring that your website is easy to navigate and interact with, regardless of the device being used. It eliminates the need for users to zoom in or scroll horizontally to view content, leading to a more enjoyable and seamless browsing experience.

Can I use templates for responsive web design?

Yes, there are many templates available that are designed to be responsive. These can be a great starting point, especially if you’re new to responsive web design. However, it’s important to customize these templates to suit your unique needs and brand identity.

What are some best practices for responsive web design?

Some best practices for responsive web design include designing for mobile first, keeping your design simple and clean, using flexible images and grids, and testing your design on various devices and screen sizes. It’s also important to keep load times in mind, as slower sites can lead to a poor user experience.

Annarita TranficiAnnarita Tranfici
View Author

I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HTML, CSS, Web Design, and Adobe Photoshop.

Interface DesignResponsive Design
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week