How to develop fluid responsive websites

Media Queries allow you to target your designs for multiple devices by assigning a different CSS file to each device. Choose the screen size range for each device class and the CSS file (new or existing) that you wish to apply to that device class. This technique will work in browsers that support CSS3 Media Queries.

Fluid-responsive CSS-xHTML framework

Media Queries is a W3C Candidate Recommendation. The most commonly used media feature is “width”. Operates on all major desktop and mobile browsers and across all device resolutions

Fluid layouts are nothing but the layouts should fit in any media type. Different media types are screen, print and mobile. Fluid-responsive CSS-xHTML framework is compatible with any browser and suitable for use with mobile and desktop devices of any resolution and screen size.

With CSS rules we need to display a web page compatible with smart phones, tablets, netbooks, and desktops varying in screen resolution.

Screen resolutions are:
Smartphone – 320px | Tablet – 768px | Netbook – 1024px | Desktop – 1600px

How to separate the CSS for different media’s:
<link type=”text/css” rel=”stylesheet” href=”/css/screen.css” media=”screen” />

In general we write like above, but inside we need to differentiate the CSS:

/* Media Queries for Desktop */
@media screen and (max-width: 1600px) {
.container {
  width: 980px;
}
}

/* Media Queries for Netbook */
@media screen and (max-width: 1024px) {
.container {
  width: 980px;
}
}

/* Media Queries for Tablet */
@media screen and (max-width: 768px) {
.container {
  width: 768px;
}
}

/* Media Queries for Mobile */
@media screen and (max-width: 320px) {
.container {
  width: 320px;
}
}

We should make the design, layout and size of the images to be rendered in relative proportion to the browser frame. Checkout some the examples of responsive web sites can be found at mediaqueri.es with screenshots taken at four screen resolutions (between 320 px – 1600 px).

An increase or decrease to resolution or browser frame size should be nearly same in all cases result in a smooth, fluid up – or downscaling of the layout, images, etc. When elements of the site are smoothly downscaled, they should always retain readability and usability. Responsive IMGs deliver graphics from different sources depending upon screen size.

Performance for the front-end code will be lightweight, optimized and have fast rendering on small devices with low bandwidth so that only the right files are downloaded given to the browser frame size.

Using fluid grids, flexible images, and media queries, progressively enhance a web page for different viewing contexts.

Comments are closed.