Planning Adaptive Interfaces: The Workshop

For the last few years I’ve been running a workshop alternately titled “Planning Adaptive Interfaces” or “Beyond Responsive”, depending on the conference. It’s been one of my favorite workshops to run for a number of reasons, but before I get into that, let me explain what it is and how it works.

I think we all recognize how much Ethan’s seminal article “Responsive Web Design” (and his follow-up book) shook up our industry. It changed the way we look at visual design and kindled (or in some cases re-kindled) an interest in catering an experience to mobile devices. But simply incorporating responsive design’s three core strategies—fluid grids, flexible media, media queries—is not the goal; meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning.

We need to embrace the heterogenous nature of the Web—myriad connected devices with vastly different screen sizes (if they even have screens), network connectivity, and capabilities in use by countless individuals, each with their own special needs—and craft experiences that will work anywhere at any time. We need to build robust systems that adapt in ways far beyond aesthetics. I designed this workshop to explore the rich variety of use cases that often get overlooked in the course of building web projects and to show how we can begin considering them as early as possible.

When I was starting out, I gave “workshops” that basically amounted to a half-day or (worse) a full day for folks to listen to me blather on about one topic or another. People liked them, but I wouldn’t call them fun. And, in hindsight, I question how much value people got from an extended survey of what’s possible without the opportunity to put that knowledge to use. Workshops should encourage attendees to get their hand dirty.

I kick this workshop off with a relatively brief discussion of the considerations that we should be aware of—beyond screen size and pixel density. I also provide examples of how to adapt interfaces so they rise to meet our customers’ needs. Then I throw out a list of common interface patterns—modals, tabs, etc.—and turn the floor over to the attendees, asking them to build small teams that each examine a single pattern in detail with these considerations in mind. They then spend the rest of the workshop planning out how that interface would adapt to consider factors like accessibility, screen dimensions, device capabilities, JavaScript availability, and so on. All the while, I circulate among the groups, asking and answering questions, pressing them to go a little further with each iteration. Some teams sketch, some prototype, and all spend a lot of time debating, which is awesome!

I leave the last hour or so for a group discussion of what each team’s accomplished. It gives them a chance to talk through their approach, what they learned, what their pain points were, and how they overcame them. Not does it celebrate their work, but it helps the other attendees discover novel ways to approach these common UI constructs.

It’s been a blast and I have learned so much from the teams I’ve coached. Each workshop is completely different because each group of attendees is completely different. I’ve run it with groups ranging from 12 to 120, for internal teams at large companies to mixed audiences from all over the world. Everyone who has attended one of these workshops has brought a unique perspective and helped us all get better at our jobs. That’s been one of the best parts of this experience for me.

If a workshop like this sounds up your alley, I’ll be giving it a few more times in 2016. Your next opportunity will be at EnhanceConf in London in early March. Later in the year, I’ll be giving it as part of Sparkbox’s Build Right: Maker Series. I’d love the opportunity to work with you if you can make it!