With the increasing use of Internet-capable mobile devices it is becoming more and more important to design websites that are viewable at different screen resolutions. If you want to make sure that your content can be viewed by the most number of people possible, you need to make sure that your webpages are readable and navigable not only on desktop computers but also on tablets and smartphones.
This can be accomplished through responsive design using media queries in your stylesheet. Responsive pages automatically adapt to the dimensions of the device being used to view them, shrinking, expanding and transforming as the need arises.
Below is a very basic example of responsive design using media queries.
<style>
#page {max-width: 960px}
#main {width: 65%; float: left}
#sidebar {width: 33%; float: right}
@media all and (max-width: 800px){
#page {max-width: 620px}
#main {width: 100%}
#sidebar {width: 100%; float: left}
}
</style>
In this example a two-column page has a default maximum width of 960 pixels. Meanwhile, the widths of the main and sidebar sections are 65 percent and 33 percent of the page width, respectively. The remaining 2 percent is used for the space between the main and sidebar sections.
When the window size is only 800 pixels wide or less the total width of the page shrinks to a maximum of 620 pixels while the main and sidebar sections expand to 100 percent of the available space. The sidebar tucks in under the main section and the page transforms into a single-column format.
That's the basic concept. Click here for a demo.