Seams and edges | Ethan Marcotte

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.

Explore Other Notes


Dark mode in Gatsby

Josh outlines the various steps required to get a dark mode theme working properly in Gatsby. I've been wondering about adding a dark mode at some point and, honestly, I'm amazed by the number of […]
  • Just after the 10-year anniversary of his <em>Responsive Design</em> article on&nbsp;<em>A List&nbsp;Apart</em>, Ethan has published<em> </em>some interesting thoughts on the nature [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:


Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.