The Flexible Grid: A More Responsive Layout Strategy

Contact Us or call 1-877-932-8228
The Flexible Grid: A More Responsive Layout Strategy

The Flexible Grid: A More Responsive Layout Strategy

The Case for Flexible

Responsive web design is the process by which we craft the markup and stylesheets for a site to adapt to the user's environment. Users viewing our site on a smartphone, a tablet device, a laptop with a small screen resolution, or a desktop with high-resolution monitor all see pages laid out in a format friendly to their particular device, with minimal (if any) need for scrolling and zooming. Responsive design usually means making use of CSS3 media queries and often means CSS3 flexible images.

A first step toward a responsive design is implementation of a flexible, fluid grid layout. Instead of formatting element widths with pixels, we will instead use percentages: what had been a 980-pixel, fixed-width, center-justified design - that is, a page that remains ever at 980 pixels wide, regardless of the context in which we view it - will become a fluid layout, where the page scales to fill a set percentage of the screen, and elements within the design scale bigger and smaller (but remain in proportion) as the size of the device or browser changes.

Why do this?

  1. The diversity of ways in which users access our sites has gotten even greater in recent years (and will continue to increase) - browsers on video game consoles, televisions, smartphones like the Android or iPhone, and tablets like the iPad now represent a larger and larger chunk of audience share for many sites.
  2. Screen sizes are getting both larger and smaller - for most sites, assuming that most users will access our pages on an average screen of 760 or 980 or whatever pixels no longer holds.