Here’s an interesting question Thomas Semmler asked on Twitter:

Hey #CSS & #HTML people - I’m writing something and it turns out that I couldn’t find the term “breakpoint” in @beep’s original article, or the book.

Does anyone know the origin of the term?

I appreciated Thomas’s question because it made me realize something: I have absolutely no idea! I don’t know when “breakpoint” became associated with “media queries” and, by association, with responsive design. It’s an old programming term, of course. But when did web designers start using it to refer to layout adaptation?

As you may remember, “responsive design” was first coined onstage in a conference talk I gave in 2010. In the section on media queries, I talked about “spot-checking resolution-dependent bugs” and “enhancing the design” — not “breakpoints.” And as Thomas notes, “breakpoints” weren’t mentioned in my first article, which followed the talk a few months later. When I wrote about layout changes there, I used a different phrase:

With media queries, we can apply resolution-specific spotfixes, adapting our design to better respond to changes in the display.

So that’s early 2010 covered, and still no breakpoints! But: Patty Toland did some email spelunking, and found we were actively discussing “breakpoints” in October of 2010, during the planning of The Boston Globe’s responsive redesign. And I did refer to breakpoints in my book, which came out in 2011.

I suppose that means either:

  1. “Breakpoint” as a term to describe layout adaptation predates my talk in April 2010, or
  2. The term gained popularity between April and October 2010.

My guess is it’s the first item. (I was new to media queries, after all!) But I’m not sure.

But hey, what a nice little distraction, amidst everything! I’m deeply grateful to Thomas for the prompt. I got to do a bunch of fun research, to revisit a ton of favorite sites and articles from that weird, wild period.1 And I still have no idea how and when “breakpoint” became a design-related term! If you happen to know the history, I’d love to hear it.2

  1. I also got sad about all the favorite sites and articles from that time that are now offline! Do you ever imagine a version of the tech industry that cared about preservation and history! I sure do! ↩︎

  2. Preferably with citations, rather than hunches! (I have a lot of hunches already.) ↩︎