Responsive Web Design

These days’ mobile devices are really very essential to promote business. Almost every client wants a mobile version website to promote their business. But it’s really expensive to create separate website for each mobile device and even it will be painful to maintain multiple website for a single business.

Responsive web design is the solution of the above issue and it can work on screen size, platform and orientation. If you follow the responsive web design process then the developed website should automatically switch to a compatible resolution, images size and even the design format.

How to create your first Responsive Web Site?

CSS is one of the most important parts to create Responsive Web Design. If you need to know more about the CSS then please check CSS tutorial from our website. Let’s I assumed that you are one of the well know CSS writer and you have a good concept on CSS.

Follow few easy steps here below, where you can create your first responsive page very quickly.

• Check your website design width and divide them with equal twelve columns. In my layout width is 950px.
• Create a CSS file, as I have created stylesheet.css and given the first class name .row and declared css properties below.
  • .row { width: 100%; max-width: 950px; min-width: 727px; margin: 0 auto; background:#fff}
  • If you divide the 100% width with twelve columns then each column will contain 8.333333, but you have to give the width of the each column like the process below. [Formula: 1+1=2, 1+1+1=3; Example: 8.3+8.3=16.6 for two columns, 8.3+8.3+8.3=24.9 for three columns]
    • .row .one.columns { width: 8.3%; }
    • .row .two.columns { width: 16.6%; }
    • .row .three.columns { width: 24.9%; }
    • .row .four.columns { width: 33.2%; }
    • .row .five.columns { width: 41.5%; }
    • .row .six.columns { width: 49.8%; }
    • .row .seven.columns { width: 58.1%; }
    • .row .eight.columns { width: 66.4%; }
    • .row .nine.columns { width: 74.7%; }
    • .row .ten.columns { width: 83%; }
    • .row .eleven.columns { width: 91.3%; }
    • .row .twelve.columns { width: 99.6%; } make it 100%
  • Use the above class name in your html page like the below example.
    Example:
    <div class=”row”>
    <aside class=”three columns”> Left Panel</aside>
    <div class=”six columns”>Content Panel</div>
    <aside class=”three columns”>Right Panel</aside>
    </div>
• Now use the css properties below to make Responsive image. The image width will be changed according to the devices resolution.
  • img, object, embed { max-width: 100%; height: auto; }
• Now make your website all devices compatible with the media properties below. Here you can even change your design for a particular device size and resolution. Just change the class properties from inside the media handled properties.
  
  @media handheld, only screen and (device-width: 768px), (device-width: 800px) {
  .yourclassname {css properties}
  }
  
  @media handheld, only screen and (max-width: 767px) {
  .yourclassname {css properties}
  }
  
  @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) {
  .yourclassname {css properties}
  }
• Remaining things will be same as you developed other web pages.

If you need any clarification or help, please feel free to post your comments here below.