Wednesday, 18 December 2013

What is Responsive Website Design(RWD) and how to create responsive layout please explain it !

Responsive  Design is the good way to optimize our website viewing in different kind of devices such as desktop, tablet, i pad and smarts phone. This kind of website get more traffic compare to other websites. Responsive website dynamically reduce website size and increase website loading speed for various devices resolution.   

Some responsive frameworks give ability to design responsive websites. If you design new responsive theme or change your website theme as responsive, that will definitely increase your website quality and users. also Google officially recommended Responsive web design.

For the first time in more than ten years, PC sales are expected to see a significant decrease from the prior year. In a new age where tablets and smartphones are performing the same duties as our PCs, we are seeing the face of the Internet change. now mobile will be the dominant form of web browsing.

Responsive layout and Basic structure code :-

Demo

Step (1): 1st create HTML file with CSS Id and Class for your theme.

<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1>
<title> Responsive layout basic code </title>
</head>
<body>
<header>
<h2>Responsive layout </h2>
</header>
<article id="news">
<h2>Responsive Webdesign</h2>
<section class="one">
<p>Responsive Webdesign basic code</p>
</section>
</article>
<aside>
<h1>sidebar</h1>
<p>latest new about responsive website</p>
<p>latest new about responsive website</P>
</aside>
<footer>
designed by justeffects.com
</footer>
</body>
</html>

Step (2): Add View port Meta tag in head section its very important for responsive layout.

First of all you need to trigger browser to render your website page more readable scale. So add following meta view-port tag before </head>. It will say that your website page is properly scaled inside any screen size such as mobile screen.

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1>


Step (3): now you need to add style sheet.

       you can two ways to add style sheet.

    1st way : use internal style<style> </style> tag inside </head> tag in your html file.

  
    2nd way  : external style sheet :-
          Example : <link rel=”stylesheet” type=”text/css” href=”style.css”>

Here change style.css name instead of your css file name.

Step (4): open your .css file and add CSS rules

First clear spaces and margin from all elements such as article,header etc.
    aside, article, section, header, footer, nav {display: block;}
    aside, article, section, header, footer, nav, html, body, p, h1, h2, h3, div {margin: 0;padding: 0;}
Add Some background for your theme
    html {background: #EDEDED;}
    body {margin: 0 auto;background: #fff;font: 90%/1.6 georgia,serif;}
Give some content styles
    /*content styling*/
    header {background: #F7A42F;color: #fff;margin-bottom: 2em;padding: 50px 25px 10px 0;}
    h1 {text-align: right;font-weight: normal;font-variant: small-caps;letter-spacing: .1em;}
    p {margin-bottom: 1em;}

    article h2 {font-size: 2em;font-weight: normal;margin-bottom: .2em;}
   article {text-align: justify;}
    article p {font-size: 1.2em;margin-bottom: 1em;}
    aside {font: .9em sans-serif;}
    aside h2 {font-size: 1.2em;margin-bottom: 1em;}
    footer {background: #E08B14;font: 1.2em sans-serif;text-transform: uppercase;letter-spacing: .2em;text-align: center;color: #fff;}


Step (4): Next add some media query inside your CSS

If you want to create responsive design, first you need to assign or edit some media query inside your .CSS style sheet page.

Media queries are used to skip or change CSS rules in minimum or maximum width of devices.

If you want to know various devices displayed pixel density use Wikipedia list.
/*layout styles*/
@media all and (min-width: 780px) {
/*layout*/
body {
width: 85%;
max-width: 1280px;
min-width: 960px;
}
article {
float: left;
width: 64%;
padding-left: 2.5%;
}
aside {
float: right;
width: 26%;
padding: 0 2.5%;
border-left: 1px solid #aaa;
}
section {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid black;
}
section:last-of-type {
border-bottom: none;
}
footer {
clear: both;
padding: 25px 0 15px;
}
}
@media all and (min-width: 481px) and (max-width: 780px) {
/*layout*/
body {
width: 90%;
max-width: 780px;
min-width: 485px;
font-size: 80%;
}
article {
float: left;
width: 56%;
padding-left: 2.5%;
}
aside {
float: right;
width: 34%;
padding: 0 2.5%;
border-left: 1px solid #aaa;
}
footer {
clear: both;
padding: 25px 0 15px;
}

/*content styles*/
h1 {
font-size: 2.4em;
}
footer {
font-size: 1em;
}
}
@media all and (max-width: 480px) {
/*layout*/
body {
width: 90%;
max-width: 480px;
}
article {
padding: 0 5%;
}
footer {
padding: 25px 0 15px;
}
/*content styles*/
header {
padding: 25px 15px 5px 0;
}
h1 {
text-align: right;
font-size: 2em;
}
article {
text-align: left;
margin-bottom: 1em;
}
aside {
border-top:2px solid blue;
padding: 1em 2% 0;
line-height: 1em;
}
footer {
font-size: .8em;
}
}
Now save your file and open this file in your browser. Scale your browser to check its responsive.and how it work.


   CSS media query for smartphones is:

    @media only screen and (max-width: 640px) { … }


    Targeted media queries for smartphones (landscape), tablets (portrait), desktops (narrow) is:

    @media screen and (min-width: 480px) and (max-width: 800px) {..}


    Targeted media queries for smartphones (portrait) is :

    @media screen and max-width: 479px){..}


    Targeted media queries to adjust flows and looks on various devices is :

    Landscape Mode :

    @media all and (orientation: landscape) {…}

    portrait Mode :

    @media all and (orientation: portrait) {..}


Basics of Responsive Web Design:


How can websites possibly keep up with the millions of screens out there?

The short answer is they can’t.

So how does a web page adapt responsively to the needs of a computer screen versus an iPad or Blackberry screen?

One of the ways is through responsive web design.

Responsive web design uses CSS media queries to serve different style properties depending on the screen size, orientation, resolution, color capability and other characteristics of the user’s device.

Using the responsive web design approach, a web page can adjust itself on the device it’s being displayed on.

Why Responsive Web Design Benefit for Web Designers:-


Responsive web design relieves web designers, user interface designers, and web developers from working day and night creating websites for every single different device in existence.
Here few benefits are:

    One site for every device: Whether viewed on a 27-inch iMac with a wireless connection or from the screen of your Android phone with T-mobile 4G coverage, the website will be configured for the user’s optimal viewing pleasure.
    Optimal design for the device: With the responsive web design approach, all images, fonts and other HTML elements will be scaled appropriately, maximizing whatever screen size the user has.
    No need for redirects: Other options towards designing for multiple devices require the use of redirects to send the user to the appropriate version of a web page. Without the need for redirects, the user can access the content he wants to look at, as quickly as possible.