Responsive Web Design and Media Queries

The term Responsive Web Design which is most commonly known as RWD refers to the aim of designing web pages in such a way that web pages can be viewed with the maximum ease along with great user experience over a wide range of devices which may include small screen sized mobile, tablet or large sized computer monitors. Responsive Web Design is considered as the key feature for better user experience on portable devices.

So let’s get into responsive web design and see how it actually works –

To design a responsive web page we need basic knowledge of Media Query.

Media Query usually instructs any of the modern browser to use CSS according to the width of device whether it’s portable device or computer monitor. Whenever we design responsive web page we always add different css rules for different screen sizes using the media queries.

Media Query includes two quite new terms which are min-width and max-width the term min-width refers to minimum size of screen required to allow CSS on device, similarly max-width refers to maximum size upto which CSS can be allowed on device.

Here is how a media rule looks like-

 

@media only screen and (min-width: 320px)
  {
   /*Generic CSS Syntax*/
 }

@media only screen and (max-width: 320px)
   {
   /*Generic CSS Syntax*/
 }

Apart from media rules we also have to add html meta tag. Why do we use meta tag? We use

• “width=device-width” as meta content to make sure that the width of browser adapts the width of device.
• “initial-scale=1” as meta content to set the default zoom level to 100%.
• “maximum-scale=1” as meta content because if device switches from portrait to landscape view it’s layout may distort.
• “user-scalable=no” as meta content if we don’t want user to zoom the web page.

 

Let’s get into code to understand media rules which are considered as basic aspect of responsive web page design in more appropriate manner, Lets begin with a very basic HTML layout. Whenever we code css for responsive web page we must use percent as a unit for widths. Keeping this in mind let’s code the css for html layout.

Here is the html and css structure of layout –

You can easily see in the above html code we have created a normal layout which consists header, banner, 4 category blocks and footer. We have used three css media rules to make the layout responsive which are as follows –

• @media screen and (min-width:1170px){…………………… }This media query applies to all of the screen sizes which are larger than 1170px
• @media screen and (max-width:1170px){…………………… }This media query applies to all of the screen sizes which are smaller than 1170px
• @media screen and (max-width:768px){…………………… }This media query applies to all of the screen sizes which are smaller than 768px

We have already defined a media rule for max screen size 768px so the media rule for 1170px will work for screen sizes larger than 768px and not for screen sizes lesser than 768px.

We have just removed the float property from the category blocks to stack the layout and to display category blocks one below another.

Now we have got a clear picture of how media queries actually works for different screen sizes and how we can code different css for different screen sizes using media rules.

After media query we must discuss a little about the “Twitter Bootstrap” which is the considered as the best Responsive CSS Framework for framing responsive web pages. Bootstrap is also based on the same basic concept of media rules but at the very advanced level.

Bootstrap is a grid based designing framework which have twelve grids by default and have fixed breakpoints for different screen sizes to stack the layout for a better user experience by re-sizing and re-adjusting the grids. All the information about how bootstrap actually works can be collected from Bootstrap docs, However we gonna discuss about bootstrap soon till then let’s try to make a web more better place via responsive web page for better UI and UX.