6 ms·

Ok, the first thing I looked at is "long content" https://defensivecss.dev/tip/long-content/ https://defensivecss.dev/tip/long-content/ and here they recommend

by Dan42 4y ago

Ok, the first thing I looked at is "long content" https://defensivecss.dev/tip/long-content/ https://defensivecss.dev/tip/long-content/ and here they recommend to just clip it. Because who cares about content right? Who cares if the partial content you display is useless, as long as it looks good. And that's the kind of tip everyone here is applauding. I would like to say webdesign is in a sorry state nowawadays, except it was also that way 20 years ago. Maybe this "who cares about the content" attitude is inherent to web designers? Sorry if I sound blasé or cynical, but one gets tired after long enough of this.

dgb23 4y ago
For me the 'more' button doesn't work properly so that's a bummer. But breaking designs with too much text can really lower the perceived quality and the readability and navigation. Often you would use a technique like that to preserve a 2d aligned grid/table/cell/matrix/cards like design, where the overall structure is really more about seeing things in context and in relation to each other. Having uniform spacing really helps there. If you break the 2d alignment the overall structure becomes wiggly and distracting.
deleted 4y ago
[deleted]
wnevets 4y ago
What a odd one to single out and complain about it.
- chrismorgan 4y ago
  Seems very reasonable to me. The advice is very dubious, but presented as absolute truth with no nuance. That’s bad, and, applying it more generally, if there’s one thing from the first row of tips that’s bad, it’s unlikely to be the only one. This sort of thing reduces confidence. I can also say from looking through a number of others that they often lack nuance, and present a solution to a possible problem, without contemplating why that problem arose, and whether the solution is actually the right solution. (e.g. image distortion and background repeat are both a bit weird when you think about them, and the solutions offered are blunt and often not very good with no suggestion on how they could be improved. And flexbox wrapping basically assumes that horizontal scrolling is bad and needs to be fixed, which it isn’t always, but somehow also misattributes the scrolling in the diagram, making it seem as though it’s the flex container that’s scrolling, when in fact it’s just overflowing and causing its parent scroll area, probably the document scroll area, to have a scrollbar, and that is more likely to be problematic if not managed deliberately; but it also completely neglects to mention the more likely problem with flex overflow, which is your items not triggering overflow, but instead being squished narrower than intended, and that is the thing that would actually be worth while describing the solution for—flex-basis and flex-shrink.)
- isleyaardvark 4y ago
  "Not making content inaccessible" is one of most fundamental principles of front-end work. The famous "CSS is awesome" coffee mug shows the correct default when something is not working like expected: the content is still visible. Defensive CSS should be intended to fail gracefully, and clipping it doesn't do that. (i.e. when it breaks it'll look bad but the content should still be available.) I read this bit and I feel like I'm taking crazy pills: >In some scenarios, we might need to truncate a text that isn't important for the user, or doesn't affect the user experience. If that's the case, then what is the text even for? This is a text based medium, the text is the content, it's the reason the user is here, they're not here to admire the consistent vertical layout. The priorities are entirely backwards.
  - wnevets 4y ago
    I disagree. If I'm reading a list of names like in a contacts app (e.g the example), I find it much easier and a better experience to skim entries if they have equal height and spacing. Having the trailing characters of a long last name being replaced with ellipsis is completely worth it to get the speed of skimming the list. If I actually need to interact with the person that has the long name I'm going to click their entry and get their full details anyway.
webstrand 4y ago
But that's only one of the tips, the rest of the tips are about adapting to arbitrary screen size and content without visually breaking? Sometimes you just have to clip user-generated content, though, because you can't tell the user to "make sure the label succinct enough to fit in this menu." The user will do as they please, and the layout must adapt or break. What alternative is there? Sure, you could limit the length of the user-generated label ahead of time. But that'll only work for one combination of font-face and root font-size. The user-agent can override the font-face and the root font-size, potentially causing your layout to break. So, once again, you're left with two options: clip the text, or let your layout break (text wrapping where it shouldn't, overflowing text, etc). At least with `text-overflow: ellipsis` if the user-generated label _doesn't_ overflow, it doesn't get clipped.
- rmbyrro 4y ago
  Clipping shouldn't be done at the design level. This is an application logic concern. If the application did not impose a character limit, or imposed a large one, the design must accommodate this freedom.
  - webstrand 4y ago
    But what about user-agents that override font-face and font-size? Those are important accessibility features for people with poor vision or dyslexia. Without knowing the rendered width of the text string, you can't limit the text ahead of time. Or are you saying that all designs that can't accommodate text-wrapping should be avoided?
    - danielheath 4y ago
      If the user has large text because they can’t read easily, how is clipping it short going to help them read it?
      - webstrand 4y ago
        Usually when the layout breaks, functionality is lost: buttons can't be clicked on, text can't be read, content is obscured to the right, etc. If none of these things are happening, I'd agree not clipping is fine.
hinkley 4y ago
I used to say there are two kinds of UI designers: the ones who care about the interface, and the ones who care about the user. Then we renamed it UX, trying to make both words about the user, and while I have spent less time navigating the post-rename world than I did the pre-rename world, my understanding of both human nature and the tech news cycle tells me that basically nothing changed. Just like calling it Software Engineering didn't stop people from YOLOing spaghetti code and gambling on musical chairs or an air of obliviousness to get them out of the blast radius.
jeffxtreme 4y ago
IMHO, I like the original better than the after too. However, I did think this was a handy feature to point out, just probably not the best example.
ysavir 4y ago
Not a designer, but here's my take: Clipping is a good approach to maintaining the interface widget. However, the content still needs to be exposed somehow, such as with a tooltip on hover. Similar to how all "3 days ago" "dates" should show the actual date/time when hovered. The default interface should be clean and easy, not cluttered, with a more detailed level available on request.

by Dan42 4y ago

dgb23 4y ago

For me the 'more' button doesn't work properly so that's a bummer. But breaking designs with too much text can really lower the perceived quality and the readability and navigation. Often you would use a technique like that to preserve a 2d aligned grid/table/cell/matrix/cards like design, where the overall structure is really more about seeing things in context and in relation to each other. Having uniform spacing really helps there. If you break the 2d alignment the overall structure becomes wiggly and distracting.

deleted 4y ago

[deleted]

wnevets 4y ago

What a odd one to single out and complain about it.

chrismorgan 4y ago
Seems very reasonable to me. The advice is very dubious, but presented as absolute truth with no nuance. That’s bad, and, applying it more generally, if there’s one thing from the first row of tips that’s bad, it’s unlikely to be the only one. This sort of thing reduces confidence. I can also say from looking through a number of others that they often lack nuance, and present a solution to a possible problem, without contemplating why that problem arose, and whether the solution is actually the right solution. (e.g. image distortion and background repeat are both a bit weird when you think about them, and the solutions offered are blunt and often not very good with no suggestion on how they could be improved. And flexbox wrapping basically assumes that horizontal scrolling is bad and needs to be fixed, which it isn’t always, but somehow also misattributes the scrolling in the diagram, making it seem as though it’s the flex container that’s scrolling, when in fact it’s just overflowing and causing its parent scroll area, probably the document scroll area, to have a scrollbar, and that is more likely to be problematic if not managed deliberately; but it also completely neglects to mention the more likely problem with flex overflow, which is your items not triggering overflow, but instead being squished narrower than intended, and that is the thing that would actually be worth while describing the solution for—flex-basis and flex-shrink.)
isleyaardvark 4y ago
"Not making content inaccessible" is one of most fundamental principles of front-end work. The famous "CSS is awesome" coffee mug shows the correct default when something is not working like expected: the content is still visible. Defensive CSS should be intended to fail gracefully, and clipping it doesn't do that. (i.e. when it breaks it'll look bad but the content should still be available.) I read this bit and I feel like I'm taking crazy pills: >In some scenarios, we might need to truncate a text that isn't important for the user, or doesn't affect the user experience. If that's the case, then what is the text even for? This is a text based medium, the text is the content, it's the reason the user is here, they're not here to admire the consistent vertical layout. The priorities are entirely backwards.
- wnevets 4y ago
  I disagree. If I'm reading a list of names like in a contacts app (e.g the example), I find it much easier and a better experience to skim entries if they have equal height and spacing. Having the trailing characters of a long last name being replaced with ellipsis is completely worth it to get the speed of skimming the list. If I actually need to interact with the person that has the long name I'm going to click their entry and get their full details anyway.

webstrand 4y ago

But that's only one of the tips, the rest of the tips are about adapting to arbitrary screen size and content without visually breaking? Sometimes you just have to clip user-generated content, though, because you can't tell the user to "make sure the label succinct enough to fit in this menu." The user will do as they please, and the layout must adapt or break. What alternative is there? Sure, you could limit the length of the user-generated label ahead of time. But that'll only work for one combination of font-face and root font-size. The user-agent can override the font-face and the root font-size, potentially causing your layout to break. So, once again, you're left with two options: clip the text, or let your layout break (text wrapping where it shouldn't, overflowing text, etc). At least with `text-overflow: ellipsis` if the user-generated label _doesn't_ overflow, it doesn't get clipped.

rmbyrro 4y ago
Clipping shouldn't be done at the design level. This is an application logic concern. If the application did not impose a character limit, or imposed a large one, the design must accommodate this freedom.
- webstrand 4y ago
  But what about user-agents that override font-face and font-size? Those are important accessibility features for people with poor vision or dyslexia. Without knowing the rendered width of the text string, you can't limit the text ahead of time. Or are you saying that all designs that can't accommodate text-wrapping should be avoided?
  - danielheath 4y ago
    If the user has large text because they can’t read easily, how is clipping it short going to help them read it?
    - webstrand 4y ago
      Usually when the layout breaks, functionality is lost: buttons can't be clicked on, text can't be read, content is obscured to the right, etc. If none of these things are happening, I'd agree not clipping is fine.

hinkley 4y ago

I used to say there are two kinds of UI designers: the ones who care about the interface, and the ones who care about the user. Then we renamed it UX, trying to make both words about the user, and while I have spent less time navigating the post-rename world than I did the pre-rename world, my understanding of both human nature and the tech news cycle tells me that basically nothing changed. Just like calling it Software Engineering didn't stop people from YOLOing spaghetti code and gambling on musical chairs or an air of obliviousness to get them out of the blast radius.

jeffxtreme 4y ago

IMHO, I like the original better than the after too. However, I did think this was a handy feature to point out, just probably not the best example.

ysavir 4y ago

Not a designer, but here's my take: Clipping is a good approach to maintaining the interface widget. However, the content still needs to be exposed somehow, such as with a tooltip on hover. Similar to how all "3 days ago" "dates" should show the actual date/time when hovered. The default interface should be clean and easy, not cluttered, with a more detailed level available on request.