Notes from #responsiveconf – Ethan Marcotte
Published onLaziness 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.
Layout
Video
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”.
Grids
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!
Frameworks
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.
Animation
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.