Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Layouts

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What is Responsive Web Design?

1:27 with Nick Pettit

Responsive web design is a collection of techniques for building websites that work on multiple screen sizes. The scope of responsive design sometimes also includes websites that work at different pixel densities, such as traditional screens or high DPI screens.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [SOUND] Responsive web design is a collection of techniques for 0:00
    building websites that work at multiple screen sizes. 0:03
    The [SOUND] scope of responsive design also sometimes includes websites that 0:07
    work at different pixel densities, such as traditional [SOUND] screens or 0:12
    high DPI screens. 0:16
    It all started in May of 2010 when Ethan Marcotte wrote a seminal 0:18
    article titled Responsive Web Design on the blog A List Apart. 0:22
    You can find a link to the blog post in the notes associated with this video. 0:27
    And I highly recommend you take the time to read it. 0:31
    Back then, most web professionals would often create a mobile version of their 0:35
    site and a desktop version, which means they would have to maintain two 0:39
    separate websites, or worse, the site wouldn't work on mobile at all. 0:44
    People also used to use JavaScript to detect which browser people were using, 0:50
    which is unreliable. 0:54
    At first, this seemed like it would be somewhat maintainable, but 0:56
    when more phone sizes and then tablets arrived and 1:00
    fragmented layouts even further, it quickly became unsustainable. 1:04
    Instead, Ethan presented the idea that rather than trying to make a different 1:10
    layout for every device and screen size, we should instead create layouts 1:15
    that intelligently respond to any device, hence the term responsive web design. 1:20

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up