More Than Just Mobile

Here at Skillshare, providing access to education is a core part of our mission. One of our main initiatives in the last year has been to shift from building a web application to building a platform that provides access to our content through any device.

Why Responsive?

A key component in this initiative has been to provide a solid mobile web experience. We determined the best way to achieve this would be to design a responsive grid system that we could then implement across the dozens of pages on our site. This system would allow us to adjust our site content to any device size, while keeping our code maintainable and our team agile.

Designing the Grid

We took to the drawing board to determine a grid system that would work best for our content, and would be easy for both designers and engineers to apply. We landed on a twelve column grid that has four main breakpoints including a desktop version, tablet landscape version, tablet portrait version and mobile version.

Our grid system consists of a few different pieces:

• columns: These represent where page elements can live. An element can span any number of columns up to twelve.
• gutters: These are the white space that fall in between each column.
• outer gutters: These are the white space that live outside of the main grid.

There are clearly defined rules at each breakpoint for these pieces. These rules tell us whether the columns should have a fixed number width or a fluid percentage-based width, as well as what the width for the gutters and outer gutters should be.

The images below demonstrate the grid system in use on our homepage in both desktop and tablet versions. The clear space shows the columns in our system and the green space shows the gutters.

Implementing the Grid

We wanted to create an interface that made it easy for our engineers to implement this grid system. We took a look at other frameworks that included responsive systems like Skeleton and Twitter Bootstrap in order to get an idea of common usage patterns.

Below is an example of what the markup might look like for a section that implements our grid system:

<div class="grid">
    <div class="wrapper">
        <!-- First Row -->
        <div class="col-6"></div>
        <div class="col-6"></div>
        <!-- Second Row -->
        <div class="col-3"></div>
        <div class="col-4"></div>
        <div class="col-5"></div>
    </div>
</div>

And here is a visual example for that markup:

This implementation includes three key HTML classes including .grid, .wrapper and .col-x. A .grid is a section on the page that follows the responsive grid system. A .col-x is an element that will span x number of columns in the grid. A .wrapper wraps a section of columns, we’ll see what purpose it serves below.

Once we have our grid and column implementations complete, we just need to define the different grid types and gutter widths for each of our breakpoints using media queries.

// Mobile, Screen size < 541px
// Fluid grid with 12 columns, 20px gutters, 20px outer gutters
.grid {
    padding: 0 20px;
    @include fluidGrid(12, 20px);
}// Tablet Portrait, Screen size between 541px and 809px
// Fluid grid with 12 columns, 20px gutters, 40px outer gutters
@media screen and (min-width: 541px) {
    .grid {
        padding: 0 40px;
        @include fluidGrid(12, 20px);
    }
}// Tablet Landscape, Screen size between 810px and 989px
// Fluid grid with 12 columns, 30px gutters, 60px outer gutters
@media screen and (min-width: 810px) {
    .grid {
        padding: 0 60px;
        @include fluidGrid(12, 30px);
    }
}// Desktop, Screen size >= 990px
// Fixed grid with 12 columns, 50px fixed columns, 30px gutters
@media screen and (min-width: 990px) {
    .grid {
        width: 930px;
        margin: 0 auto;
        padding: 0 30px;
        @include fluidGrid(12, 50px, 30px);
    }
}

Rolling It Out

Once this grid system was designed and implemented, we needed a solid roll out plan in order to see it in action across the site. To start, we updated the markup on highly trafficked pages and those pages that were often linked to in emails or easily accessible through the mobile web.

The engineering team also put together a “Skillshare” for both designers and engineers to make sure everyone on the team understood how the system worked, why we made certain decisions, and best practices for using it.

The Benefits

Outside of creating a mobile web experience for our users, we’ve seen several other benefits from creating this responsive system. Going forward, we’re now able to make any new pages responsive with ease. We now have a clear set of standards for both our designs and our code. These standards have enforced consistency across our web application, and in turn allowed us to develop modular and reusable code.