It’s now more important then ever that your sites work across many different devices, from smart-phones with screen as narrow as 240 pixels wide, to computer monitors that are 1920 pixels or larger. How do you achieve this nirvana of a design that works across all these different sized devices? You could create a different build for each device type, which would incur extra costs and an even longer time frame, or you could build one site using the responsive [adaptive] design techniques such as; fluid grids, flexible images, and media queries.

Responsive design isn’t limited to layout changes. Media queries allow us to practice some incredibly precise fine-tuning as our pages reshape themselves: we can increase the target area on links for smaller screens, mobile versions and multiple columns. In theory, this allows the same web page to be served to devices with differing resolutions, allowing the design to dynamically adjust, providing the optimal viewing experience for that particular device. Unfortunately not all web browsers support media queries, but thankfully it’s fairly easy to ensure a reasonable default design can be displayed in these browsers.

Some Examples of Responsive Design

Further Reading

Responsive Web Design by Ethan Marcotte
Fluid Grids by Ethan Marcotte
Fluid Images by Ethan Marcotte
Adaptive Web Design by Aaron Gustafson
A responsive mind by Jeremy Keith