Responsive Web Design is a web design process which ensures optimal viewing experience in all displays available. The display can be of desktops, tablets, mobiles and now the increasingly popular big screens of smart televisions.
This article helps you to make your website mobile friendly or tablet friendly. This article suits for those developers who wish to convert their existing website to responsive layout or for those who wish to develop a responsive website from scratch.
Here I have listed few techniques which help you to make your website responsive. For better understanding, I have created 2 demo pages. One is not responsive and other one is responsive. I will be using these pages to illustrate each points. Here is the html which I have used for both responsive and non responsive pages.
<div class=”container”><!– Main Container –>
<div class=”header”><!– Top Header –>
<div class=”logo-wrapper”><!– Top left for logo –>
<div class=”search-wrapper”><!– Top right for search –>
<input type=”text” class=”search”/>
<div class=”main”><!– Main content holder –>
<div class=”content-wrapper”><!– Main window for content –>
<div class=”sidebar-wrapper”><!– Right sidebar –>
<li class=”widget”><!– First widget –>
<li class=”widget”><!– Second widget –>
<li class=”widget”><!– Third widget –>
While implementing your design from Photoshop files using html, try to avoid tables for layouts. Using tables give a less flexible layout. Use tables only for its real purpose, i.e. to display tabular data. For layout design, use div tags instead. div tags are by default block level elements. They can be floated based on our layout and will stack smoothly in small display sizes. As the term suggests, fluid grids means the grid is self adjustable. A fixed grid is defined using pixels or points, where as the width of fluid grid is defined using percentages or Ems. When we use say 90% width for the main page container div tag, the div itself will shrink when we reduce the size of screen or browser.
In the non-responsive page design demo, we have created a main parent div of 960px width and all inner sections are clearly defined using pixels. While in responsive page, we gave 68% width to main content area and 32% width for sidebar.
CSS3 Media Queries
CSS3 media queries allow a developer to set css style rules based on different display properties. The size of a mobile device may be different from that of a tablet. We use media queries to show a web page comfortably in each devices.
In our demo, we have used media queries to display all major blocks, one below the other. This layout is more comfortable for mobile users to read an article. Some websites hide some elements in smaller display devices. This helps to avoid distractions like ads or less important content.
Fluid Image size
This part is simple, yet really powerful for responsive web design. Usually we design needed image with a size which is predefined for the layout. Only thing we need to add is a width measurement in percentage. This will increase or decrease image size based on screen width.