3 November 2013

Responsive Design

Responsive Web Design
by ETHAN MARCOTTE May 25, 2010
Published in CSS, Layout & Grids, Mobile/Multidevice, Responsive Design, Interaction Design ∙ 103 Comments

Ethan Marcotte coined the term "responsive webdesign," referring to responsive architecture that changes when the user environment changes, as opposed to building separate designs for every possible browser and device interface. A way to think of responsive web design is how new building and office technology contains sensors that dim or brighten lights, or changes the climate based on the number of people in a room, or of art that responds to a viewer's position. Responsive web design can be done using media queries in CSS: either at the link level or within the CSS itself itself. A media query can call a specific stylesheet, or turn on/off styles based on design specifications. Below is an example of a media query embedded in a link:

The query is conditional: the "shetland.css" stylesheet will only be used if the browser screen is less than 480px.

An embedded CSS media query using an @media rule is below:
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

The same can be done by an @import directive:
@import url("shetland.css") screen and (max-device-width: 480px);

Media queries and CSS allow designers to not only modify individual blocks but also an entire layout based on specified display types. They are the CSS driven equivalents of conditional IF/ELSE statements that allow the design to adapt to the user's device, without having to create separate websites for a mobile device versus a desktop. While media queries are currently broadly supported with most modern browsers such as Safari 3+, Chrome, Firefox 3.5+, and Opera 7, most older browsers do not. Microsoft IE 9 has promised support for media query, it is not a native implementation.

Similar implementations can be achieved with jQuery and Javascript, particularly when implemented over the flexible grid layout design.