What Responsive Design Actually Means

What Responsive Design Actually Means

Responsive web design is something you might have heard of, but maybe don't quite understand. Really it's just a buzz word that web designers use to describe a certain way of thinking about a websites layout.

Responsive web design is really not all that new. Designers have done fluid layouts before, but not for any specific purpose. I am willing to guess most of them did it only to change things up from the usual fixed-width layouts.

What has really pushed responsive web design into mainstream has been the enormous growth of smartphones and tablets. Are you ready for some mobile web stats?

  • Mobile search has grown 500% in the past two years
  • In May 2012, 10.11% of website page views came from a handheld mobile device
  • Last year's mobile data traffic was eight times the size of the entire global internet in 2000
  • 25% of people in the US only access the internet only through their phone
  • 29% of smartphone users use their phone for shopping

(stats taken from the following infographic from sixrevisions)

Definition of Responsive Design

Wikipedia defines Responsive Web Design as:

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing 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).

I think this explains it quite well. In the simplest terms it allows a sites layout to adapt according to whatever device the user is viewing it on. The site will use the available screen real estate to tailor specific goals to that particular type of user. For example, a mobile phone user needs the simplest possible way to buy something from you; but a desktop user might want to see related products.

Pros of Responsive Web Design

  1. Prevents you from creating two seperate sites (one for mobile, and one for desktop).
  2. Only have to update one site when the layout needs to change, or content needs to be added.
  3. Allows you to strip out unnecessary elements on mobile, and give the user the ability to toggle that feature as needed.

Cons of Responsive Web Design

  1. It takes a lot of time. It slows down the whole process to make sure it is done right.
  2. It costs more. Obviously related to #1 because it has a trickier implementation.
  3. More testing is needed. There are so many devices, and screen sizes out there that testing a Responsive Web Design becomes a huge pain. Never mind the fact you are simultaneously creating different layouts for each.

Does Every Site Need To Be Responsive?

Of course not. Many things affect whether or not you need a responsive design. You have to weigh the pros and cons listed above specific to your business to determine if it is required.

Responsive Web Design Example

We have done a few responsive designs, but the most recent happens to be Flaman Clearance. I would suggest you check that site out on your phone, as well as on a desktop to see what I have been talking about.

You will notice on the category listing pages, how simple and easy the listings are to browse on mobile; and yet how different they appear on the desktop site.

Conclusion

If you have any questions about Responsive Web Design, or are wanting to implement this on your existing site; please leave us a message in the comments or use our contact form.