An Event Apart: “Design Beyond Our Devices”

Ethan Marcotte speaking at An Event Apart Orlando 2016 at Disney’s Contemporary Resort in Walt Disney World on October 5, 2016.

In this age of device diversity, we’ve been focusing less on pages, and more on patterns: reusable bits of design and content we stitch together into responsive design systems. But those patterns bring puzzles: how should they adapt, and why? And how do we, well, design with them? Let’s look at a few answers to those questions, and start moving our design practices beyond the screens in front of us.

Notes

  • Where are we going?
    • Don’t know
  • Moving from pages to patterns
  • “I traded the control I had in Photoshop for a new kind of control—using flexible grids, flexible images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message.” — Trent Walton, “Redefined”
    • a network of content — rearranged at any screen size — convey a message
  • I thought I’d redesign some patterns… but patterns redesigned me
  • Our design process begins at a level below the page
  • “In the olden days, 6 months ago…”
  • Example: The Toast redesign — “the teaser”
    • Started by putting markup in display order
      • <div class="teaser"><p class="article-byline">By <a href="#">Laura...</p><a class="comment-count" href="#">126 ...</a><h1 class="article-title">...</h1><p class="teaser-excerpt">Lorem ipsum...</p></div>
    • “What if someone doesn’t browse the web like I do?”
      • The article title is the third item in the teaser (for screen readers)
      • Author name and comments have lower priority than the title, but they are placed above the title in the markup
  • Design the priority, not the layout
    • Design the priority independent of the layout
  • Use things like flexbox to rearrange content for display
    • .teaser-hed { display: flex; flex-direction: column-reverse; }
    • .teaser-hed { display: flex; flex-direction: column; } .teaser .article-title { order: 2; } .teaser .article-byline { order: 1; }
    • Use JavaScript to check for flexbox support
  • The @supports directive
    • @supports ( display: flex ) { }
  • “Support” doesn’t mean “getting the same experience.”
  • A well-crafted responsive design is device-agnostic
  • “Device-Agnostic” by Trent Walton
    • “There’s more to devices than the size of their screens. A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed.”
    • “Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability.”
  • 60% of the world’s mobile connections at sub-3G — Ericsson Mobility Report, June 2015
  • “We don’t disable JavaScript just to test how a site works with JavaScript disabled. We do it to test how a site works in non-ideal net / browsing conditions.” — Scott Jehl
  • The web is the first fully flexible design medium
  • 3 most common words when talking about responsive web design are “mobile”, “tablet”, and “desktop”
    • The are also the 3 least helpful words when talking about RWD
  • Emphasize conditions and features, not devices
    • Input method: touch, keyboard/mouse, hybrid, speech, joystick/analog
    • Screen size: small, mid-range, wide
    • Network speed: slow (EDGE/GPRS), medium (3G), fast
    • Network condition: spotty/high latency, reliable/stable, primarily offline
  • Design for the non-ideal
    • If we design for the non-ideal, we will be in a much better position to succeed in the future
  • Device-agnostic design patterns should be as responsive and as resilient as possible
  • Building a responsive layout isn’t the hard part — The hard part is documenting and communicating how, why, and when our responsive designs adapt
  • The rise of the style guide/pattern library
    • No consensus on the term to use
  • Benefits of a style guide
    • Creates a central, shared repository for front-end patterns and code
    • Helps bridge “the collaboration gap”
    • Helps with onboarding new team members
    • Facilitates in-browser design, review, and testing of your responsive patterns
  • Creating your style guide
    1. The visual inventory
      • Browse through the site and take note of every unique pattern
      • Note what you find in photoshop, keynote, etc.
    2. Pattern naming and organizing
      • Make sure patterns are findable by anyone in the organization
    3. Translating the inventory into HTML and CSS
  • Style guide automation
  • The most important part of creating a style guid is step 2 — Organizing and making patterns findable by everyone on your team
  • “The Way We Build: How rethinking the Airbnb app changed the way we approach design”
  • “Style Guide Generator Roundup”
  • “Modularity might appear to be a simple concept at first, but making it work for your team demands significant effort and commitment. Language is fundamental to collaboration… In short, we should start with language, not interfaces.” — Alla Kholmatova, “The Language of Modular Design”
  • Honoring Our Ancestors | Mau Piailug
  • Pattern design challenges
    • When to reuse an existing pattern and when to design a new one,
    • How to make patterns distinct enough,
    • How to avoid duplications with the patterns other designers and teams create,
    • …and so on.
  • Naming and language create a shared understanding around our design patterns… which creates a more consistent design
    • “Atomic Design” by Brad Frost
    • “We actually ended up making a group glossary for our project. ‘This is the definition for an atom, this is the definition for a molecule,’ so we all knew how to think about those things.” — Dan Mall, RWD podcast: “Radio Free Europe/Radio Liberty”
    • “…the team struggled to map components to an atomic classification, which made collaboration within the project difficult. We’d pause to re-calculate proper classification before talking about a component.” — Trent Walton, “Atomic Classification”
    • “[The team] totally bought into the core concepts of Atomic Design but when it came down to what each of those components were called, it didn’t make sense to them… It was too hard to relate these different terms to the overall big picture.” — Jono Herrington, “How We Adapted Atomic Design”
  • A style guide’s success or failure often hinges on the words we use to talk about it
    • A good style guide uses language and metaphors that are meaningful to your organization—To the people responsible for maintaining it
  • “The Language of Modular Design” by Alla Kholmatova
    • “In the process of naming an element, you work out the function as a group and reach an agreement. It’s not so much about giving something a great name (although, of course, that’s an ideal to aspire to), but agreeing on the name.”
    • “[An effective name] determines how the element will be used and helps to ensure that it’s used consistently by everyone.”
  • As a group, review each module in your design system — Name things collaboratively, based on their high-level function
  • “From Pages to Patterns: An Exercise for Everyone” by Charlotte Jackson
  • A good style guide focuses on the content and functionality the patterns support
  • The goal is to integrate your design language into your company culture
    1. Helps define CSS architecture at the design stage
    2. Involves more users in the design process
    3. Enables the entire team to maintain modularity
    4. Helps your team articulate design principles
      • Might be the most important benefit to come out of this process
  • From pages to patterns to principles
  • Share patterns across brands
    • Vox — Vox Product’s pattern design principles
      • Uniqueness
      • Reusability
      • Clarity
      • Responsiveness
      • Accessibility
    • Airbnb — “The Way We Build: How rethinking the Airbnb app changed the way we approach design” by Alex Schleifer
      • “Our core design principles: unified, universal, iconic, and conversational”
      • “Universal and Unified define the system’s approach we apply when defining patterns. Is it part of a greater whole? Does it work across devices? Iconic and Conversational help define the character of the system — its unique human qualities that tie back to our community and brand values.”
  • Combine design patterns with design principles to create a design system — Design principles are a compass to guide your responsive design
  • The web doesn’t evolve in a single, straight line
    • We can’t always count on devices
  • Mobile growth is not coming at the expense of the desktop
  • “There is a failure of global imagination in the rich world, an inability to understand the nuances of life lived by people with limited means. Some of the ‘next billion’ to come online are taking boats across the Mediterranean, the South China Sea, elsewhere. They will have smartphones.” — An Xiao Mina, @anxiaostudio
    • The “next billion” will have smartphones — Let’s design for them

Related Links