Ich werde nie eine der großartigen Lektionen von Karen McGrane für die Welt vergessen: Beschneidung ist keine Content-Strategie. Die Idee ist, dass das einfache programmatische Abschneiden von Text ein Vorschlaghammer ist und die Art von echtem Denken und Planen vermeidet, die gute Erlebnisse schafft.
Sie können Text sicherlich mit CSS beschneiden. Ein wenig overflow: hidden; schneidet alles ab, und Sie können es mit text-overflow: ellipsis; aufhübschen. Selbst das Zeilenbeschneiden auf mehreren Zeilen ist heutzutage extrem einfach. Das Web ist ein großer Ort. Ich bin froh, dass wir diese Werkzeuge haben.
Ein besserer Ansatz ist jedoch eine Kombination aus tatsächlicher Content-Strategie (d. h. Planung von Text mit einer bestimmten Länge und menschlicher Note, um ihn richtig hinzubekommen) und dem Annehmen asymmetrischen Designs. Zu letzterem hatte Ben Nadel kürzlich eine nette Erwähnung dieser Idee.
Leider ist Daten nicht symmetrisch. Deshalb wird jede Apple-Produktdemo verspottet, weil sie Benutzer mit Namen mit vier Buchstaben zeigt: Dave, John, Anna, Sara, Bill, Jill usw. Apple verwendet diese Art von symmetrischen Daten, weil sie sauber in sein symmetrisches User Interface (UI)-Design passt.
Sobald Sie ein Produkt jedoch in die „reale Welt“ entlassen und Benutzer „reale Daten“ eingeben, sehen Sie sofort, dass asymmetrische Daten, die in ein symmetrisches Design gepresst werden, furchtbar aussehen können. Nun, tatsächlich mag es immer noch gut aussehen; aber es bietet eine furchtbare Benutzererfahrung.
Um dies zu beheben, müssen wir uns auf eine asymmetrische Realität einlassen. Wir müssen die Tatsache annehmen, dass Daten asymmetrisch sind, und wir müssen Benutzeroberflächen entwerfen, die sich ausdehnen und zusammenziehen können, um mit der Asymmetrie zu arbeiten, nicht dagegen.
Ben Nadel, „Embracing Asymmetrical Design And Overcoming The Harmful Effects Of „text-overflow: ellipsis“ In CSS“
Glücklicherweise verfügt CSS heutzutage über so viele Werkzeuge, um diese Umarmung des Asymmetrischen zu unterstützen. Wir haben CSS Grid, das Dinge wie überlappende Bereiche einfach machen kann, Bilder und Text so positionieren kann, dass sich der Text nach oben wachsen kann, und sie mit Geschwistern ausrichten kann, auch wenn sie nicht gleich groß sind.
Kombinieren Sie dies mit Dingen wie aspect-ratio und object-fit und wir haben alle Werkzeuge, die wir brauchen, um Asymmetrie anzunehmen, aber keine Probleme wie unangenehme weiße Flächen und falsche Ausrichtungen zu erleiden.
Verdammt. Sie bringen mich zum unbeholfenen Lachen in meinem ansonsten stillen Schreibtisch-Klumpen.