What is Responsive Design

back to blog

With the growing use of mobile devices and their multiple resolutions, we are realizing that a fixed-size design approach of web design isn’t working anymore. Zooming in, zooming out or constantly scrolling can make users leave your site irritated. This creates a problem in readability and usability leading to the potential loss of existing and potential clients. There is a need for website designs that will be usable on all resolutions and devices. But creating a separate version for each of these instances could be very costly.

One of the hottest trends in web design is responsive web design. Lately, many clients have been asking what is responsive design. There are a few basics elements that are required in order to make responsive design work and I will be discussing them below.

What is responsive design?

Responsive web design (RWD) is a flexible approach to web design that serves the same page to all devices. The code on a page detects what device and resolution are being used and adjusts elements on the page to fit the users screen and provide an optimal viewing experience without resizing and scrolling. The responsive design approach is based on the use of CSS3 media queries, fluid grids and images.

To see it in action, open the responsive site on a desktop and start resizing the browser. You will see the layout adjust to the new browser sizes you create by dragging the right bottom corner in, out, up and down.

Below is example of the Starbucks website and how it looks like at different resolutions.

What is responsive design - Startbucks Website

History of responsive design

The idea of responsive web design was first proposed by Ethan Marcotte in 2010 in his article. Here he discusses the elements that make responsive design. Then in 2011 he wrote a book to further illustrate the idea called Responsive Web Design.

Responsive Design Examples

1. Tattly

02-tattly

2. Time

03-time

3. Foodsense

04-food-sense

4. Martha Stewart

05-martha

5. Indochino

06-indocino

6. Disney

07-disney

7. GE

08-GE

8. Microsoft

09-microsoft

9. Do Lectures

10-do-lectures

10. Alabama Government Website

11-alabama-website

Written by on September 10, 2013

Leave a Reply