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

Web Accessibility Compliance

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Responsive Techniques

2:51 with Aisha Blake

Responsive web design could be an entire course in and of itself. In fact, Treehouse has several courses that discuss responsive techniques in detail. I’ll leave links to some of them in the teacher’s notes. We’ll touch on just a few really important points here that should be enough to get you started.

Example Sites

Skeleton CSS
Example Landing Page

Further Reading

Responsive Layouts
Responsive Images
Bootstrap 4 Basics

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

    At this point in the evolution of the web, 0:00
    it's widely agreed that we need to build for a vast array of screen sizes. 0:02
    There's simply no getting around it. 0:07
    We've got phones, and tablets, and Laptops, and desktops, 0:10
    and giant conference room monitors, that we have to account for. 0:13
    There are so many different sizes a user screen might be, 0:18
    that there's no use in trying to design for each individually. 0:21
    What we can do instead is design around our content. 0:25
    We can make our work beautiful and easy to use, 0:29
    no matter the size of the screen it's viewed on. 0:32
    Responsive web design could be an entire course in and of itself. 0:35
    In fact, Treehouse has several courses that discuss responsive 0:39
    techniques in detail. 0:43
    I'll leave links to some of them in the teacher's notes. 0:44
    For now, we'll touch on just a few really important points here, 0:47
    that should be enough to get you started. 0:51
    An integral part of a responsive layout is a flexible grid. 0:55
    Grids are broken up into columns, usually twelve. 0:59
    And our content then fills as many of those columns as we need it to. 1:03
    This helps to maintain consistency, 1:08
    in the way everything is spaced throughout a site. 1:10
    The widths of our columns need to be defined using a relative width. 1:12
    Rather then a fixed unit like pixels. 1:17
    That way our columns, and 1:19
    therefore our content, will be able to scale with the width of the viewport. 1:21
    There is a wealth of CSS frameworks out there. 1:26
    And the responsive grid is possibly the most common feature among them. 1:28
    Let's head back over to the Skelton website and 1:33
    check out what it has to say about their grid. 1:36
    So here we can se that everything should be wrapped in an element, likely a div or 1:40
    a section, which has the container class. 1:45
    From there, content is broken up into rows. 1:48
    Again, there's a class to go along with this sort of inner container element. 1:52
    Each row gets broken up into twelve columns, but 1:56
    the combination of those columns is up to the developer of the site. 1:59
    The available class names make it easy to write out in English, 2:04
    how much space should be taken up. 2:08
    But the total should always add up to 12. 2:10
    Skeleton comes with a little demo site, that we can play around with. 2:14
    Using the developer tools on it, 2:20
    reveals how we might use those grade classes in action. 2:22

    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