Responsive Principles

Responsive web design has engendered a wider conversation about how we build products that accommodate an increasing breadth of connected devices. This talk will suggest a framework within which we can model this continuing discussion, and outline the principles needed for our work to better respond to a rapidly changing world.

A PDF with presenter notes is also available.

The Web’s Grain

Great piece by Frank Chimero. Starts with that nostalgic nineties feel and finds it way to photography, responsive design, and the fact that some websites try to blow you away with their design/technological advancements.

“Listen bub,” I say, “it is very impressive that you can teach a bear to ride a bicycle, and it is fascinating and novel. But perhaps it’s cruel? Because that’s not what bears are supposed to do. And look, pal, that bear will never actually be good at riding a bicycle.”

This is how I feel about so many of the fancy websites I see. “It is fascinating that you can do that, but it’s really not what a website is supposed to do.”

Reminds me of this quote (supposedly) from Jurassic Park:

Just because we can doesn’t mean we should.

Another interesting thing: On breakpoints he has to say this:

So, those media queries we write? It might be time to stop calling them breakpoints, and instead consider them points of reassembly.

Tomatoh, Potatoh … or is there more to it?

The Web’s Grain →

Intro to @viewport & other new Responsive Web Design CSS features

Good introduction if you haven’t read about them yet. Video also available.

Responsive Images in Practice

<img 
    srcset="quilt_3/large.jpg  1240w, 
            quilt_3/medium.jpg  620w,
            quilt_3/small.jpg   310w"
    sizes="(min-width: 41.25em) 38.75em,
           calc(100vw - 2.5em)"
    src="quilt_3/medium.jpg"
    alt="A crazy quilt whose irregular fabric scraps are fit into a lattice of diamonds." />

Let’s take an existing web page and make its images responsive. We’ll do so in three passes, applying each piece of the new markup in turn:

  1. We’ll ensure that our images scale efficiently with srcset and sizes.
  2. We’ll art direct our images with picture and source media.
  3. We’ll supply an alternate image format using picture and source type.

In the process we’ll see firsthand the dramatic performance gains that the new features enable.

A List Apart: Responsive Images in Practice →

9 basic principles of responsive web design

Responsive-vs-Adaptive

Let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts

Great and easy to understand gifs explaining a few concepts – I prefer this word over principles – of responsive web design.

9 basic principles of responsive web design →

Building a Device Lab

Collection of slidedecks to building your own device lab (only the first one in the series embedded, click through below to see all others):

We cover how to build a device lab as a product for your coworkers to test their work on a spectrum of operating systems and versions. We also cover how to choose devices, organization and cabling, power supply troubleshooting, and tips for getting your users to use the lab considerately.

Videos also available

Building a Device Lab →

Chartist – Simple responsive charts

chartist

/* Add a basic data series with six labels and values */
var data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  series: [{
      data: [1, 2, 3, 5, 8, 13]
  }]
};

/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
  axisX: {
    labelInterpolationFnc: function(value) {
      return 'Calendar Week ' + value;
    }
  }
};

/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */
var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

/* Initialize the chart with the above settings */
Chartist.Line('#my-chart', data, options, responsiveOptions);

Chartist – Simple responsive charts →

Google Chrome DevTools Device Mode

chrome-devtools-devicemode2

Click the icon marked with the pink-ish circle to open Device Mode. Click the icon marked with the red circle to activate the Media Query Inspector. One can quickly choose a device and also throttle the network using the blue and orange dropdowns at the top.

You might have to enable Devtools Experiments in Canary via chrome://flags/#enable-devtools-experiments to see all this.

Google Chrome: Device Mode & Mobile Emulation →

The container model and blended content

sketch

One of the key differences between our new beta site and the current Guardian site is the way we approach content curation and presentation.

From the outset we knew we wanted to create a modular system. However we were wrestling with how we could maintain a consistent hierarchy of stories across desktop, tablet and mobile whilst still allowing a rhythm and pace as you move through the site, something we felt was lacking in other responsive sites. Initially just a rough sketch on a whiteboard our definition of a container became the following:

  • A container is a full width horizontal element which contains a collection of content.
  • Pages hold a series of containers which are stacked on top of each other, the most important at the top and the least important at the bottom.
  • Containers are self sufficient -and as a result can easily appear in multiple locations in a variety of combinations.
  • As the screen size gets smaller or larger, the content inside adjusts to the width of the screen.

I was fortunate to see Oliver Reichenstein (from iA) talk about this at the recent Responsive Day Out 2.

The container model and blended content – a new approach to how we present content on the Guardian →
The Guardian Beta →