LearnWhy Use Responsive Web Design?

Allison Grayce
writes on December 7, 2012

Share with your friends


There used to be a clear differentiation between desktop and mobile. With the introduction of tablets and tons of new internet accessible technologies, we’ve been faced with designing for more monitor resolutions and devices than ever before.

In this video, we’ll learn the basics of how and why we should embrace responsive web design.


You can create a flexible website that fits beautifully on any device, rather than having to create and maintain separate versions for each device.

But how to you create a responsive website?

Responsive websites are built on a flexible, fluid grid that adapts to the browser or device that is rendering the website.

Here’s an example of a fluid website:

When you change the browser size, it adjusts the size and layout of the images as the browser size changes.

This is because the site is built using a fluid grid, and uses percentages for the width, instead of exact pixels.

Creating a fluid foundation is the first step to creating a responsive website.

A responsive website creates version of the same website that can stretch and resize with the browser.

Ensuring your site adapts to whatever size browser or device your visitors are using

When you get to a specific width, the website can snap to a different layout specifically for mobile devices. This is done with Media Queries, which allow you to target specific widths where your layout begins to break or look cramped.

You can take control of your fluid layout and target specific devices like tablets and smart phones.

One Response to “Why Use Responsive Web Design?”

  1. Winkypop on March 31, 2013 at 7:32 am said:

    About to implement a fully responsive design for a Government site. Radical for us but great for customers.

Leave a Reply

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more