Anyone who has subscribed to a web design magazine, a blog, or any hacker's newsletter for that matter, must be having their inbox crammed up with suggestions on how to create a responsive interface, responsive images, smart CSS, or better real life web design. If you too, are wondering as I did, about all this fuss and what does it mean to have your website respond, then I hope that this short can provide you an initial understanding of concepts.

With an increasing fraction of public connecting to Internet and accessing content through their mobile devices, it has become necessary to design your website's interface keeping in mind proper layout and display across most of these devices (if not all). These devices may vary significantly in resolution, aspect-ratio, orientation and other features making it difficult to write clean CSS and design a layout that displays appropriately across all.

No worries!

CSS3 introduced media queries that greatly simplified the task of tailoring the content presentation without having to change the content itself. As appropriately summed up in this responsive web design guide by Google -

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.

Media queries are simple rules that take a media-type and at least one expression that defines the scope of CSS styles within the block of that particular query. These queries are evaluated each time as the values of associated features change and are applied to your page dynamically as soon as any of them evaluates to true.

Pseudo code

@media (query) {
/* CSS Rules used when query matches */
}

The expressions can be defined using media-features and several of them combined into powerful expressions using logical operators and, not, only and commas (equivalent to or).

Example

@media (min-width: 700px) and (orientation: landscape) {
    .sidebar {
        margin: 0;
    }
}

In this example, the expression will evaluate to true if your viewport size is more than 700px and orientation set in landscape mode, thereby applying the styles within the block and setting the sidebar margin to 0. Also, note that in this example we didn't specify any media-type which means media-type all. For complete description of supported media types and media features, you can refer to Mozilla Web Guide.

Once you have the media expressions set up based on the devices you want to support, you need to design the corresponding rules like changing the layout, updating font size, hiding/showing elements and so on depending on your requirements. Once you're done, go ahead and test for the intended effects at responsivetest.net.

An example from my own site:

/* Apply this rule if the device type is screen and minimum
 * screen width is 800px.
 */

@media only screen and (min-width: 50em) {
    html { font-size: 90%; }
    #banner { width: 750px; }
    article { width: 600px; }
}

Few hours spent for worth!