Overview: Responsive design

Responsive web design is a framework that allows websites adapt to different output devices (which have different screen sizes), such as a desktop computer monitor or a mobile device. In practice, a responsive site relies on one design that changes across devices. Adaptive sites use templates that are optimized for various output devices.

The typical set of output devices that designers consider are

  • a widescreen desktop monitor
  • a smaller desktop or laptop
  • a tablet and
  • a mobile phone.

Our primary job is twofold:

  • optimize the layout of the content and
  • identify which content must be visible on each device.

One hallmark of responsive design is the use of min/max widths with elements (divs, sections) that are defined in percentage widths, not absolute pixels. We also have to consider image size, both actual size and file size.

There are many frameworks that help developers create responsible websites, such as Twitter Bootstrap or the W3C Framework.

We’re going to use this demo to create two viewports.