Ethan Marcotte: Lazyness in the time of responsive design

Ethan Marcotte (@beep) was speaking about lazyness at Responsive Day Out, these are my notes from his talk.

A story about a tree. It's in the pando forrest in Utah, 44 hectares. Pando is one tree - 40,000 stems from one massive root stock. It's the largest, heaviest and oldest organism on the planet.

In the web we now see the wood for the trees. We've moved beyond the page into the components. We're trading the control of photoshop for a new kind of control - a network of content rearranged to fit on any screen size. We start from the smallest components and build up from there. Content driven design. It's not just aesthetics.

We have a tough job - not the toughest. We're dealing with an enormous range of devices. Terms like tablet mobile and desktop are anti-patterns. It's a continuum. We have limited control over how our content is accessed.

The web is a volatile medium.

Laziness

Laziness is bad, it doesn't have positive connotations. Maybe it could be a good thing, especially if applied intelligently.

Anxiety doesn't come from thinking about the future but from wanting to control it.

Maybe laziness can be a virtue. Maybe it's about letting go (a little bit).

Layout

Videos and Grids.

img { max-width: 100%; }

Embedded objects don't have intrinsic dimensions so width and height have to be specified. We can use a bit of JS to do this to make it respond to the size but debouncing means that it can appear jerky.

Apply a padding-top in % that matches the aspect ratio. If we remove the video we can see that the box resizes to match the aspect ratio. We can then position the video absolutely top left and 100% high and wide and it will resize smoothly. Less code, more lazy.

What ever screen you have available is the best screen.

Fluid grid: target / context = result. Can use :nth-child() to address different cells in the grid, with n as a counter it will work across all elements. Older browsers [cough]IE[cough] will get a fallback that isn't as visually rigerous. By changing the value of :nth-child() in media queries we can adapt to different numbers of columns.

Frameworks

Incredibly valuable, especially for beginners and for getting things up and running fast. They're heavy, though - prescriptive and rigid.

We're still figuring out what we can do, not so much how we do it.

12 principles of animation - available on vimeo as an animation. Framework to define conversations to see if work matched expectations.

Frameworks should define philosophy. The web is not the first medium that has faced these challenges. Frameworks support future design systems, not necessarily exposed to the client. Inspiration not limitations. Design systems to solve problems.

Network of small layout systems. More or less independent. Adaption is driven by the needs of the content, not based on screen size. They defend the integrity of the content.

Navigation

Present the minimal required information, make the rest available easily.

The "hamburger". Just because it's ubiquitous doesn't mean it's the best solution. Our industry has a hamburger problem. Time.com has three levels of helper text - suggests that users didn't get it. Disney.com has every link ever on the internet in their menu. The ability to hide navigation has meant we shove everything including Jimmy Hopper's body in there. Don't avoid the hard stuff. Use the mobile screen to lighten the load for everyone. You don't need to use the same pattern everywhere. We should look for opportunities. Just because we have nav doesn't mean that we have to add a level of complexity.

Where do we start building complex interactions? Design the transaction not the interface. Iterate through versions of the transactions that work at each stage of cutting the mustard. Use JS to add classes to signify state and use CSS to handle the appearance.

Spending time to think about device agnostic is lazy. Progressive enhancement has been at the heart of every good responsive design. If it's device agnostic and progressively enhanced then it's robust and will work in any device. (For varying values of work.) Allows you to let go.

Responsive design and progressive enhancement is the laziest way to build for the modern web.

Approach the world with questions, not answers - the beginner's mind.