Embracing Asymmetrical Design

No Comments

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.

Truncation will not be a content material technique. pic.twitter.com/sMfVCWUGJV

— Karen McGrane (@karenmcgrane) October 10, 2014

Truncation will not be a content material technique pic.twitter.com/F3kjgOOnbv

— Karen McGrane (@karenmcgrane) July 29, 2020

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.

Ben Nadel, “Embracing Asymmetrical Design And Overcoming The Dangerous Results Of “text-overflow: ellipsis” In CSS”

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.

Direct Hyperlink to ArticlePermalink

The publish Embracing Asymmetrical Design appeared first on CSS-Methods. You’ll be able to help CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment