2013 - The Year of Responsive Web Design!

2012 has been a very unusual year in the PC market. For the first time since 2001, PC sales are projected to be lower than they were in the previous year. The shift to mobile and tablets is happening at an extraordinary speed.

The changing landscape of web browsers meant that user’s expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. Today the websites needs to be smarter enough to resize its content based on screen size. The solution, of course, is to make a website that works equally well on every device.

Welcome to Responsive Web Design!

Given the rapid adoption of tablets and smartphones and the fact that users currently seem to prefer reading their news on the mobile web rather than in apps, it’s inevitable that 2013 will be the year that responsive design takes off.

What is Responsive Web?

Fig 1: Desktop Version

Fig 2: Mobile Version

A responsive website changes its appearance and layout based on the size of the screen the website is displayed on. Responsive sites can be designed to make the text on the page larger and easier to read on smaller screens. They can also be configured to make the buttons on the phone's screen easier to press.

Core Concept

Three key technical features are the heart of responsive web design:

1. Media queries and media query listeners

Responsive web technology uses media queries to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different style sheets

2. A Flexible Grid-based layout that uses relative sizing

A grid is a vertical set of guidelines that help determine shape, placement of items and overall look of each website.

One of the main things you will want to consider when looking at grids is the ability of the grid to be fluid. Because of all the different browser widths, tablets and mobile devices being used to view each website, the ability of a site to accommodate each platform is important

3. Flexible images and media, through dynamic resizing or CSS

Utilize a large image that looks good in most windows, but dynamically scales down as the browser window and/or screen resolution is smaller

• Media Queries

  There are three ways to implement media queries:

  1. Option 1

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

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

  2. Option 2

  Put media queries directly in the style sheet, for e.g.

  @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. Option 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" />

• Flexible Grids

Stop using pixel-based layouts and start using percentages or the ‘em’ (a unit of measurement based on a font’s point size) for sizing. By using text sizes, widths and margins in percentages or on the ‘em’, you can turn a fixed size into a relative size.

You need to do a little math to achieve a flexible grid and text size system. But the formula for calculating them is very simple:

Target ÷ Context = Result

For e.g.: If body font-size is 16px and h1 is 24px, then 24 ÷16 = 1.5

So, CSS would be

h1{ font-size : 1.5em;}

• CSS3 Grid Layout

It is also known as Grid Alignment or Grid. It allows for defining regions in a layout, with columns and rows, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS.

Combining the CSS3 Grid with media queries creates a powerful solution for building responsive applications.

For Instance



Fig3. Desktop Version



Fig 4. Device Version

3 Steps to Responsive Website

Let’s create our first Responsive Website in 3 Steps

• Step 1: Meta Tag

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the

.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In this example, I have a basic page layout with a header, content container, sidebar, and footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.

CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.

* for 980px or less *
@media screen and (max-width: 980px) {
	#pagewrap {width: 94%;
	}
#content { width: 65%;}
#sidebar {width: 30%;}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}

You can write as many media queries as you like. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified screen width. The media queries can be in the same style sheet or in a separate file.

Reference websites

You can find more information on Responsive Web Design on below website:

http://www.lynda.com/CSS-tutorials/Creating-Responsive-Web-Design/110716-2.html