Ethan Marcotte was the final presenter on the first day of the conference, and his presentation was about the steps beyond responsive design. It covers his exploration into using patterns to drive design decisions, what the benefits of patterns and pattern libraries are, and how best to use them.
An Event Apart 2017 Design Beyond Our Devices by Ethan Marcotte (pdf)
In 2010 @beep introduced us to @RWD on this stage at this conference :) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Visualization of 2 centuries of ocean journeys #aeasea pic.twitter.com/Nu2kkKUHVg
— Anne Gibson (@perpendicularme) April 3, 2017
Where are we going?
Understandable if we’re afraid, mobile exploded & took us off guard #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Nobody can effectively point to where we’re going #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
One recent change we’ve done has been from page to patterns. Modular design principles #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
This is a huge shift from how we used to think about web design. Grid-first design #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Now our work begins a level below the page, below the grid #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Trade the control in photoshop for a new kind of control: flexible grids flexible images media queries to build a network of content #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
The patterns in our designs may have little responsive designs in themselves, to stitch together to build pages #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Pattern-driven design is the biggest change in @beep’s work, even bigger than @RWD #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
"I thought I'd redesign some patterns…but patterns redesigned me." #aeasea pic.twitter.com/H4GySmLijO
— Kelly (@livinmymesslife) April 3, 2017
The Toast – https://t.co/bl9RVvHd3w – relies on a small collection of patterns for thousands of chunks of content #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“The teaser” – in its simplest is a headline with a link. often has an image. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“I design patterns (small responsive designs themselves) that ultimately stitch together to create pages.” @beep #aeasea
— zeldman (@zeldman) April 3, 2017
From a structural standpoint all of these pieces are identical and have pieces added on depending on the design #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
If we translated a design directly based onto its display, we might put code in order of display #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“What if someone doesn’t browse the web like I do?“ This question checks default assumptions & biases #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
My view of encountering the web isn’t representative of everyone’s view of the web #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Excellent reminder from @beep to focus on priority before you focus on layout #aeasea pic.twitter.com/whePL8o36n
— A Brave New (@abravenew) April 3, 2017
If the most important piece is the headline, lead with that. If the comment count is least important end with it #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Once the markup structure is in place, mirror it in the HTML, then use CSS to visually rearrange with flexbox #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
If a browser understands flexbox, move the comments to another location #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Build a baseline structure and layout, conditionally enhance it to the final refined design #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
If the test relies on javascript, it’s a bit fragile to use as a test. Feature queries @supports rules help us test w/o javascript #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“Support” doesn’t mean “getting the same experience”. (https://t.co/qYLHaYIQK4) #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Lead story, image, footer of related content. #AEASEA Visual design & Guardian html are in a different order using flexbox #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Guardian uses flex-direction row-reverse to put the image to the right of the content #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
If Guardian user doesn’t pass Javascript test, they still get a baseline foundational layout w/access for everyone #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
A well-crafted responsive design has to be device-agnostic by default. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Trent Walton talks about how we have to be prepared for infinite and changing design #AEASEA pic.twitter.com/hFO7ZTKtkk
— Anne Gibson (@perpendicularme) April 3, 2017
Non-ideal net and browsing experiences: we need to talk about them! #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
3 most common words on a responsive design project are mobile, tablet, and desktop… which are useless #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Everyone has a slightly different definition of “mobile”. But specific design conditions we should talk about #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Input method, screen size, network speed, network conditions… these are conditions and features, not devices. Talk about them. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
“Mobile” might mean small screen, but doesn’t mean “slow” or “unreliable” necessarily. Desktops aren’t necessarily fast. #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Commuters using 3G on the train may have a wide screen but slow and spotty connection #AEASEA
— Anne Gibson (@perpendicularme) April 3, 2017
Ensure something usable is there for everyone – a single-column mobile-friendly layout. Design for the non-ideal #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
input? it’s complicated.#aeasea pic.twitter.com/fcT8Q3Z6KL
— Luke Wroblewski (@LukeW) April 4, 2017
Text-heavy websites might be the easiest, but this works for transactional interfaces #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A not-totally-ideal baseline experience will still give access that can be improved #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Device-agnostic design patterns should be as responsive *and* as resilient as possible #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The dirty little secret about responsive design is that it’s not the hard part anymore. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The biggest challenge that we face is documenting and communicating how, why, and when we do what we do for responsive design #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Starbucks launched a responsive redesign *and* publicly launched their style guide #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Ushahidi provides a pattern library online used globally #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A style guide or pattern library has become the de facto artifact to come out of a responsive redesign #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Benefits
Central shared repository of front-end patterns and code
Bridges “the collaboration gap” between design & dev#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Helps onboarding new team members with the design language
Helps facilitate in-browser design, review, and testing#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
How to build a style guide
Create a visual inventory
Pattern naming and organizing
Translating inventory into html and CSS #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
1. Visual inventory. Either when start or near end, find all the unique patterns that are in the site. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Translate that inventory into HTML and CSS #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Automate as much as you can #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Styleguide by Devbridge rely on comments in the code to identify patterns #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Fractal – by Clearleft – component-first design process. Geared toward integrating style guides into sites & products #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Airbnb “airshots” lets them work in-house to automate style guides #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A List Apart has a great article: https://t.co/1DYtJz8K1f #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Clear and sensible naming. Modularity requires significant effort and commitment. Start with language, not interfaces #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Alla’s referenced article: https://t.co/v4yudNDzpm #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Polynesian tradition for navigation uses a star compass. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The center of the compass is the boat, and the edges are the stars. The chant was how they learned #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Shared and common language in a chant, but it’s the most consistent method to learn possible. #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Internalizing the sky lets them make decisions when they’re not staring at the star compass #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Challenges: when to reuse, how to make patterns distinct, how to avoid duplication… naming & language #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
(Yes this means you need to information architect your style guides just like you information architect the output of them) #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Cobbler’s kids have no shoes, and style guides often get neglected information architecture.
Atomic Design by Brad Frost is a great metaphor for style guides. Atoms to molecules to organisms #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
When we put it into practice, the atomic design language can make things muddy #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
https://twitter.com/caughtexception/status/849053234480070656
Is a search box that expands an atom? No… but it’s not a full page layout. Is it a molecule or an organism? #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
This isn’t a life-threatening issue whether a complex component is a molecule or an organism. But it’s a problem #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A group glossary for a project may be an answer #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The naming of components can interfere with the team’s ability to use it. Success or failure hinges on the words used #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Before you commit to any metaphor ensure everyone is using it the same way – clarity and agreement #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
"A style guide's success or failure hinges on the words we use to talk about it." Love this! @beep #AEASEA
— Kelly (@livinmymesslife) April 4, 2017
It is great to use language and meaningful to your organization and the users of the pattern library #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
An effective name determines how it will be used and ensures it’s used consistently #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Charlotte Jackson’s article https://t.co/fLdmiTguW1 will help empower the team to name patterns #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A collaborative review can identify conflicts and potential replacements. Are two patterns the same thing? Should they be merged? #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
A good styleguide focuses on the content and functionality the patterns support #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
From content model to design pattern – each type of article, what was required to present it #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
When it came time to name and structure the patterns, it used the content model language, which the client knew #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Ultimate goal: integrate the design language into the company culture.#AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
From pages to patterns to principles; principles help us design things we haven’t even invented yet #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
How Vox judges a pattern #aeasea pic.twitter.com/SJUPnm84es
— Anne Gibson (@perpendicularme) April 4, 2017
Design principles push to a design system, which gives us a compass for navigating wherever we’re going next #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
“The web doesn’t evolve in a straight line. We can’t assume it will be viewed on better & better devices by people like us.” @beep #AEASEA
— zeldman (@zeldman) April 4, 2017
Our industry’s definition of “smartphones” is way too narrow. Look at how Syrian refugees use phones #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Cheaper low-powered devices are going to be coming on line for the “next billion” users #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Create well-formed design principles and device-agnostic site so everything we have is accessible to as many as possible #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Sketch notes by Krystal Higgins