When I first came across the CSS property,
text-overflow: ellipsis, I thought it was amazing! Finally, there was a clean and easy way to prevent a user's content from "breaking the design." This mindset took root in the "pixel perfect" design requirements handed-down from the days of yore. And, it has somehow stood the test of time. But, after reading Accessibility For Everyone by Laura Kalbag, I am suddenly reconsidering the use of
text-overflow. Whereas it once felt elegant, it now feels like a "Design Smell" - an indication that something in the design is based on incorrect principles or priorities.
In my review of "Accessibility For Everyone", I stated that the book was, in many ways, a "manifesto on building empathy" with the User. When primed with this perspective, the CSS property,
text-overflow: ellipsis, feels misguided. It isn't there to facilitate empathy with the User - it's there to facilitate empathy with the Designer; it's there to ensure that nothing breaks the "aesthetic of the design," even at the cost of clarity.
Take, for example, the "name" of each screen in this thumbnail-based screen list:
Notice that, from a user's perspective, both of these screens read as,
Dashboard-New-Project-Own.... In this case, we are truncating the unique-name of the screen because the "design" can't afford to wrap the name onto two lines. We are using
text-overflow: ellipsis to prevent the user's open-ended content from breaking the close-ended constraints imposed by the design aesthetic.
Now, I am not saying that
text-overflow: ellipsis is always wrong. Nor do I have a great way to fix the example above. But, I am saying that when we explicitly place the design aesthetic above all else, we are implicitly demoting clarity and accessibility as a secondary concern. Sometimes this trade-off makes sense.
But, perhaps most of the time, it doesn't.
Going forward, when I create or implement an application interface, instead of thinking about how I can bend the user's content to fit the design, I am going to step-back and think about how I might be able to rethink the design in order to better accommodate the user's content. As Laura Kalbag said in her book, "We can be generous with our design". And, I believe that the less we use
text-overflow: ellipsis, the more generous and empathetic our thinking will become.