Headshot of Brad

Using Atomic Design to Create Responsive Interfaces

Screenshot of workshop trailer Watch Brad's Workshop Trailer

Brad Frost

Only seats left.

Establish a practical foundation so your design team can make flexible, adaptive UIs. Design future-friendly experiences based on layout, image, and navigation patterns.


Creating responsive, adaptive interfaces

  • The what, why, and when of responsive web design
  • Trends in mobile growth for responsive sites, apps, and social media channels
  • Foundations of responsive and principles of adaptive design

Establishing flexible design systems

  • The role of Atomic Design and design systems in building future-friendly interfaces
  • How to adapt design systems over time as content and devices change
  • Which tools, resources, and analogies to use when talking about mobile with your team


Using layout and navigation patterns

  • The relationships among content hierarchies, columns, and breakpoints
  • Different approaches to designing effective media queries
  • When to use complex navigation patterns (like mega-menus) or simple ones

Designing with image and interaction patterns

  • Best Practices in dealing with responsive images, including resizing, text, and load times
  • When to use lightboxes, data tables, accordions, carousels, and fixed positioning
  • A bit on how it works together, from browser support to CSS

Make Mobile-first Work

Bridge development gaps

If you haven’t designed for each step in the flow—like an error message—who will? Help front-end developers and others move faster while improving your org’s mobile UX.

Speak the "right" language

Don’t be scared. Understand what’s involved with building responsive interfaces so you can better communicate with your technical team and with business or marketing folks.

Focus on the content

Everyone has an opinion. Keeping conversations and design decisions oriented on content needs will keep projects moving forward and teams happier, too.

You’ll learn how to:

  • Construct interfaces from their “atomic” elements
  • Create better website mapping experiences for small screens
  • Avoid common desktop tricks that don’t translate to mobile
  • Decide what to put on a page so it works in any environment
  • Conditionally load auxiliary and secondary content
  • Design for touch in ways that support UX across devices

4 Practical Takeaways from Brad’s Workshop

An entire toolkit of design patterns that work

Create future-friendly interfaces and interactions without reinventing the UX wheel.

Examples of orgs who’ve “Been there, done that”

Draw on lessons learned from Starbucks, Disney, The Boston Globe, BBC, and TIME.

The words and workflows to go responsive

Talk more confidently by understanding why, when, and how responsive design works.

Interfaces that work well across every screen

Take a systematic approach to mobile-first design using progressive enhancement.

This workshop is great for designers of all skill levels

Whether you’re new to responsive or a veteran designer, you’ll find endless amounts of practical tidbits in this workshop. And come prepared to take notes, because although you won’t be doing any hands-on exercises, you will be drinking from the responsive-design firehose that is Brad Frost’s brain.

Brad Frost, The Atomic Man

@brad_frost on Twitter

If you’ve ever seen Brad Frost onstage, then you’ll know his passion and enthusiasm for responsive design is matched only by his practical working knowledge for the subject.

But if you haven’t yet seen him, then get ready—he’s a coach, vocal leader, and partial comedian who makes learning fun and functional.

Brad is known for his work in designing responsive sites for huge content sites such as Entertainment Weekly and TechCrunch. He’s also the creator of the super-popular resources This is Responsive, Pattern Lab, and WTFMobileWeb.

So if your team talks about designing mobile-first, content-first, responsively, adaptively, or progressively… well, it’s time to decipher what all of those mean in practice and process alike.

And Brad is the best guide you could hope to have.