Points, break.

When did we start using “breakpoint” to talk about layout adaptation? (Honestly, I don’t know!)


This content originally appeared on Ethan Marcotte’s website and was authored by Ethan Marcotte

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?

This is an interesting 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 web design”. It’s an old programming term, of course. But when did web designers start using it to refer to layout adaptation?

“Responsive design” was first coined onstage in a conference talk I gave in 2010, and 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 real guess is it’s the first item. (I was new to media queries, after all!) But I’m not sure.

This is all to say: I did a bunch of fun research, reread a bunch of old favorite sites and articles from that time1, and I still have no idea how and when “breakpoint” became a design-related term. If anyone knows 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.) 


This has been “Points, break.” a post from Ethan’s journal.

Reply via email


This content originally appeared on Ethan Marcotte’s website and was authored by Ethan Marcotte


Print Share Comment Cite Upload Translate Updates
APA

Ethan Marcotte | Sciencx (2022-07-19T04:00:00+00:00) Points, break.. Retrieved from https://www.scien.cx/2022/07/19/points-break/

MLA
" » Points, break.." Ethan Marcotte | Sciencx - Tuesday July 19, 2022, https://www.scien.cx/2022/07/19/points-break/
HARVARD
Ethan Marcotte | Sciencx Tuesday July 19, 2022 » Points, break.., viewed ,<https://www.scien.cx/2022/07/19/points-break/>
VANCOUVER
Ethan Marcotte | Sciencx - » Points, break.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/19/points-break/
CHICAGO
" » Points, break.." Ethan Marcotte | Sciencx - Accessed . https://www.scien.cx/2022/07/19/points-break/
IEEE
" » Points, break.." Ethan Marcotte | Sciencx [Online]. Available: https://www.scien.cx/2022/07/19/points-break/. [Accessed: ]
rf:citation
» Points, break. | Ethan Marcotte | Sciencx | https://www.scien.cx/2022/07/19/points-break/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.