• Skip to primary navigation
  • Skip to content
  • Skip to footer

Developer Fox

Code Like Pro

  • Home
  • Blog
  • Contact Us
  • About Us
You are here: Home / CSS / What is Responsive Web Design ( RWD) ?

What is Responsive Web Design ( RWD) ?

May 6, 2018 By Adluri Surya Teja Leave a Comment

102
SHARES
ShareTweet

If you are looking for a one stop guide to Responsive Web Design which is known as RWD in short, then you are at the right place. In this article you are going to learn about the concepts of RWD and how it’s used with some good examples.

What is Responsive Web Design?

Responsive Web Design makes your web page look good on all devices. Responsive web design uses only HTML and CSS. Responsive web design is not a program or a JavaScript.

In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them. In short, we need to practice responsive web design.

The Ingredients:

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes two core ingredients:

1. A flexible, grid-based layout

2. Media queries, a module from the CSS3 specification.

In the next sections, we’ll look at each in turn — the flexible grid, and CSS3 media queries — creating a more flexible, more responsive approach to designing for the web. As we do so, we’ll have created a design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s needs.

1. A flexible, grid-based layout

Often, the first layer of our grid-based layouts looks like this:

#page { width: 960px; margin: 0 auto;}

We create an element in our markup, give it a fixed width in our CSS, and center it in the page. But when we’re thinking flexibly, we instead need to translate a design created in Photoshop into something more fluid, something more proportional. How do we begin?

Contextual healing

Consider this line we are creating a heading h1 having font-size of 24px .To make the webpage flexible we need to make the font-size flexible as well.

h1 { font-size: 24px; font-style: italic; font-weight: normal;}

To do so, we’ll need to do a bit of math: we’ll simply take the target font size from our component, and divide it by the font-size of its containing element — in other words, its context. The result is our desired font-size expressed in relative, oh-so-flexible ems. In other words, relative type sizes can be calculated with this simple formula:

target ÷ context = result

So with our formula in hand, let’s turn back to that 24px headline. Assuming that our base font-size: 100% on the body element equates to 16px, we can plug those values directly into our formula. So if we need to express our h1’s target font size (24px) relative to its context (16px), we get:
24 ÷ 16 = 1.5
And there we are: 24px is 1.5 times greater than 16px, so our font-size is 1.5em:

h1 { <strong class="markup--strong markup--p-strong">font-size: 1.5em;</strong> /* 24px / 16px */ font-style: italic; font-weight: normal; }

That’s it now we have flexible heading in our webpage , let’s move forward .

Creating a flexible grid:

Let’s move forward by considering an example : we’ve a web page inside which we has a container named .blog , inside of that .blog we’ve another two sub containers named .blog .main and .blog .other respectively.

#page { 
margin: 36px auto; 
width: 960px; 
} 
.blog { 
margin: 0 auto 53px; 
width: 900px; 
} 
.blog .main { 
float: left;
 width: 566px; 
} 
.blog .other { 
float: right;
 width: 331px; }

Nice and neat: we’ve set the width of #page to 960 pixels, centered the 900px-wide .blog module within that container, set the widths of .main and .other to 566px and 331px, respectively, and finally floated the two columns opposite each other. But the result is downright inflexible. Fixed at a width of 960px, our page is blissfully indifferent to changes in viewport size, forcing a horizontal scrollbar upon the reader if the window drops even slightly below 1024 pixels . In short, we can do better.

From pixels to percentages: Instead of pasting the pixel values from directly into our CSS, we need to express those widths in relative,proportional terms. Once we’ve done so, we’ll have a grid that can resize itself as the viewport does, but without compromising the design’s original proportions.

Let’s start at the outermost #page element
#page { margin: 36px auto; width: 960px; } will change to #page { margin: 36px auto; width: 90%; }
I’ll confess that I arrived at 90% somewhat arbitrarily, doing a bit of trial and error in the browser window to see what looked best. By setting our #page element to a percentage of the browser window, we’ve created a container that will expand and contract as the viewport does . And as that container is centered horizontally within the page, we’ll be left with a comfortable five percent margin on either side.

Let’s move to .blog container:

.blog { margin: 0 auto 53px; width: 900px; }

Instead of a value set in pixels, we need to express .blog’s width of 900px in proportional terms: specifically, describing it as a percentage of the width of its containing element. And this is where our beloved target ÷ context =result formula comes back into play. We already know our target pixel width for our blog: that’s 900px,What we want is to describe that width in relative terms, as a percentage of .blog’s containing element. Since .blog is nested within the #page element, we’ve got our context — namely, 960 pixels, the width of #page . So let’s divide our target width for .blog (900) by its context (960):
900 ÷ 960 = 0.9375
We’re left with a result of 0.9375. Doesn’t look like much, I’ll admit. But by moving the decimal over two places we’re left with 93.75%, a percentage we can drop directly into our CSS:

.blog {
 margin: 0 auto 53px;
 width: 93.75%; /* 900px / 960px */ 
}

Let’s move to other two sections :

.blog .main {   float: left;   width: 566px; } 
 
.blog .other {   float: right;   width: 331px; }

Our left-hand content column is floated to the left, and set at 566px; the additional content is floated opposite, sized at a width of 331px. Once again, let’s replace those pixel-based target widths with percentages. But before we drop those values into our target ÷
context = result formula, it’s important to note that our context has changed. Last time, we divided the width of our blog module by 960px, the width of its container (#page). But since they’re nested inside .blog, we need to express our columns’ widths in relation to 900px — the width of the blog. So we’ll divide our two target values (566px and 331px) by 900px, our new context:
566 ÷ 900 = .628888889 331 ÷ 900 = .367777778
Once we move our decimal points we’re left with 62.8888889% and 36.7777778%, the proportional widths of .main and .other:

.blog .main {  
 float: left;  
 width: 62.8888889%;  /* 566px / 900px */
 } 
 
.blog .other {  
 float: right;  
 width: 36.7777778%;  /* 331px / 900px */ 
}

But building a flexible grid isn’t entirely about the math. The target ÷ context = result formula makes it easy to articulate those proportions into stylesheet-ready percentages, sure — but ultimately, we need to break our habit of translating pixels from Photoshop directly into our CSS, and focus our attention on the proportions behind our designs. It’s about becoming context-aware: better understanding the ratio-based relationships between element and container. But a fluid grid is just our foundation, the first layer of a responsive design. Let’s move onto the next step.

2. Media Queries

Media queries, an incredibly robust mechanism for identifying not only types of media, but for actually inspecting the physical characteristics of the devices and browsers that render our content. Let’s take a look:

@media screen and (min-width: 1024px)
{
 body { font-size: 100%; } 
}

Now, every media query — including the one above — has two components:
1. Each query still begins with a media type (screen). 2. Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px).

Think of a media query like a test for your browser. When a browser reads your stylesheet, the screen and (min-width:1024px) query asks two questions: first, if it belongs to the screen media type; and if it does, if the browser’s viewport is at least 1024 pixels wide. If the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way. Our media query above is written as part of an @media declaration, which enables us to put queries directly inside a stylesheet. But you can also place queries on link elements by inserting them into the media attribute:

<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width: 1024px)” />

Or you can attach them to @import statements:

@import url(“wide.css”) screen and (min-width: 1024px);

I personally prefer the @media approach since it keeps your code consolidated in a single file, while reducing the number of extra requests the browser has to make to your server. But no matter how you write your queries, the result in each scenario is the same: if the browser matches the media type and meets the condition outlined in our query, it applies the enclosed CSS. Otherwise, it won’t.

It’s worth noting that the language used to describe the features can be a bit. . . dense. Here are two quick guidelines that helped me sort it out:

1. In the spec’s language, every device has a “display area” and “rendering surface.” Think of it this way: the browser’s viewport is the display area; the entire display is the rendering surface. So on your laptop, the display area would be your browser window; the rendering surface would be your screen.

2. To test values above or below a certain threshold, some features accept min- and max- prefixes. A fine example is width: you can serve CSS conditionally to viewports above 1024 pixels by writing (min-width: 1024px), or below 1024 pixels with (max-width: 1024px).

you can find common device breakpoints here

Thank you for being with me towards the end of this article. I just realized it has become one of those lengthy articles , so let’s conclude this now with all the CSS basics covered , stay tuned for more advanced CSS stuff .

Filed Under: CSS

Adluri Surya Teja

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

  • Home
  • Privacy Policy
  • Disclaimer
  • Contact Us

Developer Fox

Hello, This is Akhil Mukkamala. Founder of Developer Fox. "Risk Taker, Programmer, Blogger, Startup Enthusiast". Yea, That's about ME.
Wanna Contribute to Developer Fox ? Hit our Contact Us Page.
Have Some Cool Ideas. ? Let's Discuss. Open for a Coffee.

Categories

  • CSS
  • Editors' Take
  • Featured
  • Programming
  • Science
  • Security
  • Technology
  • WordPress

Navigate to

  • Home
  • Privacy Policy
  • Disclaimer
  • Contact Us

DMCA Monitored

DMCA.com Protection Status

Copyright © 2019 · Developer Fox