Responsive Mobile Design with Media Queries and CSS3

Originally published by SafariBookOnline Magazine on 24th of February, 2012.
Excerpt from my book: Pro iOS Web Design and Development.

Since the old days of CSS 2.1, media type has played an important role in CSS stylesheets. One main example was the media type print used for providing a print version of our layouts. I’m sure you remember the following code:

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />

The W3C added the Media Query as part of the CSS3 specification, thus improving the use of media types. A media query allows you to target not only certain device classes but to actually inspect the physical characteristics of the device rendering your work.

Thanks to these new features, Media Queries became a popular client-side technique for delivering ad-hoc stylesheets to the iPhone. Before media queries, designers experimented with resolution-aware layouts, primarily relying on JavaScript-driven solutions.

An important step in making a WebApp layout responsive using the CSS3 media query is to handle the orientation change event serving the right image size. The first step is to set the viewport as shown here:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

After the viewport, you need to write the HTML5 code designing the WebApp layout. For our purpose let’s show an <img> element.

<img class="”heroContent”" src="images/heroImage.png" alt="The New iPhone" />

After writing the HTML5 code we can work on CSS3 media queries code targeting the different devices according to the project requirements. In this example, we will target the iPhone 2, 3 and the iPhone 4 and 4S.

<!-- iPhone 2G, 3G, 3GS Portrait -->
@media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Portrait Orientation */
}

<!-- iPhone 2G, 3G, 3GS Landscape -->
@media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Landscape Orientation */
}

<!-- iPhone 4, 4S Portrait -->
@media only screen and (device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for XX iPhone in Portrait Orientation */
}

<!-- iPhone 4, 4S Landscape -->
@media only screen and (device-width: 960px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
/* CSS3 Rules for iPhone in Landscape Orientation */
}

With these media queries, we have tested multiple values in the same query using different keywords and values. In order to target the retina display, you can use a keyword that inspects the display pixel density, and you can also use a keyword that directly targets the display DPI resolution as follows:

<!-- iPhone 4, 4S Portrait -->
@media only screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi) {
/* CSS3 Rules for XX iPhone in Portrait Orientation */
}

In these examples so far we have inserted the Media Query in the CSS file as part of a @media rule. If we need to, we can also insert the media query as part of an @import directive as follows:

@import url(“iphone-retina_portrait.css”) screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi);
We can also link the CSS file directly inside the <head> using the <link> tag as follows:

<link
rel="stylesheet" type="text/css"
media="screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi)"
href="iphone-retina_portrait.css"
/>

The logic behind the CSS3 approach is the use of one image at 100% for each device in order to fit its container element in both portrait and landscape orientation.

.heroContent {
width: 100%;
}

The possibility to target a device in two different orientations also offers the possibility to create an ad-hoc fixed element layout and bypass the need to rely on fluid structures. This is a solid approach every time you need to design for a specific device like the iPhone.

This responsive design approach will help you design user interface elements that will fit both portrait and landscape orientations, thus increasing the level of user experience of your WebApp.

Pro iOS Web Design and Development - Andrea Picchi
Buy the Book

BOOK DETAILS
Author: Andrea Picchi
Paperback: 375 pages
Publisher: Apress; 1 edition
Language: English

ISBN-10: 1430232463
ISBN-13: 978-1430232469

Webpage: www.apress.com/pro-ios-webapp