El mundo del diseño responsivo está en constante evolución, y con él las recomendaciones y los proyectos de trabajo del W3C, especialmente en cuanto a la evolución de las CSS. La tipografía también tiene algo que decir y el uso de las fuentes web trae sus soluciones. En este artículo se presentan una serie de enlaces de interés para continuar un debate de larga data.
En las revistas de papel, el texto es mucho más fluido que en la web: puede seguir los contornos de una imagen, o rellenar contornos complejos. Esto es lo que permiten las exclusiones CSS con unos resultados visuales muy atractivos. Las regiones y flujo (regions y flow) definen las áreas donde el texto se muestra de manera fluida. Cuando el usuario hace un zoom o cambia el tamaño de la fuente, el diseño sigue siendo el mismo, con el texto adaptándose de manera fluida en las áreas que le están permitidas. El soporte de este proyecto de trabajo es más que limitado, pero como tantas veces, un polyfill permite ya utilizarlo.
La flexibilidad de una tabulación hecha en CSS (adaptativa) y la conpaginación clásica de una tabla como en los buenos viejos tiempos de la etiqueta <table>. Con la conpaginación multicolumnas (recomendación candidata del W3C), es posible especificar el número de columnas de un elemento y su espaciamiento, o la anchura de una columna, dejando al explorador elegir el número de columnas para mostrar. Esta recomendación todavía no es soportada por todos los exploradores (IE sólo la soporta a partir de su versión 10), pero un polyfill ha sido desarrollado en la forma de un plugin jQuery.
La elección del tamaño de fuente para mostrar no puede depender únicamente del gusto personal desde el inicio de la apocalipsis zombi que se abatió silenciosamente sobre la web. El contexto de uso también es tan importante (o aún más) que el tamaño de las pantallas. La verdadera pregunta que debemos hacernos ahora es: ¿cuál es la distancia entre el usuario y la pantalla? La elección de la fuente, de la altura de las líneas y del contraste derivan de este simple hecho.
En vez de basar los puntos de control o de ruptura de sus media queries en píxeles (que dependen de su diseño en particular, o del tamaño del viewport del dispositivo utilizado), ¿por qué no basarlos en una unidad de medida más relativa, como el em? Esto es lo que ya proponía Lyza Gardner en marzo de 2012. Una ventaja de este enfoque, es que si el usuario hace un zoom cambiando su tamaño de fuente, el diseño se adapta a su elección.
Utilizar fuentes web para dar un estilo a su sitio puede dar lugar a una falta de gusto bastante generalizada, la de la falsa cursiva o de la falsa negrita. La aplicación de la etiqueta <em> (o <i>) a un elemento sin haber definido el tipo de letra cursiva correspondiente hace que el navegador itálicisa la fuente de base por la inclinación de cada carácter, lo que puede dar un resultado muy diferente de lo esperado. Esta falta de gusto tipográfico no molesta sólo a los estetas, más bien a cada visitante, ya que se reduce la legibilidad del texto. Sería una pena no corregirla.
¿Mostrar una vídeo YouTube o una presentación Slideshare que se adapte al tamaño de la pantalla mientras se mantiene el ratio? Hay una solución que existe desde hace mucho tiempo basada únicamente en CSS encapsulando el iframe sin necesidad de utilizar la etiqueta video del HTML5.
Para ir más lejos, recomiendo la lectura de estes libros:
Responsive Design. Desarrolla webs sensitivas con Bootstrap, por Miguel Ángel G. Arias
Y el clásico Responsive Web design, por Ethan Marcotte
Regiones y flujo CSS
En las revistas de papel, el texto es mucho más fluido que en la web: puede seguir los contornos de una imagen, o rellenar contornos complejos. Esto es lo que permiten las exclusiones CSS con unos resultados visuales muy atractivos. Las regiones y flujo (regions y flow) definen las áreas donde el texto se muestra de manera fluida. Cuando el usuario hace un zoom o cambia el tamaño de la fuente, el diseño sigue siendo el mismo, con el texto adaptándose de manera fluida en las áreas que le están permitidas. El soporte de este proyecto de trabajo es más que limitado, pero como tantas veces, un polyfill permite ya utilizarlo.
Columnas CSS
La flexibilidad de una tabulación hecha en CSS (adaptativa) y la conpaginación clásica de una tabla como en los buenos viejos tiempos de la etiqueta <table>. Con la conpaginación multicolumnas (recomendación candidata del W3C), es posible especificar el número de columnas de un elemento y su espaciamiento, o la anchura de una columna, dejando al explorador elegir el número de columnas para mostrar. Esta recomendación todavía no es soportada por todos los exploradores (IE sólo la soporta a partir de su versión 10), pero un polyfill ha sido desarrollado en la forma de un plugin jQuery.
¿Cuál tamaño de fuente mostrar?
La elección del tamaño de fuente para mostrar no puede depender únicamente del gusto personal desde el inicio de la apocalipsis zombi que se abatió silenciosamente sobre la web. El contexto de uso también es tan importante (o aún más) que el tamaño de las pantallas. La verdadera pregunta que debemos hacernos ahora es: ¿cuál es la distancia entre el usuario y la pantalla? La elección de la fuente, de la altura de las líneas y del contraste derivan de este simple hecho.
Tipografía responsive: em y no píxeles
En vez de basar los puntos de control o de ruptura de sus media queries en píxeles (que dependen de su diseño en particular, o del tamaño del viewport del dispositivo utilizado), ¿por qué no basarlos en una unidad de medida más relativa, como el em? Esto es lo que ya proponía Lyza Gardner en marzo de 2012. Una ventaja de este enfoque, es que si el usuario hace un zoom cambiando su tamaño de fuente, el diseño se adapta a su elección.
Falta de gusto tipográfico
Utilizar fuentes web para dar un estilo a su sitio puede dar lugar a una falta de gusto bastante generalizada, la de la falsa cursiva o de la falsa negrita. La aplicación de la etiqueta <em> (o <i>) a un elemento sin haber definido el tipo de letra cursiva correspondiente hace que el navegador itálicisa la fuente de base por la inclinación de cada carácter, lo que puede dar un resultado muy diferente de lo esperado. Esta falta de gusto tipográfico no molesta sólo a los estetas, más bien a cada visitante, ya que se reduce la legibilidad del texto. Sería una pena no corregirla.
Vídeos responsivas
¿Mostrar una vídeo YouTube o una presentación Slideshare que se adapte al tamaño de la pantalla mientras se mantiene el ratio? Hay una solución que existe desde hace mucho tiempo basada únicamente en CSS encapsulando el iframe sin necesidad de utilizar la etiqueta video del HTML5.
Libros
Para ir más lejos, recomiendo la lectura de estes libros:
Responsive Design. Desarrolla webs sensitivas con Bootstrap, por Miguel Ángel G. Arias
Y el clásico Responsive Web design, por Ethan Marcotte
Some news on the RWD front (en inglés)
Quelques nouveautés du design responsif (en francés)
Algumas novidades do design responsivo (en portugués)
No hay comentarios:
Publicar un comentario