Responsive Web Design (RWD) or Fluid Layout

Responsive Web Design (RWD) or Fluid Layout

Responsive Web Design is not like adaptive that adjust in every width. It is an approach of web design that provide optimal viewing experience and also easy to read and navigation with minimum re-sizing, panning and scrolling across wide range of devices – (From desktop computer monitor, I-Phone, tablet, phone).

A website is basically designed with RWD is able to adapt with device viewing environment by using fluid layout, proportion based grid, flexible images and CSS3 @media queries.

The fluid grid concept call from page element sizing to be in relative unit like percentages, rather than absolute unite like pixel and points.

Flexible images are also size in relative unit so as to prevent them to displaying outside of the containing unit.
Media queries allow the page to use different CSS style rule based on the characteristics of the device the site is with their relative device width with best optimal view.

Server side component in conjunction with client side component ones media queries produce faster loading sites for access over cellular network and also deliver richer functionality and usability.

CSS @media queries for different devices:

For Large Display:

@media only screen and (max-width: 1220px) and (min-width: 969px), only screen and (max-device-width :  1220px) and (min-device-width : 969px){….}

For Default:

@media only screen and (max-width:  968px) and (min-width: 769px), only screen and (max-device-width: 968px) and (min-device-width: 769px){….}

For phone and tablet:

@media only screen and (max-width:  768px) and (min-width: 321px), only screen and (max-device-width: 768px) and (min-device-width: 321px){….}