Posted on by & filed under Content - Highlights and Reviews, Mobile 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:

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:

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

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.

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:

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:

We can also link the CSS file directly inside the <head> using the <link> tag as follows:

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

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.

Check out these titles from Safari Books Online for more about mobile responsive design:

Safari Books Online has the content you need

Here are some good CSS3 resources found in Safari Books Online. If you don’t have a Safari Books Online account, no problem… you can start with a free 10-day trial.

Pro iOS Web Design and Development: HTML5, CSS3, and JavaScript with Safari by Andrea Picchi, the author of this post, will help you deliver rich mobile user experiences without compromise by optimizing your sites for WebKit and Safari, the de facto standard for the iPhone, iPad, and iPod touch.
In Mobilizing Web Sites: Develop and Design, author and designer Kristofer Layon addresses that elephant in the room–the many existing web sites that we manage on a day-to-day basis–and walks through techniques that web designers can use to make these legacy web sites better-suited for mobile viewing.
Head First Mobile Web shows how to use the web technology you’re already familiar with to make sites and apps that work on any device of any size. Put your JavaScript, CSS media query, and HTML5 skills to work, and then optimize your site to perform its best in the demanding mobile market.
HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites. Apply the latest HTML5 features that are best for mobile, while discovering emerging mobile web features to integrate in your mobile sites.

Start FREE 10-day trial.

About the Author

  Andrea Picchi is the author Author of “Pro Web Design and Development” from Apress. He has a background in Psychology (University of Padova) and Computer Science (University of Pisa). He started designing WebApps for the new Apple device in 2007 when the first iPhone was lunched on the market. After the first release of the Apple SDK in 2008, he started developing Native Apps using Objective-C. In recent years Andrea Picchi has been speaking at many important conferences around Europe like IASummit, UXConference and many others. Recently he also started to teach “iOS Web Design and Development” in a course organized by the Computer Science Department of the University of Pisa. Today, as designer his priority is to implement a cognitive approach to touch-screen interface design in iOS enviroment and as developer continue to develop using both the Web model (using html5, css3, javascript) and SDK model (using Cocoa-Touch in Objective-C). Learn more at http://www.andreapicchi.it and follow at him http://twitter.com/andreapicchi.

Tags: CSS3, html5, iPhone, media queries, responsive design,

Comments are closed.