Code example of Responsive web design using CSS3 Media Queries

inShare

With the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it.  Creating a responsive design, one where elements on the web page are fluid, has never been simpler.  If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design. 


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

 

As you will see... my example is bias to the dimensions of Apple's iPad and iPhone, but you can certainly adapt my sample CSS to any device width or height that is meaningful to your target audience.  For this learning example I created a simple design that consists of a banner, with a main text area that is bordered by 3 widgets on the right.   The example will make use of three media queries.

 

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)

 

 

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.

<style  type="text/css">
#banner {
   margin-left:auto;
   margin-right:auto;
   width:1000px;
}
.
.
.
.widget-text {
   padding:10px;
   background-color:#FCFCFC; 
}
</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:

<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 { width:250px;padding: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" content="width=device-width, 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="apple-mobile-web-app-capable" content="yes" />

 

Optionally provide a thumbnail image to represent bookmarked pages in iPhone: 

<link rel="apple-touch-icon" href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/dw-phone.gif" />

 

 

 

 

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.

 

Source: IBM.com