
The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties. As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).
Code example of a responsive web page
Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)
Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)
Portrait smart phone
@media (max-width: 320px)
@media (min-width: 481px) and (max-width: 768px)
Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)
Portrait smart phone
@media (max-width: 320px)
Start
by creating the standard CSS classes and setting default properties. I
marked-up my CSS defaults to support both desktop and landscape tablets
by limiting the major elements to a width of 1000px.
The media queries
<style type="text/css">
#banner {
margin-left:auto;
margin-right:auto;
width:1000px;
}
.
.
.
.widget-text {
padding:10px;
back grou nd-c olor :#FC FCFC ;
}
</style>
The media queries
Next
create the media queries for each screen dimension your interested in
supporting (responding to). Media queries are exactly like any other
CSS element, you are simply providing an alternative set of CSS
properties for the existing elements on your web page. The browser will
respond by calling the proper @media each time the web page is loaded
or a user re-sizes the browser window. Here are the three media queries
I added support for:
Media queries enable my example to support landscape and portrait mode cleanly
<style type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
#banner { width:740px; }
#banner img { max-width:740px; max-height:222px; }
#main { width:740px; }
#main-content { width:450px; float:left; }
#widget-container { width:200px; float:right; }
.widget-content { width:160px; }
}
@media (min-width: 321px) and (max-width: 480px) {
#banner { width:450px; }
#banner img { max-width:450px; max-height:135px; }
#main { width:450px; }
#main-content { width:400px;}
#widget-container { width:400px; }
.widget-content { width:120px; margin:5px; float:left;}
.widget-text { display:none; }
}
@media (max-width: 320px) {
#banner { width:275px; }
#banner img { max-width:275px; max-height:83px; }
#main { width:250px; }
#main-content { widt h:25 0px; padd ing: 0px; }
#widget-container { width:250px; padding:0px; }
.widget-content { width:250px; margin:5px;}
.widget-text { display:none; }
}
</style>
Media queries enable my example to support landscape and portrait mode cleanly
Hints and Tips
Important!
Set the following META keyword to force the device viewport to maintain
the correct scale. Failure to include this META will result in your UI
being pinched:
<meta name="viewport" cont ent= "wid th=d evic e-wi dth, minimum-scale=1.0, maximum-scale=1.0" />
You
can optionally configure webpages saved to the iphone's home screen to
launch
using WebKit directly. This will remove the Safari web browsers address
bar & bookmarks bar giving your web page a native appearance:
<meta name ="ap ple- mobi le-w eb-a pp-c apab le" content="yes" />
Optionally provide a thumbnail image to represent bookmarked pages in iPhone:
<link rel= "app le-t ouch -ico n"
href ="ht tps: //ww w.ib m.co m/de velo perw orks /myd evel oper work s/bl ogs/ bobl eah/ reso urce /dw- phon e.gi f"
/>
Next steps
You can run this example by clicking here.
As you resize your browser window to different widths you will see the
media queries adapt and flow the web page. You can download the
complete HTML and CSS of this example by clicking here.
Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design. Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.
However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website. The key is careful thought to page elements, image sizes, and overall copy content.
For the entire definition and specifications on media queries, please visit the W3C Media Queries module.
Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design. Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.
However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website. The key is careful thought to page elements, image sizes, and overall copy content.
For the entire definition and specifications on media queries, please visit the W3C Media Queries module.
Source: IBM.com