Responsive Web Design

From the dawn of the era of the modern website, web design and layout have progressed with the assumption that all that would ever change was the steady increase of the lowest common screen resolution of a user’s desktop computer. The recent explosion of mobile computing hardware blows away this assumption. Now websites must automatically reconfigure themselves to create the best experience for users on an unpredictable, wide variety of displays.

Responsive web design as a methodology has it’s roots in the general desire to re-size a website’s layout depending on the space available to display it. Although the features of HTML and CSS made this difficult to accomplish historically, due to variations in browsers which existed prior to the recent web standards movement. Early examples were spawned by fluid layouts and the cross-browser implementation of the max-width and min-width CSS properties (e.g. positioniseverything.net’s Jello Mold Piefecta). Though, there generally wasn’t a definite need to fill with these layouts, since the general assumption was viewing websites from desktop machines with ever-increasing monitor dimensions.

[ted id=1582]

It wasn’t until the exponential increase in the popularity of mobile devices (particularly Apple’s iPhone and iPad hardware) that the need for truly “responsive web design” emerged. Now websites are viewed not only from the desktop, but from small mobile screens which make large websites unwieldy.

Early attempts to fill this need were met by creating separate sites for mobile users, though these sites were generally considered less usable than the full site because they gave access to less information.

When cross-browser support for CSS3 media queries arrived, there was now a way to control the CSS presentation based on available screen size.

The term “Responsive Web Design” was coined by Ethan Marcotte in an article on A List Apart. The concept was further defined in his book by the same title.

Responsive web design encompasses any form of web layout that “responds” to the amount of available space. Completely different layouts of design elements and graphics can be displayed based on the available screen real estate. Also, given the rise in popularity of “retina” or high-pixel density displays, image resolution is no longer a static assumption and responsive web design defines methods of displaying an image with appropriate pixel density.

Significance

Responsive web design is poised to be the new design and layout methodology for creating websites. It stands to completely change the way that users interact with websites and where they interact with them.

Software companies like Adobe are already implementing responsive web design functionality in development tools.

Relevance to Learning

Responsive web design is a relevant and emerging topic which should be addressed from a technical standpoint in general web design instruction. Also, it effects how students will be able to easily access information on the web in any number of locations.

Pros/Cons

Responsive web design opens up incredible flexibility for web site design and content delivery. Though, there will be difficulty in making certain that older sites are up-to-date and take advantage of these new ideas.

There has also been some discussion of whether or not HTML5 (and thus the idea of content delivery via responsive web sites) will conflict with the interest of closed systems of platform-specific apps.

Future Trends

Responsive web design is a new concept that is slowly gaining traction. As the popularity of mobile devices increases, the demand for responsively designed websites will become increasingly expected among users.

Resources

• This is Responsive
• Responsive Web Design – A Book Apart
• Responsive Web Design – A List Apart
• Robot or Not? (resize your browser or re-orient your mobile device to see a responsive site in action)
• 25 Beautiful Responsive Web Design Examples for Inspiration – sixrevisions.com