Responsive Website Design

By Brandon Roach May 11, 2012

The devices people are using to access the internet are rapidly and diversely changing from that of the standard desktop usage. We now more than ever, interact with the web via handheld devices, accessing information as we need it wherever we are. We need to be able to get the information quickly without scrolling all over the place. Websites need to adapt to these changes and I believe that Responsive Web Design (RWD) is an effective and efficient solution for this change.

Look for an upcoming example of Responsive web design from Cirv.  We will also write an article discussing the challenges and results of our efforts.

80% of mobile customers instantly abandon their shopping upon encountering a bad user experience

According to Limelight Networks, Inc, 80% of mobile customers instantly abandon their shopping upon encountering a bad user experience. Is your website mobile-friendly? If not why and what can you do? Web technology and devices are constantly changing. Computer screen are getting bigger while at the same time users are rapidly moving to handheld devices. This vast diversity in user interaction is requiring a change from the traditional static 800×600 or 1024×768 optimized screen size web pages to a more adaptive solution that responds differently based on screen size. A solution that has been proposed by Ethan Marcotte on A List Apart to address this issue of ever-changing devices, browsers, screen sizes and orientations with a flexible, fluid solution is call Responsive Web Design.

Responsive Website Design

Responsive Website Design

The figure above illustrates an example of a Responsive Web Design (RWD). You can test the responsiveness of this example site by resizing your browser. Notice how the layout adapts to the various screen sizes.

Responsive Website Design Resources:

  • Book: Responsive Website Design – By Ethan Marcotte
  • Examples Websites: Media Queries
  • Tool: Responsive Web Design Testing Tool
  • Pros & Cons: 3 Reasons You Shouldn’t Build a Mobile Website
  • Cautions: CSS Media Query for Mobile is Fool’s Gold
  • How To: CSS Media Queries & Using Available Space
  • How To: Responsive Web Design
  • Tools, Frameworks, etc: Responsive Web Design Techniques, Tools and Design Strategies