Look mum, no breakpoints! | Rob McCormick

An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or auto-repeating Grid layouts for extra control. Also some solid stats around the problems of designing for fixed breakpoints.

On the Tailwind trap, or how Tailwind hides the shortcuts and lures people into bad habits:

When I was using grid in Tailwind, I thought of it as a static thing with a defined number of columns, or rows, or both. To change it I had to explicitly state how many new columns (or rows) I wanted. I wasn't aware that a grid could be dynamic, adapting the number of columns or rows based on the content and available space

On how fluid design comes with one clear tradeoff:

Everything has tradeoffs - you can't have it all. And as far as I can tell the main tradeoff with building fluid websites is that you can't control every aspect. At some screen sizes it won't look exactly as you wished it did.

On the reality of designing for fixed breakpoints (and how rare those breakpoints are to fit what your users use):

Two of the designs I worked on were likely seen by less than 1% of people. And even if we're generous and include the entire range for the largest breakpoint, even though 1280px is at the top end, less than 3% of people would have seen three of my designs exactly as I intended them.

Explore Other Notes

⬅ Newer

Building a design token system

A very detailed and thorough overview of how to use design tokens to power a distributed design system and site architecture. The crux is ensuring design (Figma), code (CSS), and content management […]
  • An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

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.