CSS

Responsive web design

Craig Bullock 20th Nov 2013

As technology has advanced, screen sizes have got smaller and larger at the same time. This means that the canvas that us developers have to work with is constantly changing. Instead of creating a version of a site for each device or browser, it is logical to create sites that are flexible and that can adapt and respond to the wide variety of screen sizes that need to display them.

Responsive web design is the term used to define web sites that respond to a range of devices and browsers. Essentially responsive web design is a collection of technologies including fluid layouts, flexible images and media queries.

The technologies that make up responsive web design

Flexible Layouts

Flexible layouts essentially adapt to the size of the screen. Flexing is achieved by applying widths in percentages as opposed to pixels. This technique has been used for a long time, ever since screen sizes started to vary in size. So take for example a simple 2 column layout with a content area and a sidebar. If we apply 66.6% width to the content area while we apply 33.3% width to the side bar, both these elements will fit to the width of the browser window what ever the size.


div#content {
  float:left;
  width:66.6%;
}
div#sideBar {
  float:right;
  widt:33.3%;
}

Flexible Images

The trick to get images to flex with the layout is to simply apply a 100% max width. This will ensure that the images will be at there full size when the layout is as well as flexing down when the layout is scaled down.


img.myImage {
  max-width:100%;
}

Media Queries

Media queries are essentially ''if'' statements that can be embedded within any stylesheet that will target specific devices. These blocks will only add style to the page if the device meets the specific criteria that is within the query i.e. screen size. So when a site is viewed on smaller screen sizes we could technically change the layout accordingly. For instance, for really small screen sizes we could change a 2 column layout to a 1 column layout with media queries, which would greatly improve the readability of the website.


@media screen and (max-width: 600px) {
  div#content {
    float:none;
  }
  div#sideBar {
    float:none;
  }
}

Building web sites that respond in this way ensure costs are kept low while delivering an improved user experience across a broad range of devices.

(0) Comments

This article has not received any comments yet.

Have your say

Say Hello