Matt Radford

Messing with links since <blink>

Notes from #responsiveconf – Ethan Marcotte

Published on 

Laziness in the Time of Responsive Design

“A network of control rearranged at any screen size to best convey a message” (Trent Walton)

Mobile, tablet and desktops are one continuum of the web.
We have different device classes and OS.

“Tablet” and “mobile” are anti-patterns: too broad to define.

60% of mobile access is sub-3G.

“Anxiety does not come from thinking about the future, but from wanting to control it” (Khalil Gibran).

Embrace laziness.



Size at smallest viewport. Add a surrounding div with padding-top set at the aspect ratio. Then absolutely position the video in the container.

“A little less code, a little bit lazier”.


Target / content = result.

Use .doc-cell:nth-child(3n) and .doc-cell:nth-child(3n+1) { clear: left; }.

Matt: Crap. I only just recognised where ClearLeft got their name!


Good for prototyping.
Philosophically heavy.

Content-out layout.
Small layout systems, such as navigation.
Media queries based on the small systems.

Hamburger problem.

Are off-canvas menus hiding all the things we didn’t want to deal with?

Filament shows a menu expanded on the home page, but toggled on interior pages.

Frank Chimero. Using Flexbox to changes columns of the simple menu.

Conservation of Effort.


Design the transaction not the interface.
Animations for state change. Hiding using transform: scale(0).

“Websites should be built to face the reality of the web’s inherent variabilty” (Trent Walton).
Device-Agnostic article.

Progressive enhancement = letting go of designing for specific devices.

The web is any size, any time.

Beginner’s mind.