Responsive web designing is a web designing approach which is aimed at creating websites that transform themselves by providing the best viewing experience, easy navigation, comfortable in reading with minimum re-sizing, panning, and scrolling on various mobile devices. The website design responds to the user’s behavior and the device environment, screen size and the platform with flexible layouts, grids, images and use of CSS (Cascading Style Sheets) with media queries.

Almost every company is coming up with a mobile version website, as it has become essential these days. Once developed can be used anywhere, as the user moves from system to a mobile automatically the website accommodating itself with the size, scripting, resolution etc.

Image Credit: protangent

Step 01: Viewpoint Meta Tag

The meta tag is used to reset the screen width or a wide viewpoint meta tag with width to fit the size on the screen. The viewpoint tag informs the browser to use the device width as the viewpoint width and disable the initial scale.

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

Step 02: HTML Structure

Design your page layout with the basic elements such as header height, footer, scroller, width of the content container, sidebar, images, navigational elements, etc.

mobile.css structure:

#wrapper{

width: 90%;

}

#content{

width: 100%;

}

#sidebar-left{

width: 100%;

clear: both;

/* Additional styling for our new layout */

border-top: 1px solid #ccc;

margin-top: 20px;

}

#sidebar-right{

width: 100%;

clear: both;

/* Additional styling for our new layout */

border-top: 1px solid #ccc;

margin-top: 20px;

}

Step 03: Add a Style block

Set basic features for your responsive website with basic features for all screen sizes, style features such as icons, colors, typeface, etc.

Step 04: Media Queries

To handle all your site’s media queries and make it responsive you need to have a style block. A media query is a conditional statement which contains additional CSS rules using which the site appearance change when the conditional statements are met.

The CSS media queries allow your site to adjust according to the device and allow the user to view a perfect site. This has helped the responsive designing in supporting all mobile browsers such as Chrome, Safari, Opera, Internet Explorer, etc.

Example code:

#wrapper { width: 80%; margin: auto; max-width: 1200px; min-width: 800px;}@media screen and (max-width: 800px) { #wrapper

{ width: 90%; min-width: 0; }}

Or

<style type=”text/css”> @media only screen and (max-width: 640px) { } @media only screen and (max-width: 479px) {

}</style>

According to the above code the width of the screen will take effect when the size is below 800 pixels and all the styles that were defined in the media query will take effect by re-sizing the wrapper to 90% of the design. In the second code the first media query will take effect when the screen size is less than 640 pixels in width and the next query at 479 pixels in width.

Step 05: Make Flexible Images

Make images flexible for your website. Height and width of the image should be as per the media query for its relevant screen size.

img { max-width: 100%; }

Step 06: Flexible Embedded Videos and Images

Define the command for videos and images to make them flexible.

<td height=”30″><img src=”images/PROMO-BLU.jpg” width=”393″ height=”30″ border=”0″ alt=””/></td>

Step 07: Showing or Hiding Content

Responsive web design should also go well with picking and choosing relevant content. CSS allows us to show or hide content very easily. HTML element display: none need to be made hidden in a separate style sheet

Step 08: Testing

Final stage is testing the designed responsive website.

Author Bio: Kandagatla Dinesh Kumar is Business Director/ Digital Marketing & an SEO Strategist at ProTangent Solutions, a digital marketing company, specialized in online marketing with various SEO services. ProTangent helps in digital marketing various companies, leadgenetaion, improve sales and customer base with excellence. My articles explore the new trends and development in online technologies and branding. Very passionate about Search Engine Optimizing and seeing the growth in businesses as a result of optimizing efforts.

Follow Kandagatla Dinesh Kumar : Facebook GooglePlus Linkedin

Share and Enjoy