BT Conference – Ethan Marcotte Laziness in the time of Responsive Design
In his talk at 2014 Beyond Tellerand Conference Ethan Marcotte talks about a lazy approach to building the web. Ethan encourages us to stop focussing on a single page and look at the greater picture, looks at simple layout methods (lazy) to design our content with, and finally how animations can help bring all these things together (but in a layered progressive way).
Pando forest, Pando tree. One tree that spans 43 hectares. It’s the lodes and heaviest organism on Earth.
Stopped thinking about a single page, started thinking of it sa a web presence.
Trade the control you have in photoshop for a greater control, the control over a network of pieces that you can layout on any device.
It’s hard though. We have tough job. We design for multiple OS, devices, inputs types.
60% of the worlds mobile connections are sub 3g connectivity.
Ethan describes himself as Lazy. But laziness is Bad. It’s s roadblock to getting things done. But what if it could be a help, not a hinderance.
“Anxiety does not come from thinking about the future but from wanting to control it.”
Layout
- Video and Grids.
- Embeded media doesn’t have intrinsic dimensions in the same way that images do.
- Javascript can help this. Thierry Koblentz wrote about this in 2009 (a list apart).
- By adding Padding to of 56.25% (width/height).
- Now go back to set 100/100 on width and height for the video. This will keep the container in aspect ratio. A little less code, a bit lazier approach. Future proof.
- target/context = result. This is awesome but needs some cleaning up. That’s where nth-child comes in handy. :nth-child(2n) picks ever second cell.
- nth-child(3n+1) { clear:left;} will allow you to clear the floats from the element before.
- Always start with a linear approach. 32em two column, 44em 3 solemn, so on and so forth.
Frameworks
- Wonderful resource. Pattherns that can build layouts and show clients things quickly. – A great starting point for getting up to speed with things.
- Animators until Disney were finding their art form. They were laying the foundations and frameworks so how things would be greater in the future.
- “Animation had been done before, but stories were never told.”
- squash and stretch
- anticipation
- staging
- The twelve basic principals of animation. A philosophy of what defined quality animation. “Does the character have squash and stretch, have we applied an anticipation”.
- This is the framework we need for the web.
- The Whitney responsive W isn’t a set of examples of the logo, but a structure on how it should be constructed based on the available space.
- There is always a group of solutions….
- Use media queries to defend your content. This is an approach to base your query based on the best layout possible for the content you are trying to display.
- The common pattern is the hamburger icon. Three bar element ☰
- Hamburger is a pattern, but is it the best solution?
- The is actually the Chinese trigram for “Sky”.
- Frank Chimero uses column could and flex box to layout his masthead and it’s a wonderful approach.
- Design for the transaction, not the animation.
- Example of commerce.
- Start with Radio buttons. Choose one and say okay. Next, add .enhanced to the app if the browser has the capabilities.
- If the interface has animation then move the okay cancel buttons over the top of the layout and hide them 0 0.
- websites should be built to face the reality of the web’s inherent variability.
- BBC have a basic design served up to everyone. Then, cutting the mustard, you get more enhancements to improve the interactions.
- Design experience tiers, not for specific devices.
- Patterns & Frameworks can help.
- In the beginner’s mind there are many possibilities, in the expert’s mind there are few.
