+91 9952732367

What is Responsive Design?

Responsive Design is nothing but Design Compatibility (ie. How your site adapts for various devices like phone, tablet, notebook and Desktop systems).

Nowadays everyone wants a mobile version of their website. In Classic approach one design for mobile and one design for Tablet Pc and one design for Desktop PC’s. Today we have endless new resolutions and new devices. We cannot do separate design for all the devices.

How to solve those Problems?

Responsive web design is an approach that design and development respond user’s behavior and environment based on screen size, platform and orientation.  Responsive web design achieved by flexible grids and layouts, responding Images and use of CSS media queries.  In other words there is no need for different design and development for each device.

Simple Demo with Explanation using HTML5 Boilerplate Template:

    • First you have to initialize the viewport for mobile devices or small devices
      
      <!-- Mobile viewport optimized -->
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      
      
    • After that you have to plan the Design Layouts (Header, Menu, Articles, Sidebar and Footer).

      Design layouts are achieved by using Fluid Grids
    • Use Media Queires:A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.Take Menu Navigation in the below example and see how it display for different devices.Html code for menu:
      <nav>
      <ul>
      	<li><a href="#">Menu</a></li>
      	<li><a href="#">Menu</a></li>
      	<li><a href="#">Menu</a></li>
      </ul>
      </nav>
      
      

      CSS for Mobile:

      /* ====================
      Default styles that will carry to the child style sheet
      ==================== */
      
      nav ul
      {
      margin: 0;
      padding: 0;
      }
      nav a
      {
      display: block;
      margin-bottom: 10px;
      padding: 15px 0;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      color: white;
      background: #247DD6;
      }
      nav a:hover,nav a:visited
      {
      color: white;
      }
      nav a:hover
      {
      text-decoration: underline;
      }
      
      

      CSS for Tablet:

      @media only screen and (min-width: 480px)
      {
      /* ====================
      INTERMEDIATE: Menu
      ==================== */
      
      nav a
      {
      float: left;
      width: 27%;
      margin: 0 1.7%;
      padding: 25px 2%;
      margin-bottom: 0;
      }
      nav li:first-child a
      {
      margin-left: 0;
      }
      nav li:last-child a
      {
      margin-right: 0;
      }
      /* ========================
      INTERMEDIATE: IE Fixes
      ======================== */
      nav ul li
      {
      display: inline;
      }
      .oldie nav a
      {
      margin: 0 0.7%;
      }
      }
      
      

      CSS for Desktop PC’S:

      
      @media only screen and (min-width: 768px)
      {
      /* ============
      WIDE: Menu
      ============ */
      
      nav
      {
      float: right;
      width: 38%;
      }
      }
      
      

      Different Views[Desktop,Tablet and Mobile]

      The above CSS code is written based on mobile first reponsive. After that it was written for differnt resolution like @media only screen and (min-width: 480px) and @media only screen and (min-width: 768px).

      To know more read the article CSS media queries

    • Responding Images
      
      img,object,embed {
      	max-width: 100%;
      }
      img {
      	height: auto;
      }
      
      

      It automatically shrink to the device width.

      To know more read the article Fluid Images

    • Responsive TablesTo know more read the article Responsive Data Tables

View Demo
Further Resources:


4 thoughts on “What is Responsive Design?

  1. It’s in reality a nice and useful piece of information. I am happy that you just shared this helpful info with us. Please keep us up to date like this. Thanks for sharing.

  2. Magnificent site. A lot of helpful info here. I am sending it to several friends ans also sharing in delicious. And of course, thank you for your sweat!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

About the Author:

Selvakumar Sankaravel
Hai I am Software and web developer. I studied B.Sc(Maths) in Ayya Nadar Janaki Ammal College,India and I studied MCA in Kalasalingam University,India. Now I am working as a Developer cum Project Leader at Kalasalingam University and I am doing freelancer works too.
Copyright © s3learn.com