Nunca olvidaré una de las grandes lecciones que Karen McGrane le dio al mundo: el truncamiento no es una estrategia de contenido. La idea es que simplemente recortar texto mediante programación es un mazo y evita el tipo de pensamiento y planificación reales que generan buenas experiencias.
El truncamiento no es una estrategia de contenido. pic.twitter.com/sMfVCWUGJV
– Karen McGrane (@karenmcgrane) 10 de octubre de 2014
El truncamiento no es una estrategia de contenido pic.twitter.com/F3kjgOOnbv
– Karen McGrane (@karenmcgrane) 29 de julio de 2020
Ciertamente puede trucar texto con CSS. Un poco de overflow: hidden; recortará cualquier cosa, y puedes clasificarlo con text-overflow: ellipsis; Incluso la sujeción de múltiples líneas es extremadamente fácil en estos días. La web es un gran lugar. Me alegro de que tengamos estas herramientas.
Pero un mejor enfoque es una combinación de estrategia de contenido real (es decir, planificar el texto para que tenga una cierta longitud y usar ese toque humano para hacerlo bien) y adoptar un diseño asimétrico. Sobre este último, Ben Nadel tuvo un buen saludo a esa idea recientemente:
Desafortunadamente, los datos no son simétricos. Es por eso que todas las demostraciones de productos de Apple se burlan para mostrar a los usuarios que tienen nombres de cuatro letras: Dave, John, Anna, Sara, Bill, Jill, etc. Apple usa este tipo de datos simétricos porque encaja perfectamente en su usuario simétrico diseño de interfaz (UI).
Sin embargo, una vez que lanza un producto al “mundo real” y los usuarios comienzan a ingresar “datos del mundo real” en él, inmediatamente ve que los datos asimétricos, combinados con un diseño simétrico, pueden comenzar a verse terribles. Bueno, en realidad, aún puede verse bien; pero proporciona una experiencia de usuario terrible.
Para solucionar este problema, debemos apoyarnos en un realidad asimétrica. Necesitamos aceptar el hecho de que los datos son asimétricos y tenemos que diseñar interfaces de usuario que puedan expandirse y contraerse para trabajar con la asimetría, no contra ella.
Ben Nadel, “Adopción del diseño asimétrico y superación de los efectos nocivos del” desbordamiento de texto: puntos suspensivos “en CSS”
Afortunadamente, en estos días, CSS tiene muchas herramientas para ayudar a adoptar lo asimétrico. Tenemos una cuadrícula CSS, que puede hacer cosas como superponer áreas fácilmente, colocar la imagen y el texto de manera que el texto pueda crecer hacia arriba y alinearlos con los hermanos, incluso si no son del mismo tamaño.
Combina eso con cosas como aspect-ratio y object-fit y tenemos todas las herramientas que necesitamos para adoptar la asimetría, pero sin sufrir problemas como espacios en blanco incómodos y mala alineación.
Enlace directo →