6 ms·

I agree with the general sentiment. > What can the web designer do? Completely disagree with this section. Each of the suggested device categories (Desktop/l

I agree with the general sentiment. > What can the web designer do? Completely disagree with this section. Each of the suggested device categories (Desktop/laptop, Tablet, Phone) has many different screen sizes/resolutions. And all of them might have screens in landscape or portrait mode. All of these devices might support multi-tasking with varying split screen sizes. All of those devices support custom accessibility configurations for font-sizes, zooming or both. By detecting the UA and trying to shoehorn it into a certain category, you only increase the number of issues for the users. One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left.

yohannparis 5y ago
I agree with your sentiment. But instead of just using CSS units, you can use hard breakpoints, but not for the whole site. Each UI elements needs to be tailored based on width and height of a browser, you cannot bucket everything.
- jakelazaroff 5y ago
  The best way to accomplish this is container queries, which are just starting to show up in browsers. Essentially, you define breakouts based on the dimensions of individual elements, not the full browser window. https://css-tricks.com/say-hello-to-css-container-queries/ https://css-tricks.com/say-hello-to-css-container-queries/
  - chrisco255 5y ago
    Sounds like they just dropped in Chrome Canary, so this is very, very early. That typically means it'll take years for it to be supported in all browsers or 99% of browser versions in use. Is there a polyfill solution for this in the meantime?
    - FrontAid 5y ago
      Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript). [1] https://github.com/w3c/csswg-drafts/issues/5796 https://github.com/w3c/csswg-drafts/issues/5796 [2] https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/ https://philipwalton.com/articles/responsive-components-a-so...
Izkata 5y ago
> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. This is what "responsive design" used to mean. I remember being quite confused when people started using it to refer to distinct, non-responsive mobile-vs-desktop views.
- tgv 5y ago
  I guess that's bootstrap's legacy: they implemented a grid in precisely that annoying way. Not that you have to use it like that, but the temptation seems to be considerable.
- andrewingram 5y ago
  Yeah, the advent of CSS frameworks introduced the concept of a relatively small number of global breakpoints. The consequence of this was that at certain widths, typically some figure meant to represent a change on form factor (mobile, tablet, laptop, desktop), there'd be dramatic layout shifts. For a long time I resisted this, opting instead for more surgical introduction of a breakpoint, literally at the _point_ where some part of a page's design _breaks_ (not really the etymology of the word, but it's fun to think of it this way). But it's felt like a decade-long battle against the momentum of the industry, and sometimes I just want to build things rather than fight.
  - molf 5y ago
    I agree with you in principle. But having many different breakpoints that are accurately defined at exact widths leads to one huge practical downside: the number of possible combinations of website element versions skyrockets. I have found this to quickly lead to a situation where it is no longer practical to test all combinations. A small number of global breakpoints can be a better trade-off when it means the website works better (for most people).
    - andrewingram 5y ago
      I think you're definitely right. It's possible that container queries may open up new possibilities that resolve the tension between the two approaches.
thinkloop 5y ago
Not to mention watches and TVs
azangru 5y ago
> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left. Not sure what you mean. What does "no more space left" mean in practice, and how do you detect it with CSS?
- eurasiantiger 5y ago
  Use a float grid which may flow ugly, or native CSS Grid which allows child elements to dictate their own min- and max-sizes.
- FrontAid 5y ago
  Assume you have a number of cards organized in rows and columns. You could define how many columns to show between each breakpoint using several media queries. However, a better approach would be to use a flex container with `flex-wrap:wrap`. Specify `flex-basis` for its children and the browser will automatically wrap them accordingly. No break points needed.
  - azangru 5y ago
    That makes sense, thanks; although I am still not sure it's applicable to the case described in the article, where the author was complaining of the layout grid that changed a three-column layout to a single-column layout. Assuming that we use CSS grids for layouts, and grid's cells don't wrap, I can't imagine how one can manage without a media query that will change the number of the grid's columns. Which will cause an abrupt change in the layout, which is, if I understand the author correctly, something he doesn't like.
simonlc 5y ago
> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left. While the web still lacks in certain areas to accomplish this with CSS, there are many new techniques with grid and flex that allow very little use of media queries to reflow the content. When using break points, or media queries, I don't think you should abide to a constant set. While relative units might solve certain situations, it's not a complete solution. Using constant set of breakpoint sizes is what causes these bizarre jumps from a "wow this is a very stretched out mobile site." By using grid and flex and things like auto-fit, minmax(), etc will get you part of the way today. After you still need to use breakpoints to handle edge cases. These should always be set only at the point they are actually needed, not a fixed "this how wide phones kind of are." This way when the page is resized you have a fluid adjustment of content that only reflows automatically (with grid and flex) and at strategic breakpoints for edge cases. So regardless of the device it will flow more smoothly according to your site's content, rather than just 5 different screens (breakpoints).
deleted 5y ago
[deleted]

yohannparis 5y ago

I agree with your sentiment. But instead of just using CSS units, you can use hard breakpoints, but not for the whole site. Each UI elements needs to be tailored based on width and height of a browser, you cannot bucket everything.

jakelazaroff 5y ago
The best way to accomplish this is container queries, which are just starting to show up in browsers. Essentially, you define breakouts based on the dimensions of individual elements, not the full browser window. https://css-tricks.com/say-hello-to-css-container-queries/ https://css-tricks.com/say-hello-to-css-container-queries/
- chrisco255 5y ago
  Sounds like they just dropped in Chrome Canary, so this is very, very early. That typically means it'll take years for it to be supported in all browsers or 99% of browser versions in use. Is there a polyfill solution for this in the meantime?
  - FrontAid 5y ago
    Container queries have been suggested for a while now, it is not a new idea. But it has gained a lot of momentum recently, for example [1]. So maybe it will not be years until all modern browsers might support it. Until then, you might want to try [2] (not a polyfill, but a workaround with JavaScript). [1] https://github.com/w3c/csswg-drafts/issues/5796 https://github.com/w3c/csswg-drafts/issues/5796 [2] https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/ https://philipwalton.com/articles/responsive-components-a-so...

Izkata 5y ago

> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. This is what "responsive design" used to mean. I remember being quite confused when people started using it to refer to distinct, non-responsive mobile-vs-desktop views.

tgv 5y ago
I guess that's bootstrap's legacy: they implemented a grid in precisely that annoying way. Not that you have to use it like that, but the temptation seems to be considerable.
andrewingram 5y ago
Yeah, the advent of CSS frameworks introduced the concept of a relatively small number of global breakpoints. The consequence of this was that at certain widths, typically some figure meant to represent a change on form factor (mobile, tablet, laptop, desktop), there'd be dramatic layout shifts. For a long time I resisted this, opting instead for more surgical introduction of a breakpoint, literally at the _point_ where some part of a page's design _breaks_ (not really the etymology of the word, but it's fun to think of it this way). But it's felt like a decade-long battle against the momentum of the industry, and sometimes I just want to build things rather than fight.
- molf 5y ago
  I agree with you in principle. But having many different breakpoints that are accurately defined at exact widths leads to one huge practical downside: the number of possible combinations of website element versions skyrockets. I have found this to quickly lead to a situation where it is no longer practical to test all combinations. A small number of global breakpoints can be a better trade-off when it means the website works better (for most people).
  - andrewingram 5y ago
    I think you're definitely right. It's possible that container queries may open up new possibilities that resolve the tension between the two approaches.

thinkloop 5y ago

Not to mention watches and TVs

azangru 5y ago

> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left. Not sure what you mean. What does "no more space left" mean in practice, and how do you detect it with CSS?

eurasiantiger 5y ago
Use a float grid which may flow ugly, or native CSS Grid which allows child elements to dictate their own min- and max-sizes.
FrontAid 5y ago
Assume you have a number of cards organized in rows and columns. You could define how many columns to show between each breakpoint using several media queries. However, a better approach would be to use a flex container with `flex-wrap:wrap`. Specify `flex-basis` for its children and the browser will automatically wrap them accordingly. No break points needed.
- azangru 5y ago
  That makes sense, thanks; although I am still not sure it's applicable to the case described in the article, where the author was complaining of the layout grid that changed a three-column layout to a single-column layout. Assuming that we use CSS grids for layouts, and grid's cells don't wrap, I can't imagine how one can manage without a media query that will change the number of the grid's columns. Which will cause an abrupt change in the layout, which is, if I understand the author correctly, something he doesn't like.

simonlc 5y ago

> One part of a solution to this problem is to use relative CSS units. Avoid hard breakpoints whenever possible. Only break columns into rows when there is no more space left. While the web still lacks in certain areas to accomplish this with CSS, there are many new techniques with grid and flex that allow very little use of media queries to reflow the content. When using break points, or media queries, I don't think you should abide to a constant set. While relative units might solve certain situations, it's not a complete solution. Using constant set of breakpoint sizes is what causes these bizarre jumps from a "wow this is a very stretched out mobile site." By using grid and flex and things like auto-fit, minmax(), etc will get you part of the way today. After you still need to use breakpoints to handle edge cases. These should always be set only at the point they are actually needed, not a fixed "this how wide phones kind of are." This way when the page is resized you have a fluid adjustment of content that only reflows automatically (with grid and flex) and at strategic breakpoints for edge cases. So regardless of the device it will flow more smoothly according to your site's content, rather than just 5 different screens (breakpoints).

deleted 5y ago

[deleted]