Responsive Web Design
Responsive web design is a design approach focused on developing sites that provide an optimal viewing experience no matter the computing device that the viewer may be using. Important factors of concern in this approach include, but are not limited to easy reading, flexible navigation, functionality and communication.
Using a combination of fluid grid layouts, flexible image placements and CSS3, responsive designed websites are usually designed with mobile devices in mind. Both grid layouts and images use relative units like percentages rather than absolutes to allow adaptable measures. When combined with CSS media queries, the website will use different CSS styles depending on factors like screen resolution, browser width and device output.
When mobile devices started to include web browsers for Internet access, web designers would create a separate website that viewers would be directed to (usually by javascript) if they arrived via a mobile device. Unfortunately, the range of mobile device screen sizes, resolutions and browser operations prohibited web developers from creating a one size fits all. Enter the responsive web design.
Concept of responsive web design
The concept of responsive web design is usually attributed to Ethan Marcotte, an independent web designer, whose clientele has included New York Magazine, the Sundance Film Festival, The Boston Globe, and People Magazine. Marcotte describes responsive web design not as a single technology, but as a set of techniques and ideas brought together to form a foundation upon which a site is built.
In an article for A List Apart, Marcotte speaks of “an emergent discipline called “responsive architecture,” in which “physical spaces can respond to the presence of people passing through them.” Using a “combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them.”
When the W3C created media queries for CSS3, it allowed web developers to target not only certain device classes, but to actually detect the physical characteristics of the device (whether mobile or desktop) rendering our work.
For example:
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 960px)"
href="mobile.css" />
With this query, the website asks the displaying device if its maximum resolution is 960 pixels or less. If so, it’ll load the mobile.css stylesheet.
Images pose a greater challenge. Though there are a couple of techniques currently in use (as well as newer techniques in development), no one technique has been decided as the definitive way to present images.
Currently, the following are some of the techniques being explored:
- Adaptive Image - a small PHP script that detects user screen size and deliver the proper image for that screen size.
- Responsive Image Using Cookies - detects the screensize by using JavaScript and sizes the proper image size using PHP before it is served and loaded on the page.
- HTML5 Picture Element - Set different sources of images and use breakpoints for when the source of images should be served.
Responsive web design is still in its infancy. As technology and new techniques develop, approaches will continue to evolve.
Resources:
Responsive Web Design by Ethan Marcotte
HTML and CSS: Visual QuickStart Guide
