An Event Apart: Design Beyond Our Devices

by April 3, 2017

At An Event Apart in Seattle WA, Ethan Marcotte discussed how responsive design is evolving into pattern-based device-agnostic systems of resilient design. Here's my notes from his talk: Design Beyond Our Devices

  • Human history is founded on exploration. We're always craving movement and direction. In the last few years, discussions about Web design have been focused on "where are we going?"
  • Moving from pages to patterns: this is a huge shift from creating grids that get filled with stuff. Our previous "canvas in" approach is no longer sustainable given the quantity and variety of devices we have to design and develop for.
  • Pages are tightly bound entities of the past. Instead of pages, design networks of content that are composed of patterns. These patterns, which are small responsive patterns themselves, can be stitched together to create composite experiences like pages.
  • "What if someone doesn't browse the Web like I do?" Ask this question when designing to move beyond fixed layout styles.
  • Now more than ever, designers need to start with the priority of information rather than the layout. This allows us to accomodate various formats/forms of display/presentation.
  • A content priority can be mirrored in markup. This allows both content and markup to be presented uniquely and appropriately on different devices. The priority & markup doesn't change but the presentation does.
  • Feature queries can be used to ask browsers if they support specific style rules but "support" doesn't actually mean everyone gets the exact same experience. A baseline experience provides access to all, start there.
  • A well-crafted responsive design is device-agnostic. This helps us manage hostile browsers, tiny screens, slow networks, and many forms of input. The Web has inherent variability we need to embrace.
  • 60% of the World's networks are sub 3G. These non-ideal conditions provide a great benchmark: will your site work in these situations?
  • Emphasize conditions and features, not devices. What input methods does it support, what screen sizes, networks speeds and conditions are we designing for?
  • Device-agnostic makes our patterns better prepared for the Web. This applies to not just our pages but all our atomic patterns as well. These need to be not only responsive but resilient as well.
  • Building a responsive design isn't the hard part, the hard part is documenting how/when our styles need to adapt/change.
  • Style guides have been rising in importance alongside responsive designs. These are becoming the de-facto artifacts that come out of responsive redesigns. They not only provide a shared repository of code and styles but also help bring developers and designers together through shared solutions and language.
  • Creating a style guide. Step 1: create a visual inventory. Step 2: name and organize what you've found, group them into clear groups. Step 3: translate that inventory into HTML and CSS; Airshots and Fractal are great examples of style guide generator tools.
  • The most important part of this process is the one we talk the least about: naming & organizing patterns. Modularity requires significant effort and commitment. Start with language, not interfaces.
  • Naming and language create a shared understanding around your patterns -which, in turn, creates more consistent design.
  • A style guide's success or failure often hinges on the words we use to talk about it. You need alignment on language systems that are meaningful to your organization and to the people who need to support them.
  • A good style guide focuses on the content and functionality that each component supports. The goal is to integrate your design language in how your organization communicates.
  • Design patterns and principles together provide a compass to help guide where we're going. No one can answer where we're going. 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. We need to embrace that uncertainty and build resilient, device-agnostic experiences.