Getting started with Responsive Web Design

Responsive web design is addressed to devices, screen sizes and orientations by creating flexible, fluid and adaptive websites. Previously, designers and developers were used to create the desktop Web versions with most common screen resolution along with a separate mobile version but that approach is totally changed by adapting Responsive Web Design that can render layouts almost in any screen and no matter what resolution it is.

Key features of Responsive Web Design

Three key technical features are required to be implemented for responsive Web design:

  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS

The idea is to display the website according to the needs of user’s device capabilities and this shouldn’t affect designers creativity in any way. Responsive Web Design has all the required capabilities and it is not limited to display the website as per the screen size of the user’s device but it also have control over the contents. This means thinking about what the mobile user should see first when visiting the website and putting the remaining content in a different order. One can hide any of the content which is less important when viewing from the mobile device. Fonts or interaction areas can be changed to achieve the proper touch environment.

Media Queries

Initially media types were used to apply CSS for screen as well as print. Below are the examples…

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”printfriendly.css” media=”print” />

Now, we have CSS 3 to scope styles using media queries. You can use combine queries using AND and NOT. It includes width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

Below are the three different ways to implement media queries:

  1. Use the @import rule to import style rules from other style sheets:

    @import url(style600min.css) screen and (min-width: 600px);

  2. Put media queries directly in the style sheet, as shown in

    #nav {float: left;}
    #nav ul {list-style: none;}
    @media screen and (min-width: 400px) and (orientation: portrait)
    {
    #nav li {float: right; margin: 0 0 0 .5em; border:1px solid #000000; }
    }
    @media screen and (min-width: 800px)
    {
    #nav {width: 200px; }
    #nav li {float: left; margin: 0 0 0 .5em; border: none}
    }

  3. Include a query in a linked style sheet’s media attribute:

    <link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 800px)” href=”style800.css” />

Because of the cascading nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top are cascaded to the matching styles in the rule, or even completely overwritten.

Know about the Viewport

While testing media queries on mobile browsers, when you find that media queries are not actually being applied though they are correct, make sure you have added the Viewport meta tag. The Viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

<meta name=”viewport” content=”width=device-width”>

Other viewport settings include maximum-zoom and initial-scale.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

Flexible Grids

A flexible grid-based layout is very important element of the responsive design. This means for positioning and for laying out margins and spacing. Layouts and text sizes are typically defined in pixels but a pixel can be one dot on one device and eight dots on another so approaching responsive Web design in pixel would be cumbersome. To avoid this, one can use pixel-based layouts and start using percentages or the em for sizing.

By defining text sizes, widths and margins on percentages or on the em, you can turn a fixed size into a relative size and achieve a flexible grid and text size system. Formula for calculating the em is very simple:

target ÷ context = result

Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24px ÷ 16px = 1.5

This results in the following CSS style would be as below:

h1 {font-size: 1.5em;}

If you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:

12 ÷ 24 = 0.5

And the CSS style is:

h1 a {font-size: 0.5em;}

You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible Images and Media

The last feature of responsive Web design is flexible images and media. This feature allows your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container.

img, object {max-width: 100%;}

Another option is cropping images with CSS by applying overflow:hidden which crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.