Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser responsive design with HTML5 &CSS3 media queries.

More Examples

Overview

The page's container has a width of 980px which is optimized for any resolution wider than 1024px. Media query is used to check if the viewport is narrower than 980px, then the layout will turn to fluid width instead of fixed width. If the viewport is narrower than 650px, it expands the content container and sidebar to fullwidth to form a single column layout.

HTML Code

I'm not going to go through the details of the HTML code. Below is the main structure of the layout. I have a "pagewrap" container that wraps the "header", "content", "sidebar", and "footer" together.

HTML5.js

Note that I use HTML5 markup in my demo. Internet Explorer prior than version 9 doesn't support the new elements introduced in HTML5 such as <header>, <article>, <footer>, <figure>, etc. Including the html5.js Javscript file in the HTML document will enable IE to acknowledge the new elements.

Main Structure CSS

Again, I'm not going to get into the details. The main "pagewrap" container is 980px wide. Header has a fixed height 160px. The "content" container is 600px wide floated left. The "sidebar" content is 280px wide floated right.

Flexible Images

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Flexible Embedded Videos

To make the embedded videos flexible, use the same trick as mentioned above. For unknown reason, max-width:100% (for embed element) doesn't work in Safari. The work around is to use width:100% instead.

Initial Scale Meta Tag (iPhone)

By default, iPhone Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells iPhone Safari to use the width of the device as the width of the viewport and disable the initial scale.

Final Demo

View the final demo and resize your browser window to see the media queries in action. Don't forget to check the demo with the iPhone, iPad, Blackberry (newer versions), and Android phones to see the mobile version.

The tut seems to be very helpfull for me as a beginner of responsive web designing.
it is so simple and clear tut…….thnx and hoping more about…..

YogenderJan 30, 2013 @ 02:54

I love this tutorials. its helps me alots.

johnFeb 01, 2013 @ 03:13

very useful tutorial, Very well explained.
Great job.. Thumbs up..:)

BossLadyFeb 26, 2013 @ 18:01

Totally just saved my butt! Using a Woo theme and everything in a gallery or portfolio was doing just fine, but in a page or post, not so much. The images were distorted on mobile devices. Guess what the client viewed her shiny new site on… yeah. An iPhone. Woo’s response? Resize every image by hand in the editor. Not only did it make the photos look ridiculous, it is completely unreasonable and unfeasible because I’m not going to ask my client to go back through 300 pictures and resize them like that or to resize every time she uploads a new one. I needed a global solution, not a case-by-case hack. This totally did the job. I thank you from the bottom of my cranky heart!

I’m finding it extremely frustrating using responsive design as what works and looks fine with Firefox developer tools and some online testing viewers I’ve found absolutely do not work on the actual devices. How are people suppose to work like this?