I’ll always remember certainly one of Karen McGrane’s nice classes to the world: truncation will not be a content material technique. The concept is that simply clipping off textual content programmatically is a sledgehammer, and avoids the type of actual pondering and planning that makes for good experiences.
You definitely can trucate textual content with CSS. A little bit of overflow: hidden; will clip something, and you’ll class it up with text-overflow: ellipsis; Even a number of line clamping is extraordinarily straightforward today. The net is an enormous place. I’m glad we’ve got these instruments.
However a greater strategy is a mix of precise content material technique (i.e. planning textual content to be of a sure size and utilizing that human contact to get it proper) and embracing asymetric design. On the latter, Ben Nadel had a pleasant shout to that concept just lately:
Sadly, knowledge will not be symmetrical. Which is why each Apple product demo is mocked for showcasing customers that every one have four-letter names: Dave, John, Anna, Sara, Invoice, Jill, and so forth.. Apple makes use of this kind of symmetrical knowledge as a result of it suits cleanly into their symmetrical consumer interface (UI) design.
When you launch a product into “the actual world”, nevertheless, and customers begin to enter “actual world knowledge” into it, you instantly see that asymmetrical knowledge, shoe-horned right into a symmetrical design, can begin to look horrible. Properly, really, it could nonetheless look good; however, it supplies a horrible consumer expertise.
To repair this, we have to lean into an uneven actuality. We have to embrace the truth that knowledge is uneven and we have to design consumer interfaces that may develop and contract to work with the asymmetry, not towards it.
Fortuitously, today, CSS has so many instruments to assist try this embracing of the asymetric. We’ve bought CSS grid, which might do issues like overlap areas simply, place picture and textual content such that the textual content can develop upwards, and align them with siblings, even when they aren’t the identical measurement.
Mix that with issues like aspect-ratio and object-fit and we’ve got all of the instruments we have to embrace asymetry, however not endure issues like awkward white house and malalignment.
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.