Responsive Web Design

Back in 1997, Jeffrey  in his book about smart decision making when building websites, wrote;

The web content must be built to travel across vast networks to unknown devices and browsers.

 

So contrary to popular belief, the web has always been inherently fluid/responsive since its inception before designers ruined it with static dimensions and inflexible constraints. It’s the transition from print design to web design that messed up everything when it brought along with it, the print design workflow and its attention to pixel perfect precision, inflexibility through the use of fixed grids and pixel-based measurements. This workflow required the web designer to first determine the size of the canvas (most settled for 960px since the desktop was the most popular device used to access the web at that time) and then apply design to that canvas.

Somewhere along the way, designers lost touch with their original function in web design, which is to create web pages that are fully accessible regardless of the browser, platform or screen size that the visitor is using.

Over the years, designers have been trying to control their designs, aiming for specific devices instead of setting their designs free. The truth of the matter is that as designers, we can never know in advance what kind of device or browser visitors are going to use when accessing our web pages.

The increase in the number of various devices, platforms and browsers being used to access the web nowadays has forced designers to realize their earlier mistakes and totally rethink the way they design web pages.

Enter Ethan Marcotte who in May 2010 took the existing technologies and techniques, combined them creating what he called responsive web design (RWD). He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design, setting out three important pillars of Responsive Web Design;

  1. Fluid Grids
  2. Flexible Images
  3. Media Queries

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries, an extension of the @media rule.

rwd1

Responsive Web Design features;

  • Responsive Web design is a web development Methodology.
  • RWD creates one website that work on all devices.
  • RWD breaks a website into manageable blocks of content
  • Those blocks of content can be moved around, resized and restyles depending on the device.
  • RWD follows Progressive enhancement through mobile first approach that prioritize content and functionality before design.
  • RWD creates sites that adjust for users, not the other way round

Reasons Why Responsive Web Design is a Must;

  1. Google recommends it
  2. Simplify Your SEO to One Domain
  3. Better User Experience Across Devices
  4. No Redirect Nightmare from mobile specific sites
  5. Make your website future proof

Whether you are an experienced web designers from the old school or a web design newbie just starting out in the field, now is the perfect time to adopt and get to grips with Responsive Web Design.  There are so many online tutorials and books to assist you in learning the ropes, but be careful because majority of them are outdated and misleading. Make sure you only learn from reputable sources like Lynda.com, smashing magazine, sitepoint, Nettuts+ and others.

kisstopher

Leave a comment

Your email address will not be published. Required fields are marked *