La eterna discusión sobre qué tipo de diagramación (layout, maquetación) es mejor para cierto tipo de páginas debería quedar al fin zanjada.

La mejor solución para los diseños donde lo primordial es el texto está entre nosotros.

En un principio, existían dos tipos de diagramación. Estos tipos estaban diferenciados en el tipo de unidades que se usaban para definir los anchos de los elementos. Por un lado estaba el ancho fijo, basado en píxeles, y por otro el ancho variable, basado en porcentajes. Ésto daba como resultado: páginas de anchos inamovibles el primero y páginas que se acomodaban al ancho de la ventana del navegador el segundo.

En una época, el ancho fijo fue el preferido por los diseñadores web no porque fuera mejor que el ancho variable sino porque era más fácil de manejar y controlar el resultado (especialmente usando programas de tipo WYSIWYG). Obviamente, cuando un diseñador web decide “controlar el resultado”, si no atiende a ciertos cuidados, es muy probable que lo haga en detrimento de las preferencias del usuario que usará su página. Una mala costumbre de aquella época era, además de poner anchos fijos a los elementos, definir tamaños fijos (también en píxeles) a la tipografía. Resultado: una gran pérdida en la accesibilidad de las páginas (que sumada a la costumbre de maquetar con mil tablas anidadas y mil grafiquitos sin más utilidad que “embellecer” la página daba como resultado un verdadero calvario para todo usuario con algún tipo de discapacidad visual).

Los anchos variables estaban reservados a “los que sabían” porque eran más dificiles de predecir y, a la vez, lograr un diseño vistoso que no se “rompiera” cuando se pasaba de verlo en una pantalla de 640*480 a una de 1024*768 era demasiado complicado y desgastante para la mayoría, además existía (y aún existe) el mito de que es un sistema más usable y/o accesible, lo cual no es cierto. ¿Qué ganaba el usuario? personalmente, siempre creí que nada, salvo tener menos espacios libres en la pantalla (si a ésto se le puede llamar “ganancia”). Además, esta práctica se complementaba casi siempre con tamaños de tipografía fijos, lo cual tampoco ayudaba al resultado final. Leer textos largos en pantallas cada vez más grande se hacía cada vez más complicado. ¿Por qué? porque no es lo mismo el 80% de 800px que el 80% de 1280px y saltar de una línea a la siguiente (sin tener que buscar cuál es la siguiente) no es tan fácil como podría parecer en un primer momento.

Cualquiera que se haya dedicado en algún momento de su vida al diseño gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de, ciertas normas o convenciones. Una de ellas define lo que se considera el ancho óptimo de una línea de texto para ser leído en bloque. Éste es de entre 30 em y 35 em. La unidad de medida de este ancho es el “em”. Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta.

Aplicando el ancho óptimo a la web

Aquí empieza lo bueno. Las hojas de estilo admiten el uso de “em” como unidad de medida, lo cual nos permite escribir textos definiendo un tamaño de tipografía relativo sin depender de impredecibles porcentajes. La ventaja número uno es que el tamaño es relativo a la tipografía que se use y no al ancho de la ventana del usuario. La ventaja número dos es que, felizmente, usar “em” como unidad para tamaños de tipografía permite que el usuario pueda variar el tamaño desde el control de tamaño de letra de su navegador preferido.

Una práctica que se usa últimamente es usar anchos fijos (px) para definir los bloques de una página y “em” para el tamaño de la tipografía. Ésto permite al usuario ver el texto en el tamaño que prefiera, eso es bueno… pero… el problema es que alguien necesite ampliar la tipografía dos o más veces y el ancho del contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea da por lo suelos.

Ahora bien, ¿qué sucedería si usásemos “em” como unidad de medida para los anchos de los elementos también? Obtendríamos lo que se conoce como diagramación elástica donde todo lo que se defina basado en “em” dependerá del tamaño de letra que el usuario use.

Obviamente, no todo son rosas en este camino. IE da problemas para manejar distintos tamaños (especialmente cuando se hereda un tamaño definido por un elemento “padre”). Afortunadamente, hay una solución muy simple a este problema. Basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Además, “hilando fino” hay que marcar que, al posicionar con float, IE de Mac necesita que se defina el ancho de al menos uno de los bloques un poco más pequeño de lo que la lógica matemática podría decir. Cosas de la vida.

Un poco de código

Un ejemplo muy básico sería algo como:

CSS para pegar dentro del HEAD.


<style type="text/css">
body {
  font-size: 100%;
}
h1 {
  text-size: 2.5em;
}
#contenido {
  text-size: .85em;
  width: 30em;
  background-color: #f0f0f0;
}
</style>

HTML para pegar dentro del BODY.


<h1>Mi demo</h1>
<div id=”contenido”>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec est sit amet wisi ultricies aliquam. Nulla mollis sodales diam. Duis enim purus, gravida at, varius sed, egestas sit amet, ligula. Sed est neque, ultricies ut, fermentum id, congue sed, magna. Ut sed velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat orci a ipsum. Morbi sed augue vitae arcu porta consectetuer. Sed sit amet quam et elit nonummy elementum. Suspendisse auctor leo ut wisi. Pellentesque vehicula venenatis lorem. Pellentesque tincidunt dolor at urna rutrum egestas.</p>
</div>

Como se puede ver en el ejemplo, el concepto es muy simple y una vez comprendido no es demasiado distinto del uso de píxeles para definir anchos.

También tenemos un ejemplo más complejo, con una diagramación a dos columnas con encabezado y pié. Éste ejemplo puede ser alineado a la izquierda o centrado en la ventana y puede tener la columna de extras a la izquierda o la derecha mediante un intercambiador de estilos que está en la misma columna. Nótese que el XHTML no cambia en nada, solo cambian los estilos (que están brevemente comentados en el mismo CSS). Vamos, que ya no hay excusas para no usarlo ;)

Algunas conclusiones

La realidad es que una vez que se entiende el funcionamiento de este sistema, puede usarse muy fácilmente, aunque con algunas limitaciones. El principal problema viene de la mano del uso de imágenes de fondo en los bloques de la página. No es que no se puedan usar, sino que hay que tener en cuenta algunas cosas a la hora de pensar cómo implementarlas, como por ejemplo que al achicarse un bloque éstas se cortarán y que al agrandarlo éstas no lo seguirán. Hay también algo que sí se puede aprovechar y es que se puede definir el tamaño de una imagen con “em” para el width y el height con lo cual lograremos que las imágenes así definidas se agranden o se achiquen junto con el diseño (un efecto muy simpático, a la vez que útil para una persona con problemas de visión que debe agrandar todo para verlo).

De cualquier manera y desde mi punto de vista, es (al menos hoy en día) la mejor solución para páginas y sitios web en los que lo más importante es el texto ya que permite: por un lado manejar muy facilmente un bloque de texto asegurando que su ancho es el óptimo para una lectura cómoda y eficaz; y por otro brindar una accesibilidad bastante mejorada al común de los sitios ya que es el usuario quien decide en qué tamaño desea leer nuestro contenido.

En la actualidad, 100px.com esta casi basado en una diagramación elástica. El “casi” responde a la limitación de las imágenes de fondo. En el caso de este sitio, la columna de extras no tiene el ancho definido con “em” sino que responde a un ancho fijo ya que debía tener el fondo azul con sombra y esquinas redondeadas. Si bien pudo haberse solucionado usando un truco con varios DIV anidados con sendas imágenes en cada esquina, se decidió dejar el ancho fijo para no complicar el documento XHTML innecesariamente.

Para leer más (en inglés)

  • Text Sizing (en The Noodle Incident) por Owen Briggs: 264 metódicas capturas de pantalla para analizar el comportamiento de las tipografías en distintos navegadores y plataformas.
  • Elastic Lawn (en el CSS Zen Garden) por Patrick Grifiths: al extremo… con imágenes de fondo y todo :)