August 03, 2011

Rendering Content Adaptively with Responsive Web Design and CSS3 Media Queries

Responsive web design is a concept pioneered by Ethan Marcotte that offers an adaptive solution to rendering sites on various mobile and tablet devices. It allows designers to deliver the same content to multiple devices exactly as intended. The technique was borne out of the fluid approach to web design, but leverages the capabilities of CSS3 media queries.  

Fluid web design is defined by the use of percentages or em values to dynamically resize content with the browser window. CSS3 media queries are part of the new W3 Consortium specification that allows a designer to implement a style or stylesheet independent of the device the site is being viewed on.  

Media Queries work by examining the size of the user’s screen and then applying certain styles based on that condition.  Here are some of the most common screen sizes and corresponding media queries:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screenand (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

These styles can be implemented either in their own separate style sheet or within the header of the html document. You may notice that the orientation property is iPad-specific. With this property, the min-device-width and max-device-width properties are only necessary in the event that the browser window is resized.

In Marcotte’s article entitled Responsive Web Design, he gives examples on how the content of a site can be styled depending on the browser resolution. This particular example showcases content divs and images that scale when the browser resizes. Additionally, when the width reaches a certain minimum, the content ceases to float next to each other and begins to fall down the page in a linear fashion.

Images are of particular importance in regard to Responsive Design.  Depending on the desired effect, they can be scaled down or switched to a lower resolution image file when the browser window resizes. The latter technique was cleverly pioneered by the Filament Group and can easily be implemented with some support files available on Github. An example implementation would look as follows:

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Data-fullsrc is a custom HTML5 attribute defined in the supporting javascript file. This technique greatly increases performance on mobile devices since only low resolution images are loaded on smaller viewports. Alternative methods scale down larger resolution images and can take up a greater amount of bandwidth.

Responsive Design vs. Dedicated Mobile Sites

The alternative to this approach is creating a dedicated mobile site. This method has its advantages and disadvantages. Creating a dedicated mobile version of a site will prevent some larger, unneeded files from being loaded (the alternative being that they are loaded, but hidden with CSS). The content can also be curated with a mobile user in mind.  

A good read prior to creating any mobile application is the W3 Consortium’s Mobile Web Best Practices(http://www.w3.org/TR/mobile-bp).  Following these guidelines, one can make a better decision on how content should be displayed.  For instance, a dedicated mobile site may be a better idea if copy needs to be rewritten with the mobile user in mind.  Mobile users are usually on the run and need concise, easily accessible information. Also, a news site with long articles and large infographics may want to consider editing content differently for mobile output and using smaller images to convey the same meaning. Other usability best practices includes spacing apart buttons to account for the width of fingertips, avoiding auto-refreshes, and requiring as few key strokes as possible from the user.

But What About IE?

No blog post about progressive web techniques is complete without the obligatory Internet Explorer workaround! Although Internet Explorer 9 fully supports media queries, we can’t forget about versions 7 and 8. In this case, help comes in the form of css3-mediaqueries.js. This javascript library from Wouter van der Graaf allows older browsers to interpret media queries without any additional coding.

Media queries are a small, but powerful addition to the CSS3 specification.  Integration with other members of the CSS3 family can make for a very attractive, bandwidth-efficient mobile site.

Posted at 12:29 pm by Ivan Mironchuk

 Database Publishing Consultants Inc. BBB Business Review

Case study

DPCI Implements the K4 Publishing System for the Daily Racing Form

DPCI helped DRF implement the K4 Publishing System and develop a strategy for single source authoring of content for print and Web. > more

All case studies


Press Release

DPCI Celebrates its 15th anniversary on April 27th, 2014. "I attribute our success to a singular focus on content technologies and on constantly looking to optimize our operations,"; states Joe Bachana, President and founder of the company. more
Alltop, all the top stories