Getting Technical

In Lesson 1, we introduced the concept of responsive design and talked about why it was important. Now, we’ll learn a bit about the mechanics of implementing a responsive design. If you’re non-technical, stick with us — it’s important to understand how this stuff actually works! Getting a good handle on the technical constraints and process makes it easier to be thoughtful about design considerations.

In this lesson, you’ll see that there are three main ingredients that go into implementing a responsive design (credit to Ethan Marcotte for this breakdown):

  1. A flexible, grid-based layout
  2. Media queries
  3. Flexible images and media

Let’s dive in and learn what each of those means.


Flexible, grid-based layout

First, a bit of background. Traditionally in web design, websites were defined using fixed grids. You’d define the size of a parent container (for example, 960 pixels), and set the components within it to fixed pixel widths, since the layouts would always appear in the same size. No matter the user’s screen resolution, the elements within would be the same width. This was a remnant from the print era — when layouts and grids were fixed.

Media queries best practicesSource: Smashing Magazine

But, as designers thinking about responsive layouts, we have to account for all types of devices and resolutions. If we were using a fixed grid, we would have to manually adjust the height and width of components for different resolutions. So, instead of using pixel-based widths, we use fluid grids to allow our elements and divs to resize proportionally based on our browser dimensions. This is because fluid layouts use percentage-based calculations to figure out the width of elements within the parent container.

Media queries best practicesSource: Smashing Magazine

To recap — fixed grids use pixel-based dimensions, while fluid grids use percentage-based calculations. Using relative units allows our layout to resize effectively.

If you were manually creating a grid, you’d use the formula to determine the percentage widths of various elements in your layout:

target / context = result

Let's look at a quick example. If we are using a 960px grid (a grid that has a wrapper container of 960px), and we have one column that’s 300px… we can find the percentage dimensions of that column div with the equation 300 / 960 = 31.25% (target / context = result). Instead of applying pixel dimensions to the elements in CSS, now, we'll use the percentage values instead to maintain a fluid layout.

See A List Apart's excellent article below for a more detailed technical summary of how to implement fluid layouts.

Read a summary of fluid grids

Media queries

Great, so we know that we can base our site’s layout on a fluid grid that adjusts the size of elements based on percentages of browser width. The other key building block of our responsive design strategy: media queries.

Media queries are a technology built in to the CSS3 specification. A media query allows us to detect certain properties of the browser — like device type, screen size, device orientation (landscape or portrait?), and more. Think of a media query like a browser test — if the browser matches the elements in the media query, it will apply the CSS styles enclosed in the media query. If not, it will just ignore them!

Let’s look at an example media query.

@media screen and (min-width: 1024px) { body { font-size: 100%; } }

The two main pieces of media query syntax: media type (in the above example, it's screen, which means you're primarily targeting computer/device screens as opposed to print preview mode) and the query itself (in this case, it’s min-width:1024px, which means this media query (and its corresponding set of style changes) applies whenever the minimum width of the browser is at least 1024px). For a more detailed look at media queries, syntax, and examples, take a look at the technical specifications below.

CSS media queries on Mozilla's developer site

So, you can apply specific sets of styles that will only be used in certain browser and device types — which allows us to conditionally serve up CSS depending on the device environment. Media queries allow us to change the layout based on browser size — e.g. we can adjust the number of columns in our layout, hide and resize text / images / columns at small and large sizes, and more. By combining flexible layouts with media queries, we can ensure our designs will work in all dimensions.


Breakpoints

Let’s take a look at a key part of media queries: breakpoints. When we use a fluid grid, the design starts to “break” and no longer look good at certain browser sizes (for example, a one-column layout intended for a mobile browser would probably look bad on a widescreen display that has significantly more screen estate). These points where the design looks off are commonly referred to as “breakpoints”. Responsive sites use a set of breakpoints to define their media queries, and conditionally set responsive styles to update the layout at these points. Here’s an example. As you can see, the breakpoints target different screen widths:

@media screen and (min-width: 300px) { /* ...mobile styles here... */ }
@media screen and (min-width: 600px) { /* ...tablet styles here... */ }
@media screen and (min-width: 900px) { /* ...desktop styles here...*/ }

Define breakpoints based on content

An old approach in responsive design was to use device sizes to determine breakpoints — e.g. 320px (iPhone portrait), 480px (iPhone landscape), and so on. This made sense initially, since there were only a few major devices to target our designs for. The problem with this, however: the device landscape is constantly changing, and today's breakpoint values are likely to get outdated quickly. It’s better to work from the perspective of our website’s unique set of content, and adjust the breakpoints appropriately based on when our layout breaks. For example, if the navigation bar on your website has 5 items and this looks bad past a smaller width, then use that as a breakpoint.

Read more about designing for breakpoints on A List Apart

Major vs. minor breakpoints

A quick note on terminology: major breakpoints are when huge elements of your layout get affected (most typically when you change the number of columns in your layout) — i.e. your website changes from a three-column layout to a one-column mobile view. Minor breakpoints, on the other hand, happen when you need to modify or adjust specific elements at certain screen dimensions. An example would be adjusting the margin and padding on a navigation bar that appears cramped at smaller screen widths — the layout isn't changing wholesale, but you're updating styles. The rule of thumb is to design for as few major breakpoints as possible.


Check out a more detailed read on breakpoint types

Flexible images and media

There are a number of clever technical tricks that allow you to swap out large, desktop-size images with a smaller mobile version, leading to shorter load times and faster websites. This article goes into the details if you're curious. But, the main concept here: you want to make sure that images can resize appropriately based on your grid. The simplest way to do this is to use CSS to set a max-width on images to 100%.

img {max-width: 100%}

This ensures that the image will never be larger than 100% of its dimensions, making sure it doesn’t get stretched or pixelated. The image also will never be larger than its parent container, so if the div it’s in is 500px, the image width will be 500px and the height will be adjusted appropriately to maintain the image’s aspect ratio.

DIY Exercise

Take a look at the current BBC site. It's not responsive! They've brought you in to help them optimize their site for viewing on multiple devices. Your goal is to give them a set of recommendations on making their site responsive. You need to ensure that the layout doesn’t break in these four contexts: widescreen desktop browser, laptop, tablet, and mobile phone. Here are your objectives, and some things to think about:

  • Determine a set of a breakpoints for the site. Base these on your observations of what currently breaks on the site at certain widths.
  • What content can be hidden on different screen sizes? What is most essential on the page in the mobile, tablet, and desktop versions?
  • Would you use a fluid grid?
  • How would you rearrange the sidebar and navigation bar in different widths?

Feel free to use a simple tool like Keynote or Sketch to lay out/wireframe your solutions. Share your thoughts in the comments below!