Responsive Design Weekly - RWD Interview Series with Brad Frost

Sponsor

TLDR Newsletter - Byte Sized News for Techies

How do you find working with clients these days? Is responsive something that you have to sell in any more or does everyone get it now?

By this point, responsive design is a given when talking with clients about doing any new work. I work with a lot of giant companies, so their language around responsive design can still be a bit cringy ("We will support 'desktop' and 'mobile'!"), but the overall expectation is that any web work involves creating a singular responsive web experience.
 

What is it that you find the hardest when speaking with clients from a site design/build point of view, and how do you go about explaining why it is important?

So much has changed since Ethan's eureka moment, what are your go to implementation methods for responsive sites? How do you handle layout, typography, images, video etc?

Oh boy, that's a big question. Each one of those things (layout, typography, images, video, etc) all have their own unique considerations. I'd say now that CSS Grid is here (along with our trusty friend Flexbox), layout has gotten a lot smoother. Establishing a common set of layout patterns using repeat notation has been tremendously helpful.

Typography has always been tricky, but I think we finally cracked the code on it. My colleague Dan Mall wrote a great article about how we established a solid typography system. One thing he doesn't cover in it is that we set up Sass mixins to accept a $responsive boolean to switch responsive behavior on or off. In certain cases, you want the typography size/treatment to be consistent across the resolution spectrum, but in other cases you need the type to adapt across screen sizes. For instance, you may want to have a heading in a passage of text that is medium-large-ish on small screens, but larger on large screens. But you also have a card component's heading that you want to treat consistently across the resolution spectrum. Having a flag that enables both of those behaviors is pretty slick.

Images have been helped along by srcset and picture elements for sure, and bundling those up as components in a design system has been really helpful from an ergonomic standpoint. Same goes with video.

But yeah, at the end of the day, each topic around web development has their own unique responsive considerations, and I'm increasingly finding there isn't a one-size-fits-all solution out there for each topic. It just takes a lot of implementation and iteration to land on patterns you feel good about.
 

What are the top three issues you're still facing when building a responsive site?

We started off with lots of m.dot.sites when mobile arrived. Google was a huge part of changing that approach by saying that all content should be found on a single URL. One true source. In recent years Google have incentivized the AMP Framework as a way to provide a new/better experience to mobile users. What are your thoughts?

I don't like AMP. Thankfully, others have summed things up quite nicely so I'll just say that I agree with what others have said.
 

Prediction time. What are we going to see towards the end of 2020 and into 2021?

Predictions are always hard, so take it all with a grain of salt. I think that we're increasingly going to see static design tools make progress in pulling in coded components (a la Modulz) so that the disconnect between design and development isn't so large. This is wishful thinking, but I'd love to see some progress made on container queries. I also think web components will (hopefully) start to gain some traction as a native way of creating component-driven frontend code.

Thank you so much for your time, if our readers want to learn more from you where can they track you down?

My home base is my personal website, where I blog about web design and other stuff. I'm also on Twitter, and you can read/buy my book Atomic Design over here.