Just after the 10-year anniversary of his Responsive Design article on A List Apart, Ethan has published some interesting thoughts on the nature of seams within responsive designs. Seams are the point at which a design fails. These can be viewport related – we've all resized a page in dev tools and suddenly realised that it's unusable at a specific aspect ratio – but, of course, also points out that seams can exist in non-visual elements of the page as well.
He ties that to design systems and their needs to consider individual patterns as mini responsive designs. Instead of fighting seams, he proposes looking back to Mark Boulton's concept of "content-out design".
Instead, [Mark] suggests that designing from the content out can create more interconnected, more harmonious layouts.
I love this concept. Even now, my first thought when beginning to design something in Photoshop, Illustrator, or wherever else, is to start by defining a canvas and (probably) a grid. Then I – as Ethan puts it – fill in that grid. However, the more I work with components, the more I find this a silly way of doing things. I end up stretching bits here and squeezing them there to get the component to span a certain number of columns or rows. Instead, what I've started doing is designing the component apart from everything else, to be the size and shape that feels right for whatever it (and it alone) contains. I hadn't considered doing that at a site-level, but I'd be excited to give it a try.
