<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">

2013 - The Year of Responsive Web Design!

Smita Bhole Jan 03, 2013

Flexible Grids Media queries CSS3 Grid Layout Responsive Web Design Technology

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!

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

Responsive Web Design Features

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

  1. Media queries and media query listeners
  2. 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

  3. A Flexible Grid-based layout that uses relative sizing
  4. 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

  5. Flexible images and media, through dynamic resizing or CSS
  6. 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
    2. Use the @import rule to import style rules from other style sheets:

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

    3. Option 2
    4. 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;
                  }
          }
      
    5. Option 3
    6. 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">
  • Step 2: HTML Structure
  • 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.

  • Step 3: Media Queries for different screens
  • 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

    Similar Blog

    e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.