Responsive Web Design

The term Responsive Web Design was coined by Ethan Marcotte in an article which recently turned 3 years old. The term advocates for a single and adaptable web design rather than separate layouts depending on the medium in which the content is delivered.

Each phase of the architectural process is more immutable, more unchanging than the last. —Ethan Marcotte.

As Ethan Marcotte states, there is 'an emergent (architectural) discipline called "responsive architecture"'. This architecture reacts to the variable conditions of the space, reconfiguring itself in different modes.

For me, responsive architecture is to immutable architecture as responsive web design is to print.

There is no immutable architectural space anymore. There is no immutable web layout anymore.

Different capabilities of browsers and design techniques make possible responsive designs.

• Fluid grids. Sizes are relative percentages rather than fixed pixels or points.
• Elements with flexible sizes.
• Media queries to use different CSS rules, introduced in CSS 2.1. Awareness of the type of device and the size of the browser was brought to the web.
• Server-side Components (RESS) to produce faster-loading pages delivering different content to devices.

All of this reinforces the desire of the web to focus on content rather than in the medium in which content is delivered. The medium is flexible. The content is capable to react its medium's changes. The content is responsive.

To wrap up, I wrote this code sample. When the web's width is less than than 480px, the h1 and p tags apply different CSS rules:

h1 {
font-size:23px;
}
p {
font-size:16px;
}

@media all and (max-width:480px) {
  h1 {
  font-size:27px;
  color:#db4a38;
  }
  p {
  font-size:24px;
  }
}

References

• Marcotte, Ethan (2010). "Responsive Web Design" (A Book Apart)
• Responsive Web Design article by Ethan Marcotte (A List Apart)
• Inclusive Web Design Future
• Understanding Progressive Enhancement