Diseño responsivo III: diseño adaptativo con unidades relativas
Como diseñadores, nos vemos siempre en la obligación de ofrecer una experiencia de usuario excepcional. Una de esas técnicas es el uso de unidades relativas en lugar de unidades absolutas al definir tamaños y dimensiones en CSS. Este enfoque no solo simplifica el proceso de diseño, sino que también garantiza una adaptabilidad óptima en una amplia gama de dispositivos y pantallas. En este artículo, exploraremos en detalle qué son las unidades relativas, por qué son importantes y cómo pueden mejorar significativamente la calidad y la flexibilidad del diseño web.
El uso de unidades relativas en el diseño web es una práctica fundamental para crear experiencias de usuario adaptables, escalables y fáciles de mantener. Al adoptar em, rem y porcentajes en lugar de dimensiones absolutas, los diseñadores pueden garantizar que su contenido se vea y funcione de manera óptima en una amplia variedad de dispositivos y pantallas. Además, las unidades relativas fomentan la accesibilidad al permitir que los usuarios ajusten el tamaño del texto según sus preferencias personales, lo que resulta en una experiencia más inclusiva para todos. En resumen, al priorizar las unidades relativas en el diseño web, los diseñadores pueden crear sitios web que sean flexibles, adaptables y atractivos para una audiencia diversa.
¿Qué son las unidades relativas?
En CSS, las unidades relativas son aquellas cuyo tamaño se calcula en relación a otra propiedad, generalmente el tamaño de la fuente del elemento padre. Las unidades relativas más comunes son:
- Em (em): Esta unidad representa el tamaño de la fuente actual. Por ejemplo, si el tamaño de la fuente de un elemento es de 16 píxeles, 1em equivale a 16 píxeles. Si se establece un tamaño de fuente de 1.5em en un elemento con una fuente de 16 píxeles, el tamaño de fuente resultante sería de 24 píxeles (1.5 * 16).
Se recomienda su uso para tamaños de fuente y dimensiones que deben ajustarse en relación con el contenido de texto. - Rem (rem): Similar a em, pero en lugar de basarse en el tamaño de la fuente del elemento padre, rem se calcula utilizando el tamaño de fuente del elemento raíz (generalmente el tamaño de fuente del elemento
<html>). Esto garantiza una mayor consistencia en todo el documento, ya que rem no se ve afectado por los cambios en el tamaño de la fuente de los elementos secundarios.
Rem es ideal para establecer dimensiones globales que deben mantenerse consistentes en todo el sitio web, como márgenes, rellenos y anchos de contenedores.
Vamos. a intentar verlo de un modo más claro en el siguiente ejemplo:
html {
font-size: 16px;
}
.nombre_clase {
font-size: 24px;
padding: 2em; margin: 2rem;
}El padding definido con unidades em, se refiere al tamaño de la fuente de la clase a la que pertenece, es decir, padding: 2em = 2×24= 48px El margin, definido con unidades rem, se refiere al tamaño fuente del documento, es decir, margin: 2rem = 2×16=32px
La mayoría de los navegadores tienen por defecto el tamaño de texto de párrafo de 16px, este valor lo puede cambiar el usuario modificando las preferencias del navegador, esto significa que cuando utilizamos las unidades relativas rem, además, estamos dando la oportunidad al usuario de modificar el tamaño de todo el contenido de la web a su antojo, según sus preferencias.
Hemos definido em y rem para definir los tamaños de fuente, ahora vamos a ver cómo definir relativamente los demás tamaños.
- Porcentaje (%): Aunque no exclusivamente relativa al tamaño de la fuente, el porcentaje también se utiliza comúnmente para definir dimensiones en relación con el tamaño de su elemento padre. Por ejemplo, un ancho del 50% en un div hará que ese div tenga la mitad del ancho de su contenedor padre.
- VH: significa “viewport height”, es decir, altura de la ventana gráfica, que es la altura de la pantalla visible y que depende de cada uno de los dispositivos. 100VH representaría el 100% de la altura de la ventana gráfica o la altura completa de la pantalla.
- VW: significa «viewport weight», es decir, anchura de la ventana gráfica, el ancho de la pantalla visible, y 100VW representa el 100% del ancho de la pantalla.
La diferencia del % con VH y VW, es que el primero se refiere al elemento padre, y los segundos al tamaño de pantalla del dispositivo, los tres son imprescindibles si queremos ajustar elementos en función de la pantalla del dispositivo.
Ventajas del uso de unidades relativas:
- Escalabilidad y Adaptabilidad: Una de las principales ventajas de las unidades relativas es su capacidad para adaptarse a diferentes tamaños de pantalla y dispositivos. Al utilizar em o rem para definir tamaños de fuente y dimensiones de diseño, el contenido se ajusta automáticamente según el tamaño de la fuente del usuario o el tamaño de la pantalla, lo que garantiza una experiencia de usuario consistente y atractiva en todos los dispositivos, desde teléfonos móviles hasta pantallas de escritorio.
- Facilidad de Mantenimiento: Al evitar tamaños absolutos en favor de unidades relativas, se simplifica el proceso de mantenimiento del sitio web. Cambiar el tamaño de fuente base en el elemento raíz afectará automáticamente a todas las demás dimensiones definidas en unidades relativas, lo que facilita ajustar el diseño según las necesidades cambiantes del proyecto o las preferencias del usuario.
- Accesibilidad Mejorada: El uso de unidades relativas puede mejorar la accesibilidad del sitio web al permitir que los usuarios ajusten el tamaño de la fuente según sus preferencias. Esto es especialmente beneficioso para aquellos con discapacidades visuales o que simplemente prefieren un tamaño de fuente más grande para facilitar la lectura.
- Compatibilidad con Diseño Responsivo: Las unidades relativas son fundamentales para el diseño web receptivo, donde el diseño y el contenido se adaptan dinámicamente a diferentes resoluciones y tamaños de pantalla. Al utilizar em, rem y porcentajes en lugar de píxeles absolutos, se garantiza que el diseño se ajuste sin problemas a una variedad de dispositivos y configuraciones de pantalla.
