Responsive Web Design

Overview

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling. Zoe Mickley Gillenwater’s pioneering 2010 book on CSS3 includes tutorials on flexible layouts, and Adobe’s Dreamweaver CS6 supports flexible layouts.

Learning Objectives

* Name the benefits of Responsive Web Design
* Who coined the phrase Responsive Web Design and Why

“Mobile First” and “Progressive Enhancement/Unobtrusive JavaScript” (strategies for when a new site design is being considered) are related concepts that predated RWD: browsers of basic mobile phones do not understand media queries or Javascript, and it is wise to create a basic web site then enhance it for smart phones and PCs — rather than attempt “graceful degradation” to try to degrade a complex, image-heavy site to work on the most basic mobile phones. Browser detection and mobile device detection are two ways of deducing if Javascript and certain HTML and CSS features are supported, however Javascript libraries like Modernizr, jQuery, and jQuery Mobile that directly test for features/user agents are also popular.

Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns. He suggests that, compared with a simple RWD approach, Device Experience or RESS approaches can provide a user experience that is better optimized for mobile devices.Search advertising and display advertising support specific device platform targeting for desktop, smartphone, and basic mobile devices using different URLs and different advertisement size formats. Thus, using different URLs for these different platforms is one solution to the problem of advertisements not being fluid.

Ethan Marcotte coined the term Responsive Web Design (RWD) in his article in A List Apart.He describes the theory and practice of responsive web design in his brief 2011 book on the subject. .net Magazine chose Responsive Design as #2 on its list of Top Web Design Trends for 2012 (Progressive Enhancement was #1), and listed 20 of Ethan Marcotte’s favorite responsive sites.

Activities

* Review Ethan Marcotte article and respond to the questions above
* Review the Responsive Web Design listed on the Luke Wroblewski website and respond to the learning objectives aboveresources on
* Review the following vide and respond to the learning objectives above

Leave a Reply