Brand Guide

Responsive Design

Read through these principles to help when designing and developing responsive sites, components, and learnspaces.

Overview

These guidelines are intended for designers and developers working with responsive design in learnspaces and websites. For lesson responsive guidelines and limitations, see Responsive Themes.

If you’re not familiar, responsive design is where a single web interface responds to the size of the device it’s displayed on, rather than serving an entirely separate mobile site, or displaying the desktop site on every device. This is our preferred method for design, because it makes maintenance and design consistency easier to achieve.


Device resolutions

Make sure you include designs for three main types of device: desktop/laptop, tablet, and mobile. From those resolutions it will then be possible to interpolate the design fluidly across any device size. Whether you start mobile first or desktop first is up to personal preference. It’s important to not entirely redesign the content for each device, but it should be optimized for usability at that resolution – for example making tap targets large enough and not relying on hover interactions on mobile.

Pictures of device resolutions

Common resolutions to apply designs to are 1280x800 for an MDPI Laptop, 768x1024 for tablet, and 320x480 for mobile. Those are the main resolutions, but it’s up to you and the requirements for the design if you want to include more (for example adjust the design for full 1920x1080 desktop displays). It’s not feasible to do a custom design for every possible device resolution, but you can design a system that will work fluidly across all sizes.

Device Metrics is a great resource to get dimensions for common devices, it even includes ideal touch sizes. Make sure you design at 1x resolution (the Width x Height in dp values) not the 2x or 3x high dpi pixel values. This makes things much easier because you don’t need to multiply dimensions, and everything will be 1:1 for developers implementing the design.


Use a grid

Grids are important in all design systems, but critical for responsive design. Not only does it help when it comes to developing the design with code, but it sets a structure to fluidly adapt content to different resolutions. The grid can then be used to determine how content behaves across devices. The layout tool in Sketch is useful for this. The example below uses a 12 column grid in Sketch. Each card takes up 4 columns on desktop, 6 on tablet, and for mobile the entire design is displayed in a single column.

For developing responsive designs, the same approach can then be taken. Most css frameworks contain a responsive grid (such as Bootstrap, Bourbon Neat, Foundation etc), and the same effect can be achieved easily using Flexbox for a custom grid.


Use symbols

One of the biggest pain points about responsive design is maintaining changes across all device resolutions. Whenever you have changes to make it can be tedious to update it for the desktop, mobile, and tablet versions of the design. This is where symbols come in. Symbols allow you to reuse the same elements across artboards, and can be made responsive with constraints to determine how they should behave when resized. This can handle most of the changes you make between devices, and helps you keep the design consistent and maintainable.


Adjust typography

Larger devices afford for larger heading sizes. In your design make sure you scale your font hierarchy to avoid awkward line breaks in your headings. Body text is often fine to stay the same as it is for larger device resolutions. See the Typography Guide for an example. Consider enabling hyphenation to account for the shorter line length on mobile. This can be enabled using the following css:

hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 2;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-lines: 2;

Get creative

Don’t limit yourself to the same structure in all situations. Consider other forms of layout and navigation that can be made responsive. Just be sure to create a prototype (such as the Framer prototype below) or explain in detail any custom interactions.

Interact with example below created in Framer – it uses a 360° image with nodes for each of the activities. On desktop, clicking and dragging moves the view around the scene, but on mobile the device’s accelerometer determines the direction of view.

View the full version here and try it on your phone.