El diseño responsivo es un área que sigue renovándose y trayendo nuevas pistas de reflexión, a menudo acompañadas de ejemplos concretos de código para demostrar su pertinencia. Hoy nos enfocaremos en el problema de las pestañas, en la legibilidad y la longitud de las líneas de texto, en los diferentes usos de los dispositivos y su tamaño de pantalla, antes de echar un vistazo a lo que el futuro nos prepara.
A veces utilizamos términos que parecen parecidos, pero que cubren realidades diferentes, como la aparente similitud entre los diseños fluidos y elásticos. Un diseño fluido se expresa en porcentaje, es el tamaño del viewport que define el display. Un diseño elástico se expresa en em, es la elección del usuario, es decir, sus parámetros de visualización como el tamaño de su fuente o su nivel de zoom, que son predominantes.
Las pestañas permiten mostrar una gran cantidad de contenido a la vez en la misma página navegando entre ellas de una manera horizontal. Es ahí dónde aprieta el zapato, cuando tratamos de adaptarlos a una experiencia móvil, donde a menudo se reduce el espacio horizontal. ¿Qué hacer en este caso?
Podemos pasar las pestañas en elementos de menú. Dónde una página muestraba un montón de ellas, se resulta una serie de páginas (o de cartas/div/plantillas apiladas en la misma), con sólo la primera visible. De este modo, las pestañas se convierten en acordeón. La solución de Chris Coyer permite separar el menú de las pestañas del menú de la navegación principal para que no entren en conflicto.
El idioma inglés tiene dos palabras para conceptos diferentes, mientras el castellano tiene sólo una: legibilidad. En inglés, readability se refiere a la comprensión del texto y su significado (se pueden calcular diferentes formulas de legibilidad). En cuanto a legibility, se refiere a la dimensión física de la legibilidad: cual fuente utilizar para que cada letra (o glifo) sea inequívoca cuando se lee, de manera que la lectura sea fácil. Estamos hablando aquí de esta legibilidad.
La velocidad de lectura de un lector casual es equivalente entre 35 y 95 caracteres por línea. Sin embargo, la longitud óptima de las líneas varía entre 50 y 75 caracteres por línea.
Clásicamente, los puntos de ruptura, o umbrales de conmutación, de su diseño pueden verse limitados por la anchura de la pantalla utilizada (aunque el área efectiva no siempre es esta).
Otro enfoque es tomar en cuenta su contenido para definir sus puntos de ruptura, a menudo anchuras de imagen, pero la longitud de sus líneas de texto también se puede integrar en sus fórmulas según su tipo de contenido. Marie Guillaumet llama a este diseño web proporcional, las proporciones de los textos y de los bloques siempre manteniéndose.
Existen varias herramientas para hacer su vida más fácil con respecto a la visualización de este margen de maniobra de optimización de las longitudes de las líneas.
Chris Coyer (otra vez) propone un bookmarklet muy práctico para ver esta frontera de 25 caracteres donde poner su punto de ruptura.
FlowType es un script javascript para redimensionar el tamaño de la fuente y la altura de la línea de texto encajado en la anchura definida por su elemento padre.
Obsérvese también que la altura de la línea (line-height) definida sin unidad de medida (ni px, ni em) puede leerse como un multiplicador para todos los elementos descendientes. Con la eliminación de la unidad, los cálculos complejos para conocer la altura relativa de las líneas de los elementos en cascada desaparece como por arte de magia.
Después entra en juego la tipografía responsiva: altura de las líneas, tamaño de las fuentes, guiones de corte automático…
Extrapolar la distancia de lectura a partir del tamaño de la pantalla es otra opción que está disponible para usted. Entre el teléfono sostenido en la mano, la tableta sobre las rodillas, en la cama o sobre la mesa del desayuno, la pantalla del portátil, del ordenador de mesa o la televisión en la pared del salón (sin mencionar los Google Glass), cada dispositivo tiene sus propios usos a los cuales tenemos que adaptarnos.
Bibliotype está definida por su autor Craig Mod como una librería (muy) simple basada en el HTML, las CSS y el javascript para la creación rápida de prototipos de tipografía aplicada a los contenidos largos y a la lectura en tabletas. Su menú ofrece un conjunto de parámetros tipográficos predefinidos que corresponden a la forma actual de leer del usuario (y sus preferencias personales): el tamaño de la fuente en situación, o más bien el tamaño general de los elementos de la página, ya sean textos o imágenes (es decir cama, rodillas o desayuno), la justificación del texto (justificado o no), la familia de fuente (Georgia o Helvetica), el contraste de la página (bajo o alto), y los guiones automáticos (aplicados o no). Al dar al usuario el poder de decisión sobre estos parámetros (salvarlos en su perfil para las conexiones posteriores es imprescindible), esta librería ofrece una visión general muy útil de lo que se puede hacer para adaptarse plenamente al uso real del dispositivo, en particular de las tabletas.
Cada dispositivo también tiene sus propios medios de interacción (teclado, ratón, pantalla táctil) con los cuales debemos componer. Herramientas como Modernizr proporcionan un panorama general de las funciones soportadas.
La luz ambiental en que se utiliza el dispositivo puede hacer que sea muy difícil de leer. El nivel 4 de las media queries proporciona el parámetro luminosity que puede tomar tres valores discretos (dim, normal y washed, respectivamente, para un entorno con poca luz, ideal o muy luminoso). La idea aquí es poder ajustar el contraste y la luminosidad del diseño para adaptarse al entorno del usuario, lo que ya existe en el mundo de las aplicaciones. Sin embargo, la luminosidad de la pantalla es por lo general ya cubierta por el propio dispositivo y, además, cada dispositivo tiene su propia sensibilidad, lo que hace esta característica difícil de usar.
Recuerdense la experiencia de la edición de la tarde: todos los días a las seis de la tarde, la luminosidad cambia para reflejar la hora del día. Una idea muy bonita, pero ¿qué pasa si el usuario ha instalado f.lux para manejar el calor de su pantalla? El entorno configurado del dispositivo va entrar en conflicto con el diseño del sitio, y el resultado puede no ser lo esperado.
Mediante la detección de la distancia entre la cara del lector y la pantalla para ajustar al mismo tiempo la altura de las líneas y el tamaño de la fuente, Marko Dugonjić propone una forma de pensar realmente original y creativa. Headtrackr, su librería javascript, utiliza la cámara web para detectar la cabeza del usuario, la API webRTC (web Real-Time Communication) y la norma HTML5 getUserMedia, entonces por el momento sólo soportada por Firefox y Chrome.
Un punto de vocabulario
A veces utilizamos términos que parecen parecidos, pero que cubren realidades diferentes, como la aparente similitud entre los diseños fluidos y elásticos. Un diseño fluido se expresa en porcentaje, es el tamaño del viewport que define el display. Un diseño elástico se expresa en em, es la elección del usuario, es decir, sus parámetros de visualización como el tamaño de su fuente o su nivel de zoom, que son predominantes.
Pestañas
Las pestañas permiten mostrar una gran cantidad de contenido a la vez en la misma página navegando entre ellas de una manera horizontal. Es ahí dónde aprieta el zapato, cuando tratamos de adaptarlos a una experiencia móvil, donde a menudo se reduce el espacio horizontal. ¿Qué hacer en este caso?
Podemos pasar las pestañas en elementos de menú. Dónde una página muestraba un montón de ellas, se resulta una serie de páginas (o de cartas/div/plantillas apiladas en la misma), con sólo la primera visible. De este modo, las pestañas se convierten en acordeón. La solución de Chris Coyer permite separar el menú de las pestañas del menú de la navegación principal para que no entren en conflicto.
Legibilidad y la longitud de las líneas
El idioma inglés tiene dos palabras para conceptos diferentes, mientras el castellano tiene sólo una: legibilidad. En inglés, readability se refiere a la comprensión del texto y su significado (se pueden calcular diferentes formulas de legibilidad). En cuanto a legibility, se refiere a la dimensión física de la legibilidad: cual fuente utilizar para que cada letra (o glifo) sea inequívoca cuando se lee, de manera que la lectura sea fácil. Estamos hablando aquí de esta legibilidad.
La velocidad de lectura de un lector casual es equivalente entre 35 y 95 caracteres por línea. Sin embargo, la longitud óptima de las líneas varía entre 50 y 75 caracteres por línea.
Clásicamente, los puntos de ruptura, o umbrales de conmutación, de su diseño pueden verse limitados por la anchura de la pantalla utilizada (aunque el área efectiva no siempre es esta).
Otro enfoque es tomar en cuenta su contenido para definir sus puntos de ruptura, a menudo anchuras de imagen, pero la longitud de sus líneas de texto también se puede integrar en sus fórmulas según su tipo de contenido. Marie Guillaumet llama a este diseño web proporcional, las proporciones de los textos y de los bloques siempre manteniéndose.
Existen varias herramientas para hacer su vida más fácil con respecto a la visualización de este margen de maniobra de optimización de las longitudes de las líneas.
Chris Coyer (otra vez) propone un bookmarklet muy práctico para ver esta frontera de 25 caracteres donde poner su punto de ruptura.
FlowType es un script javascript para redimensionar el tamaño de la fuente y la altura de la línea de texto encajado en la anchura definida por su elemento padre.
Obsérvese también que la altura de la línea (line-height) definida sin unidad de medida (ni px, ni em) puede leerse como un multiplicador para todos los elementos descendientes. Con la eliminación de la unidad, los cálculos complejos para conocer la altura relativa de las líneas de los elementos en cascada desaparece como por arte de magia.
Después entra en juego la tipografía responsiva: altura de las líneas, tamaño de las fuentes, guiones de corte automático…
Tamaño de pantallas y usos
Extrapolar la distancia de lectura a partir del tamaño de la pantalla es otra opción que está disponible para usted. Entre el teléfono sostenido en la mano, la tableta sobre las rodillas, en la cama o sobre la mesa del desayuno, la pantalla del portátil, del ordenador de mesa o la televisión en la pared del salón (sin mencionar los Google Glass), cada dispositivo tiene sus propios usos a los cuales tenemos que adaptarnos.
Bibliotype está definida por su autor Craig Mod como una librería (muy) simple basada en el HTML, las CSS y el javascript para la creación rápida de prototipos de tipografía aplicada a los contenidos largos y a la lectura en tabletas. Su menú ofrece un conjunto de parámetros tipográficos predefinidos que corresponden a la forma actual de leer del usuario (y sus preferencias personales): el tamaño de la fuente en situación, o más bien el tamaño general de los elementos de la página, ya sean textos o imágenes (es decir cama, rodillas o desayuno), la justificación del texto (justificado o no), la familia de fuente (Georgia o Helvetica), el contraste de la página (bajo o alto), y los guiones automáticos (aplicados o no). Al dar al usuario el poder de decisión sobre estos parámetros (salvarlos en su perfil para las conexiones posteriores es imprescindible), esta librería ofrece una visión general muy útil de lo que se puede hacer para adaptarse plenamente al uso real del dispositivo, en particular de las tabletas.
Cada dispositivo también tiene sus propios medios de interacción (teclado, ratón, pantalla táctil) con los cuales debemos componer. Herramientas como Modernizr proporcionan un panorama general de las funciones soportadas.
Echemos un vistazo al futuro
La luz ambiental en que se utiliza el dispositivo puede hacer que sea muy difícil de leer. El nivel 4 de las media queries proporciona el parámetro luminosity que puede tomar tres valores discretos (dim, normal y washed, respectivamente, para un entorno con poca luz, ideal o muy luminoso). La idea aquí es poder ajustar el contraste y la luminosidad del diseño para adaptarse al entorno del usuario, lo que ya existe en el mundo de las aplicaciones. Sin embargo, la luminosidad de la pantalla es por lo general ya cubierta por el propio dispositivo y, además, cada dispositivo tiene su propia sensibilidad, lo que hace esta característica difícil de usar.
Recuerdense la experiencia de la edición de la tarde: todos los días a las seis de la tarde, la luminosidad cambia para reflejar la hora del día. Una idea muy bonita, pero ¿qué pasa si el usuario ha instalado f.lux para manejar el calor de su pantalla? El entorno configurado del dispositivo va entrar en conflicto con el diseño del sitio, y el resultado puede no ser lo esperado.
Mediante la detección de la distancia entre la cara del lector y la pantalla para ajustar al mismo tiempo la altura de las líneas y el tamaño de la fuente, Marko Dugonjić propone una forma de pensar realmente original y creativa. Headtrackr, su librería javascript, utiliza la cámara web para detectar la cabeza del usuario, la API webRTC (web Real-Time Communication) y la norma HTML5 getUserMedia, entonces por el momento sólo soportada por Firefox y Chrome.
Design responsif : des pistes à suivre (en francés)
Responsive Web Design: some paths to follow (en inglés)
Design responsivo: uns caminhos a seguir (en portugués)
No hay comentarios:
Publicar un comentario