Cloud Four Blog

Technical notes, War stories and anecdotes

The Power of Responsive Design Sprints

In 2008, I sat gobsmacked in Web 2.0 Expo session. The topic of M. Jackson Wilkinson‘s presentation was “Design and User Experience in the Agile Process“, and I literally couldn’t imagine designing that way.

Fast forward seven years, add responsive design to the mix, and I can no longer imagine designing any other way. Responsive Design Sprints are key to our process.

Why agile for design?

Our path to agile for design started with moving to agile for development. Lyza and Megan spearheaded a move to agile development a few years ago and that change influenced the way we looked at projects.

Because of our success using agile for development, we were primed to try it when responsive design broke our existing design process.

We’ve found that agile design is ideally suited for designing responsive patterns. It allows us to focus on small pieces of a design and iterate on them quickly.

What is a Responsive Design Sprint?

Most of the time when people talk about design sprints, they’re referring to product design sprints. This is the process that Google Ventures, our friends at Fresh Tilled Soil and others have developed and promoted as a way to quickly validate product design and direction.

Thoughtbot's Product Design Sprints diagramThoughtbot’s Product Design Sprint Phases

Product design sprints are an exceptionally useful tool. The phases in our sprints have some similar characteristics—you’ll see parallels to the Understand, Diverge and Prototype phases in particular.

However, Responsive Design Sprints are decidedly different in what they’re trying to accomplish and diverge from Product Design Sprints in some specific ways.

Pre-sprint planning

Our first step when planning a project is to break the site down into the patterns—from the lowest level to higher-level components—that we need to design.

patterns-into-sprints

This is our starting position for each sprint, but because we’re working in an agile fashion, we’re flexible and can change what patterns are being worked on. We can also spend more time on patterns or bring patterns in from later sprints if we’re ahead of our plan.

Before each two-week sprint, we collaborate with our clients to figure out what patterns will be covered in the upcoming sprint. This not only allows us to confirm that our priorities are correct, but it also gives our clients a heads up on what they need to prepare for the sprint kickoff.

Sprint Day 1 — Client briefing and small screen sketching

Client briefing

Each sprint starts with a briefing on the patterns for that sprint. This briefing is led by the client team.

During the briefing, the client team provides everything they know about the patterns including:

  • How the patterns are used.
  • Any edge cases for the patterns.
  • Analytics information on the patterns.
  • User testing that has been done.
  • Support or user feedback on patterns.

If we’re dealing with foundational patterns like typography and buttons, the briefing could simply be going over any existing brand and style guidelines.

However, when we start working on more complex patterns—for example a shopping cart interface—there is often quite a bit of information about the pattern to convey.

Small screen sketching

After the briefing, we start group sketching sessions. Ideally, we do this with our client, but often we work with teams in other parts of the world so we only get to sketch together a couple of times during a project.

Everyone participates in the sketching irrespective of roles. Sketching small screen designs helps people start thinking more tangibly about the constraints of small screens. It is one of the reasons why we include clients in sketching exercises whenever we can.

We pick the portions of the patterns that we think are going to be the most difficult to fit on small screens and sketch those. This often means that we’re not sketching the entire interface or even the entire pattern that we’re looking at, but instead just a small portion of the pattern that looks particularly troublesome.

Sketches on sticky notes

We sketch on small sticky notes using Sharpies. Every sketching session is time-boxed. The constraints on time, size and low fidelity markers prevent people from getting too detailed in their drawings.

And we use Sharpie brand markers because Tyler is a marker snob.

(Tyler here: The store-brand ones bleed too much!!)

Each person posts their sketches on the board and talks about what they saw and how they were trying to solve the problems. The conversation around the sketches is just as important as the sketching itself.

Photo of me presenting some of my terrible sketches

The goal of the sketching session is to give the designers some ideas on how they might solve the problems that the patterns represent. We do multiple sketching sessions until people feel they have enough material to explore.

Focus on small screens first

For most of the sprint, we focus on small screens. We’re often asked how things will work on wider screens early in a sprint, but we try to resist thinking about that yet.

If you’ve managed to organize your life to fit inside a New York City apartment, you’re not going to have any trouble adjusting to a big house in the suburbs. The same is true of responsive designs.

If you nail the small screen design, the larger sizes will be easy by comparison.

Sprint daily activity — Quick design iterations

We move immediately from sketches to testing our ideas in the browser. We create quick prototypes of the designs that we then share with the client team in Slack.

The video above shows collaboration happening on day 2 of a new project. We’re showing simple small screen designs in the browser and getting feedback both from our co-workers and the client team.

Often, we will have members of the client team working on patterns as well. They may be sharing mockups, photographing sketches, or even coding prototypes.

What matters most is that we’re sharing ideas quickly and iterating towards better solutions.

LICECap, the worst named, best tool ever

One of the advantages of designing in the browser is that we’re able to demonstrate how things should interact. But when we’re working with distributed teams, we need a tool to show the interaction.

That’s where LICECap comes in. LICECap makes it easy to capture screen video and save it as an animated gif.

So instead of saying to a client, “imagine we hide all of the controls behind a single button until someone clicks on it” and hoping that the client understands, we simply post an animated gif in Slack.

Animated gif showing add to cart interaction

The animated gif eliminates confusion and facilitates quick feedback.

Mid-sprint review meetings

The amount and frequency of review meetings in a sprint change from project to project, but generally we’ll have one review meeting late in the first week of the sprint to make sure we’re on the right track.

We share our screens and show any in-progress work. Those who have been active in our shared Slack channel will have seen most of the work already, but the meeting ensures that all stakeholders are looking at the patterns early in the sprint.

Depending on the complexity of the pattern, by the second review meeting we’ll have examples of how the pattern will adapt as the screen size increases.

Sample two-week sprint schedule

End of sprint review

At the end of the two week period, we have one final meeting to review the progress on the patterns tackled during the sprint. Nothing in this meeting should be a surprise because we’ve been sharing our work throughout the sprint.

After we’ve reviewed the patterns, we talk about what worked well during that sprint and what we could improve on for the next sprint. We’re not only iterating on the designs, but on the process itself.

This isn’t rocket science, but it feels new just the same

Nothing I’ve described here is new.

Agile processes have been around for years. Many people have talked about how responsive design makes pattern libraries more important than ever.

But the combination of responsive design, patterns libraries, sprints, gifs, and constant communication via Slack creates a radically different design process. Even if the pieces that comprise them aren’t new, Responsive Design Sprints certainly are.

Most importantly, Responsive Design Sprints work exceptionally well.

They helped us convert complex interfaces that seemed insurmountable. When we were asked to convert an e-commerce design to responsive in only three months, it was Responsive Design Sprints that helped us move quickly and finish the project a week ahead of schedule.

I can only imagine how stunned 2008 me would be to see what our design process looks like now.

Converting an existing site or app to a responsive design

Over the last few years, we’ve converted quite a few existing sites and applications to responsive web design. We’ve gotten pretty good at it so I thought I’d share our process.

Not a full redesign

Many of our clients have come to us with desktop sites that are working well that they are rightly afraid of messing up.

For example, when we first starting working on the Walmart Grocery site, the main Walmart desktop site had recently undergone a major redesign effort. We liked the new design, and were pleased to see that the designers had already considered touch-friendly targets.

Walmart.com Homepage

Given how recently Walmart had redesigned the site, any responsive plans that required a full redesign were non-starters. This wasn’t the time to rebrand the site.

In addition, Walmart and many of our other clients are running successful businesses on their desktop sites. They conduct user testing and constantly analyze site usage to optimize performance and profits.

Therefore, our goal has been to convert the site to a responsive web design with as little disruption to the business as possible.

Not a responsive retrofit

At the same time, these projects have been much more extensive than a responsive retrofit. Ben Callahan has written about several techniques for responsive retrofits. In the article, Ben poses the following scenario:

To start over with something like this would be a year long project costing hundreds of thousands of dollars. Is there anything you can do with just CSS to make the existing experience a bit better for smaller screens?

Ben does a wonderful job describing the techniques people can use to apply CSS with scalpel-like precision to start a site on their way to responsive without making major changes to the underlying code. If that’s the constraint you’re working with, I highly recommend his article.

For the most part, our clients have different constraints. They don’t mind changing markup if necessary. And they expect the CSS to change quite a bit.

What they want to preserve is the wide screen experience because that is what is currently working and what their users are accustomed to.

Responsive conversions

If they’re not responsive redesigns and they’re not responsive retrofits, what do we call projects where an organization wants to move to responsive design, but wants to preserve the desktop experience?

For lack of a better term, I’ve been referring to them as responsive conversions.

The desktop experience will have to change some

Clients often seek to preserve the desktop experience for completely understandable reasons. This often leads to a mandate that the “desktop site cannot change.”

Unfortunately, it isn’t possible to convert a site to responsive design without some changes to the wide screen version. Inevitability, there are situations where tweaks to the desktop experience would make the responsive implementation significantly easier.

And more times than not, the changes that come from figuring out how to design the mobile experience make the desktop experience better.

For these responsive conversion projects, our guiding principles have been:

  • We will do our best to keep the wide screen experience feeling as close to its current experience as possible.
  • Under the hood, we’re free to do whatever is necessary to make the site responsive.

We strive to make the experience better no matter what size screen someone is using.

Breaking the existing site into smaller patterns

Our first step in converting an existing site into a responsive design is to identify the patterns we think we will need to design.

This process usually consists of a couple of team members sequestering themselves in a room and reviewing the site and writing on sticky notes what patterns they see. This pattern identification provides us with a guide for estimating the time we think projects will take.

The results of a high-level pattern identification.

Recently, Charlotte Jackson wrote about an exercise that teams can undertake to identify patterns. We’re looking forward to trying this on a future project.

Ordering the patterns into sprints

After we’ve identified the patterns, we start organizing them into sprints. Some of the things we consider when organizing the sprints are:

  • In general, we want to start with the smallest patterns and build up to the most complex.
  • We check with our client to see if any components are particularly important and need to be addressed earlier. If so, we figure out any dependencies for those components and prioritize them.
  • As each sprint passes, our velocity increases as does our ability to tackle more complex components.

patterns-into-sprints

The whole point of agile is to be flexible so this plan isn’t set in stone. But it does give us a starting point and lets our clients know what they need to prepare for each sprint. Our client team plays a huge role in making each sprint successful.

Responsive Design Sprints

The biggest change to the way we work is that we now design in sprints. Responsive design sprints are a topic worthy of their own article and I plan to write more about them soon.

In the meantime, here are the highlights of the way we approach these design sprints:

  • Sprints focus on patterns.
  • We work with the client ahead of time to determine what patterns will be tackled in an upcoming sprint.
  • At the beginning of each sprint, the client team presents everything they know about the patterns—how and when they are used; what user testing has been done; and any edge cases we need to consider.
  • We then start sketching small screen versions of the patterns.
  • Once we’ve got a good direction, the team divides up the work and starts designing in the browser.
  • We share what we’re designing with our clients nearly every day via Slack so we’re constantly adjusting and refining the designs.
  • At the end of our two-week sprint, we’ve got working prototypes of those responsive patterns.

Sample two-week sprint schedule

There is much more to say about this process. Read my follow up article on The Power of Responsive Design Sprints.

Rinse and repeat until we’re “done”

Once we start the responsive design sprints, we simply continue the formula until all of the patterns and components that we’ve been tasked to design are complete.

One of the interesting things about this process is that the definition of what “done” means changes from project to project. There are a couple of reasons for this.

First, our client’s engineering team is often responsible for taking our work and integrating it into whatever backend system they use. In these cases, our work can be complete long before the site launched and officially “done.”

Second, we’re frequently asked to teach web teams. On more than one project, we’ve had designers and developers from the client’s team embed inside our team to learn from us.

This means that we start projects with the goal of teaching the team to fish for themselves and once they can, we hand over the project to their designers to finish things up.

The process works

When we’re confronted with a complex fixed-width interface, I often have no idea what the responsive version of that interface will be. But I do know even the most complex interfaces can be converted to a responsive design by breaking them into smaller patterns and designing in sprints.

I have complete faith in the process because I’ve seen it work multiple times. If you’re stuck on a complex responsive design, I recommend giving it a try. If you need help, let us know.

(P.S. You may enjoy my follow up article on the Power of Responsive Design Sprints)

Listen to WalmartLabs on the RWD Podcast

WalmartLabs LogoWe had the great fortune to help WalmartLabs convert their sites to responsive design, and it is always nice to see our clients get recognized for their hard work.

Mini Kurhan and Olawale Oladunni, two designers at WalmartLabs, were recently interviewed by Ethan Marcotte and Karen McGrane for the Responsive Web Design Podcast.

I highly recommend giving the interview a listen. There is also a transcript of the interview if you prefer.

It was great hearing Mini and Ola talking about the challenges Walmart faced and how they overcame them. It was a massive effort to convert the sites to responsive design and the Walmart team did a fantastic job. We had a blast working with them.

If you want to learn more about the Walmart redesign, particularly when it comes to responsive images, check out Mini and Ola’s presentation from Responsive Field Day.

A Responsive Guide to Type Sizing

When starting new projects, a CSS builder’s initial concerns tend to involve typography. Setting a typographic foundation with the right mixture of ingredients can form something solid enough to support many other building blocks of design. It’s an approach that makes structural sense.

Proportions are a key ingredient to the mixture. Calibrating your type proportions for a balance of aesthetics and order can be an obsessive undertaking. It’s a challenge getting proportions right for a given screen size, let alone any possible screen size. This process can be less challenging — even for responsive designs — if you use a modular scale and let math do the work for you.

Using a modular scale for typographic proportions

In his detailed article on the subject, Tim Brown demonstrates using a modular scale for composing type. He explains how compositions can benefit from using numbers that relate to each other in a meaningful way:

Modular scales[…] help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers.

This modulation-based approach is particularly useful for determining type sizes. Selecting sizes using a ratio (instead of guessing) yields a more harmonious range of proportions.

With tools like this indispensable calculator, you can see how different bases and ratios affect your scale. These are the variables in your scale’s equation. The value produced by multiplying or dividing these variables is a step on your scale. Repeating the operation on each resulting value forms a new step:

Step Math Result
+3  40 × 2 80   
+2  20 × 2 40   
+1  10 × 2 20   
 0  none 10   
−1  10 ÷ 2  5   
−2   5 ÷ 2  2.5 
−3 2.5 ÷ 2  1.25
Example with a base of 10 and a ratio of 2

You can also associate each step in the sequence with the number of times the ratio has been multiplied or divided:

Step Math Result
+3 10 × 2 × 2 × 2 80   
+2 10 × 2 × 2     40   
+1 10 × 2         20   
 0 none 10   
−1 10 ÷ 2          5   
−2 10 ÷ 2 ÷ 2      2.5 
−3 10 ÷ 2 ÷ 2 ÷ 2  1.25

Experimenting with base and ratio parameters is a quick way to gauge how much proportional contrast is right for your project. Compare the following scales:

Due to their ratios, these scales have wildly differing degrees of change between each step. The “golden section” ratio yields much more change than the “minor third”. Consider how much change you’re likely to need, and how it correlates with varying screen sizes and content hierarchy.

Comparing two scale ratios

Scales with the ratios of 1.618 and 1.2 compared on modularscale.com

The balance of typographic contrast in scale is dependent on screen size. A scale that works well on a large screen may have too much contrast for a small screen (and feel obtrusive). Likewise, a scale that is harmonious on a small screen may be too subtle when viewed on a large screen.

One solution to this conundrum is to create a scale intended for small screens that is also capable of adapting for large ones. The first thing to consider when creating that scale is which ratio to use.

Step Font size Result
 0   1.0em
Abcdefg
+1   1.2em
Abcdefg
+2  1.44em
Abcdefg
+3 1.728em
Abcdefg
+4 2.074em
Abcdefg
+5 2.488em
Abcdefg
The minor third ratio (1.2) with a base of 1em

The minor third ratio of 1.2 yields a gradually changing range of sizes. They all feel reasonable for small screens, and are distinct enough for levels of typographic hierarchy. At step #5, the resulting size can still be used while retaining a reasonable number of characters per line. With these attributes, this ratio feels like a good selection for small screen proportions.1

Applying your scale from the ground up

After figuring out a scale that works well for your project, you’ll probably want to put it into practice. CSS offers a few options:

  1. Copying and pasting numbers for a bunch of property values
  2. Using preprocessors like Sass with built-in math capabilities
  3. Using the native CSS calc() function

The following examples employ option #3, using PostCSS in order to provide browser support for calc() and var(). If you prefer a different CSS processor, you can apply the same operations with that tool’s own arithmetic and variable syntax.2

For more complex modular scale applications, you should check out these plugins available for PostCSS and Sass:

They provide a cleaner syntax than calc() for getting scale values, and also support multiple values for base and ratio.

Configuring the variables

The first step is to define values for the ratio and base variables that much of the scale logic depends on:

:root {
  --ratio: 1.2;
  --base: 1;
  --base-em: calc(var(--base) * 1em);
  --base-px: calc(var(--base) * 16px);
}

There are three base-related properties defined here. This is to provide flexibility when different CSS units (or no units) are needed.

Next, you need to establish the range of scale steps you’re likely to use:

:root {
  --ms0: 1;
  --ms1: var(--ratio);                    /* 1.2   */
  --ms2: calc(var(--ratio) * var(--ms1)); /* 1.44  */
  --ms3: calc(var(--ratio) * var(--ms2)); /* 1.728 */
  --ms4: calc(var(--ratio) * var(--ms3)); /* 2.074 */
  --ms5: calc(var(--ratio) * var(--ms4)); /* 2.488 */
  --ms6: calc(var(--ratio) * var(--ms5)); /* 2.986 */
  --ms7: calc(var(--ratio) * var(--ms6)); /* 3.583 */
}

With these step properties defined, you can now compute them with your base to get values from your scale:

font-size: calc(var(--base-em) * var(--ms1)); /* 1.2em  */
font-size: calc(var(--base-em) * var(--ms2)); /* 1.44em */

Establishing default sizes

The browser default font-size paired with the scale step of 1.44 for line-height feels like an appropriate choice for body copy:

body {
  font-size: calc(var(--base-em) * var(--ms0));
  line-height: calc(var(--base) * var(--ms2));
}

Headings probably don’t need to consist of six different sizes (as there are other ways to differentiate them). However, if you do wish to incorporate a different size for each, you can use a series of steps from your scale:

h6 { font-size: calc(var(--base-em) / var(--ms1)); }
h5 { font-size: calc(var(--base-em) * var(--ms0)); }
h4 { font-size: calc(var(--base-em) * var(--ms1)); }
h3 { font-size: calc(var(--base-em) * var(--ms2)); }
h2 { font-size: calc(var(--base-em) * var(--ms3)); }
h1 { font-size: calc(var(--base-em) * var(--ms4)); }

In addition to heading font-size, you should also consider the values for line-height.

Using a lower step of the scale in this case can benefit readability when lines are wrapping:

h3, 
h2 { line-height: calc(var(--base) * var(--ms1)); }
h1 { line-height: calc(var(--base) * var(--ms0)); }

With these defaults for body copy and headings in place, you have a nice foundational hierarchy that works well on small screens:

Ratio of 1.2 on a small screen

A scale with a ratio of 1.2 applied to content on a 320×480 screen

Expanding your scale when proportional contrast is needed

Increasing screen sizes and viewing distances will reveal new typographic requirements for your layout. Your body copy and the contrast in scale of all typographic elements will likely need adjustments to suit the new context:

@media (min-width: 480px) {
  html { font-size: calc(var(--base-px) * var(--ms1)); }
}

Bumping the global font size like this is a practical adjustment that requires little effort. While this practice is common, it’s worth noting that even small tweaks like this can leverage steps from your modular scale. Rather than incrementing the size by an arbitrary few pixels or a percentage, you can use your scale to determine the new value.

In line with amplifying your body copy, you might also want to increase the amount of change between each heading size. You can do this by overriding the larger headings with sizes from higher up your scale:

@media (min-width: 768px) {
  h3 { font-size: calc(var(--base-em) * var(--ms3)); }
  h2 { font-size: calc(var(--base-em) * var(--ms4)); }
  h1 { font-size: calc(var(--base-em) * var(--ms5)); }
}
 
@media (min-width: 1024px) {
  h2 { font-size: calc(var(--base-em) * var(--ms5)); }
  h1 { font-size: calc(var(--base-em) * var(--ms6)); }
}
 
@media (min-width: 1360px) {
  h1 { font-size: calc(var(--base-em) * var(--ms7)); }
}

With these size adjustments in place, viewport width will determine how far up the scale your headings are allowed to climb:

(View the full CodePen to see how the text size responds.)

Broadening the usage of your scale

Limiting your scale’s influence to just specific elements would be highly illogical. You want flexible, abstracted styles to build complex interfaces with. Utility classes can provide that flexibility:

.u-textBigger { 
  font-size: calc(var(--base-em) * var(--ms1)); 
}
 
.u-textSmaller { 
  font-size: calc(var(--base-em) / var(--ms1)); 
}

With one ratio relating all the text sizes, anything affected by these classes will adhere to the steps of your scale. Even when combining or nesting the classes, the resulting text will remain in relative proportion:

<div class="u-textBigger">
  <h2>Now I'm as big as an H1</h2>
  <h3>Now I'm as big as an H2</h3>
  <p class="u-textSmaller">I haven't changed at all.</p>
</div>
 
<div class="u-textSmaller">
  <div class="u-textSmaller">
    <div class="u-textBigger">
      <span class="u-textBigger">Same as it ever was.</span>
    </div>
  </div>
</div>

TL;DR

  • Use a modular scale to define your typographic proportions.
  • Create a scale that is flexible enough to work on many screen sizes.
  • Use higher steps from your scale when more proportional contrast is needed.
  • Don’t limit the use of your scale to specific elements.

Further reading


Footnotes
  1. Using one base and one ratio isn’t the only way to arrive at a scale that works within small screen limitations. You can also create a multi-stranded scale by using multiple base or ratio values instead of just one. Here is an example using a secondary base value to shorten the distance between each step. See modularscale.com for a better explanation.
  2. The postcss-cssnext plugin can be used to transform the output of calc() and var().

Responsive Images 101, Part 9: Image Breakpoints

I’ve dreaded writing this installment of the Responsive Images 101 series. Selecting image breakpoints is something everyone will face, and frankly, I have no good answers for you.

But sooner or later, we will all face the image breakpoints koan. We might as well start now.

What are responsive image breakpoints?

In our responsive layouts, breakpoints refer to the viewport sizes at which we make changes to the layout or functionality of a page. These typically map to media queries.

Responsive image breakpoints are similar, but slightly different. When I think about image breakpoints, I’m trying to answer two questions:

  • How many image sources do I need to provide to cover the continuum of sizes that this image will be used for?
  • Where and when should the various image sources be used?

The answers to these questions lead to different breakpoints than the criteria we use to select breakpoints for our responsive layouts. For our layouts, we follow Stephen Hay’s advanced methodology: We resize the browser until the page looks bad and then BOOOOM, we need a breakpoint.

With the exception of art direction, the main reason why we need multiple image sources has nothing to do with where the images look bad. We want to provide multiple image sources because of performance concerns, different screen densities, etc.

So we can’t simply reuse our responsive layout breakpoints for our images. Or I guess we can, but if we do so, we’re not really addressing the fundamental reasons why we wanted responsive images in the first place.

Image breakpoints for art direction is relatively easy

In situations where the image falls under the art direction use case, the art direction itself will often tell us how many image sources we need and when they should be used.

If you think back to the Nokia browser site example, we can tell when the image switches from landscape to portrait mode. When that switch occurs, we know we’re going to need a new source image.

However, this may only be part of the picture. What if one of the art directed images covers a large range of sizes. We may find that we still need to have multiple sources that don’t map to the art direction switch.

You can see an example of this in the Shopify homepage that we looked at in Part 8.

Shopify home page animated

Despite the fact that the image only has one major art direction change—from the full image to the cropped one—Shopify still provided six image sources to account for file size and display density.

<picture>
  <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

So knowing that an image falls under the art direction use case can give us some clues, but it doesn’t answer all of our questions about the necessary image breakpoints.

What about resolution switching breakpoints

This is where things really get tricky. At least art direction provides us with some hints about how many image sources might be needed.

So long as we’re downscaling flexible images, they will always look good. We can’t rely on them looking bad to tell us when we need to change image sources.

Let’s take a look at a resolution switching example:

Photo of Michelle Obama at three sizes

In this example, we have a photo of Michelle Obama where the image in the page is 400 x 602 pixels for the current viewport size. The largest size that the image is ever displayed at is 2000 x 3010 pixels. That large file is 250K.

We can simply shrink that 2000-pixel image, and it will look good. But it would be unnecessarily large. It would be better if we provided a smaller version like the one 800 x 1204 resolution image that is shown in the example. That image is only 73K.

We can all agree that when the image in the page is only 400 x 602 pixels in size, that providing an image that is 800×1204 and 73K is better than having people download the largest version of the image.

But why stop at 800×1204?

Michelle Obama example with a fourth size at 600px wide

If we provided another image source that was 600×903 pixels wide, it would only be 42K. That saves us 31K (42%) from the 800×1204 image.

Well shoot. A savings of 42% is a big deal. Maybe we should keep going. 500 pixels wide? 450 pixels wide?

Photo of Michelle Obama with examples at 450 and 500 pixels wide

Each smaller image source offers the potential for substantial savings over the previous size. If we keep on this track, we eventually end up with an image source that is the exact size of the image in the page.

So here’s the question that has vexed me about image breakpoints. How do I know when an image source is too big for the size that the image is being used in the page?

The answer is that unless the image source matches exactly the size that the image is being displayed in the page, it is always going to be too big. There is always going to be an opportunity to optimize it further by providing a smaller image.

Why not provide the exact size of the image?

At this point, you may be wondering why we simply don’t provide the exact size of that the image is going to be used in the page.

First, the whole point of flexible images in responsive design is to provide images that scale as the size of the viewport changes. If we provided images that were exactly the size used in the page, we’d likely need to download new images whenever the viewport size changes or the device was rotated.

Second, it is unrealistic to provide images at any size imaginable. Yes, we can dynamically resize images, but when we resize images, the server needs to do that work which slows down delivery of that image to the browser.

For this reason, most larger sites cache images on content delivery networks (CDN). Caching every image size possible on the CDN would be incredibly expensive.

Finally, the browser doesn’t know the exact size of the image in the page when it starts downloading. That’s what got us to new responsive images standards in the first place!

Possible ways to pick image breakpoints

As I mentioned at the beginning, I have no rock solid solutions for how to pick the number of image sources that you need. Instead, I want to describe some different ways of looking at the problem that may help inform your decisions.

Winging it (aka, matching your layout breakpoints)

Someone on your team says, “Hey, how many source images do you think we need for these product photos?”

You ponder for a moment and say, “Hmm… how about three? Small, medium and large.”

Don’t be ashamed if you’ve done this. I’m pretty sure almost every person working on responsive images has done this at some point.

Perhaps your organization still thinks about mobile, tablet and desktop which makes small, medium and large make sense.

Or maybe you take a look at the range that the image will be displayed and make your best guess. Perhaps you simply look at the number of major layout breakpoints and decide to do the same for your image breakpoints.

I completely understand. And this is better than providing one huge image for all viewports.

But it sure would be nice to have more logic behind our decisions.

Testing representative images

If guessing doesn’t seem like a sound strategy, then let’s insert a little science into the art of picking image breakpoints. We can take a look at some representative images and figure out how many breakpoints they need.

The hardest part of doing this is determining representative images, or figuring out if you have any at all.

For some sites, all the photographs may have a particular style dictated by the brand. If that is the case, finding representative images is easy. Pick a few images and then resize them and save them at sizes ranging between the largest and the smallest images until you feel like you’ve got decent coverage.

Of course, if your site has a diversity of image styles, finding representative images can be nearly impossible.

Memory usage influencing the distribution of image breakpoints

Earlier this summer, Tim Kadlec gave a presentation on Mobile Image Processing. In that presentation, he took a look at the memory usage of flexible images in responsive designs.

What Tim showed is that as an image gets bigger, the impact of resizing an image gets larger.

Memory usage of two different images

In the example above, reducing a 600×600 pixel image by 50 pixels in each direction results in 230,000 wasted bytes versus the 70,000 wasted bytes caused by reducing a 200×200 image by 50 pixels in the exact same way.

Knowing this tells us a bit about how we should pick our breakpoints. Instead of spacing out breakpoints evenly, we should have more breakpoints as the image gets larger.

graph showing more breakpoints at large sizes

Unfortunately, while this tells us that we should have more breakpoints at larger sizes, it doesn’t tell us where those breakpoints should be.

Setting image breakpoints based on a performance budget

What if we applied the idea of a performance budget to responsive images? What would that look like?

We’d start by defining a budget for the amount of wasted bytes that the browser would be allowed to download above what is needed to fit the size of the image in the page.

So say that we decided that we had a performance budget of 20K for each responsive image. That would mean that we would need to make sure that the various sources that we’ve defined for the image are never more than 20K apart.

When we do this, we find that the number of image breakpoints change wildly based on the visual diversity of the image and the compression being used.

Let’s take a look at three sample images.

Time Square — 8 Image Breakpoints

Times Square

This image has a lot of visual diversity. The variations in colors and textures means that JPEG’s lossy compression cannot do as much without damaging the image quality.

Because of this, there are eight image breakpoints—set at 20k intervals—between the smallest size of the image (320×213) and the largest size of the image (990×660).

Breakpoint # Width Height File Size
1 320 213 25K
2 453 302 44K
3 579 386 65K
4 687 458 85K
5 786 524 104K
6 885 590 124K
7 975 650 142K
8 990 660 151K

Morning in Kettering — 3 Image Breakpoints

Morning in Kettering

Unlike the Times Square image, this image has a lot of areas with very similar colors and little variation. Because of this, JPEG can compress the image better.

On an image that can be compressed better, our 20K budget goes farther. For this image, we only need three image breakpoints to cover the full range of sizes that the image will be used at.

Breakpoint # Width Height File Size
1 320 213 9.0K
2 731 487 29K
3 990 660 40K

Microsoft Logo — 1 Image Breakpoint

Microsoft Logo

This is a simple PNG8 file. At its largest size (990×660), it is only 13K. Because of this, it fits into our 20K budget without any modifications.

Breakpoint # Width Height File Size
1 990 660 13K

Take a look at the other images on a sample page we created. See how the number of breakpoints vary even through all the images start with the same resolution end points.

Now, I’m not suggesting that you manually decide on image breakpoints for every single image. But I can envision a future where you might be able to declare to your server that you have a performance budget of 20K for responsive images and then have the server calculate the number of image sources on a per image basis.

I’ve written in more detail about performance budgets for responsive images in the past. If you end up implementing this approach, please let me know.

Setting image breakpoints based on most frequent requests

At a recent Responsive Images Community Group (RICG) meeting, Yoav Weiss and Ilya Grigorik discussed a different way of picking image breakpoints based on the most frequently requested image sizes.

For both Yoav, who works at Akamai, and Ilya, who works at Google, one of the problems they see with multiple image sources is storing all of those sources on edge servers where storage is usually more limited and costs are higher.

Not only do companies like Akamai and Google want to reduce the number of images stored at the edge, but the whole purpose of their content delivery networks is to reduce the amount of time it takes for people to render a web page.

Therefore, if they can cache the most commonly requested image sizes at the edge, they will deliver the fastest experience for the majority of their users.

For these organizations, they can tie their image processing and breakpoints logic to their analytics and change the size of the images over time if they find that new image sizes are getting requested more frequently.

When combined with the new HTTP Client Hints feature that Ilya has championed, servers could get incredibly smart about how to store images in their CDNs and do so in a way that requires little to no decision-making by designers and developers.

Humans shouldn’t be doing this

I believe that in a few years time, no one will be talking about how to pick responsive image breakpoints because no one will be doing it manually.

Sure, we may still make decisions for images that fall into the art direction use case, but even then, we’re probably not going to make finite decisions about every image source. We’ll handle the places that require our intervention and let our image processing services handle the rest.

There is a ton of benefit to either picking image sources based on a performance budget or based on the frequency with which different sizes of the image are requested. But either of these solutions are untenable as part of a manual workflow.

In the future, our typical workflow will be that we upload the highest quality image source into our content management system or image processing system and never have to think about it again.

Part 10 of a 9-part series

This started as a 9-part series, but there is always more to discuss when it comes to responsive images. Read for the conclusion of this series where I’ll provide some essential resources and talk about what the future holds for responsive images.


Responsive Images 101 Series
  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints
  10. Conclusion