3 ms·

> I don't know how useful this is. I think very. I've never designed anything based on arbitrary breakpoints (md, lg, xl and whatever numbers they might transl

> I don't know how useful this is. I think very. I've never designed anything based on arbitrary breakpoints (md, lg, xl and whatever numbers they might translate to) because that forces me to make design choices around those constraints. The only way to sanely add breakpoints in my opinion is to gradually reduce the width of your page and search for things that start looking off. Are your paragraphs starting to look a little cramped? Add a breakpoint at that width, maybe remove the sidebar, maybe lower paddings and margins to allow it to stay a little longer, maybe manually reduce font size or switch your column layout to rows if applicable. Keep doing that until you get to ~350px width and everything looks fine. You decide what needs to change when it makes sense rather than being told that something needs to change at some specific breakpoint.

crazygringo 3y ago
That's a fine (and arguably superior) philosophy for a simple personal site. But it just isn't practical for a commercial product that needs manual testing. If you have a single breakpoint, you only have 2 versions to test. If you ultimately have 30 different breakpoint values, that's 31 versions to test. And that's a lot of opportunity for CSS rules designed in isolation to wind up colliding with undesired results. Not to mention a nightmare for any designer to attempt to document expected behavior.
- MrJohz 3y ago
  But your site can be broken at different sizes even without breakpoints. From a QA perspective with manual testing, there's no difference whether or not developers have used breakpoints, the question is whether the application is working for the users' screen sizes. And, as the article points out, they are myriad. To test that the responsiveness works everywhere, the easiest thing is to probably go to the "responsive" tool in the browser's devtools, which opens the page in a little subwindow inside the main browser window, and then you can resize the subwindow freely to check a range of different sizes (rather than just an explicit set of them).

crazygringo 3y ago

That's a fine (and arguably superior) philosophy for a simple personal site. But it just isn't practical for a commercial product that needs manual testing. If you have a single breakpoint, you only have 2 versions to test. If you ultimately have 30 different breakpoint values, that's 31 versions to test. And that's a lot of opportunity for CSS rules designed in isolation to wind up colliding with undesired results. Not to mention a nightmare for any designer to attempt to document expected behavior.

MrJohz 3y ago
But your site can be broken at different sizes even without breakpoints. From a QA perspective with manual testing, there's no difference whether or not developers have used breakpoints, the question is whether the application is working for the users' screen sizes. And, as the article points out, they are myriad. To test that the responsiveness works everywhere, the easiest thing is to probably go to the "responsive" tool in the browser's devtools, which opens the page in a little subwindow inside the main browser window, and then you can resize the subwindow freely to check a range of different sizes (rather than just an explicit set of them).