Responsive Web Design

Stop Thinking in Pages. Start Thinking in Systems.

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen. Day by day, the number of devices, platforms, and browsers that need to work with your site grows.

Responsive Web Design (RWD) represents a fundamental shift in how we’ll build websites for the decade to come. Since its groundbreaking release in 2011, RWD remains a fundamental resource for anyone working on the web.

Here are my 3 simple strategies to web design, aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

  • Liquid or fluid layout: Defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size.

  • Media queries: Invoking different style sheets based on the capabilities of the display being used, such as size, resolution, aspect ratio, and color depth.

  • Fluid images: Setting images to occupy at most the maximum display width.

So, the next time, remember – Content is like Water! Let it take the shape of the platform.