La diagramación, o forma de maquetar y diseñar, en el caso que nos ocupa, una página web, es fuente de discusión entre los profesionales del sector. En un principio existían dos modelos de maquetación, según el tipo de unidades utilizadas para definir los anchos de los elementos contenidos en la web: por un lado, el modo de ancho fijo, basado en píxeles; y por otro, el de ancho variable, basado en porcentajes.
En una época, los diseñadores web apostaron más por el ancho fijo, ya que permitía controlar mejor el resultado final, lo que a su vez podía ir en detrimento de la experiencia de usuario. El otro modo, el de ancho variable o de diseño líquido, ha sido más propio de diseñadores avanzados, y permitía colocar los elementos en un diseño vistoso apto para diferentes resoluciones de pantalla. Espacio mejor aprovechado, pero mayor dificultad para el usuario a la hora de leer textos largos.
Una de las últimas normas que se está convirtiendo en convención es la del uso de una nueva unidad de medida: el “em”. Es el ancho óptimo de una línea de texto para ser leído en bloque, y se estima que su valor está entre los 30 y los 35 em. Un “em” mide exactamente el ancho de la letra M (mayúscula) de una tipografía concreta en una medida concreta. De esa manera, el ancho óptimo de lectura dependerá del tipo de letra utilizado y de su tamaño.
Incluyendo la variable “em” en la hoja de estilos, permitiremos no sólo que el contenido de texto se adapte a su tamaño natural y no al ancho de la ventana del usuario, sino que además el usuario pueda modificar el tamaño del texto desde la configuración de su navegador. El uso de “em” se combina habitualmente con anchos fijos (px) que definan bloques en la página.
Pero, ¿y si también se usase “em” como unidad de medida para los anchos de esos elementos no textuales? Nos encontraríamos con una maquetación o diagramación elástica, donde absolutamente todos esos elementos móviles dependan del tamaño de letra que el usuario utilice.
Internet Explorer da problemas para manejar distintos tamaños, aunque se puede solucionar de forma muy simple: basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Aquí podemos ver un ejemplo básico:
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>Ejemplo</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>
El principal problema viene con el uso de imágenes de fondo en los bloques de la página. A la hora de utilizarlas, hay que pensar que podrían no verse como se espera (por ejemplo, si un bloque se reduce, la imagen aparecería cortada). Se puede definir el tamaño de una imagen con “em” para el ancho y alto (width y height), consiguiendo así que las imágenes crezcan o disminuyan en paralelo al diseño.
El uso de los “em” en las páginas web actuales es, sin lugar a dudas, necesario, especialmente en aquellas páginas donde lo más importante es el texto. Es más, se trata de una de las técnicas recomendadas para cumplir con las pautas de la accesibilidad web.
Diseño híbrido elástico-líquido
Estos diseños tienen las ventajas de los elásticos (anchos de línea óptimos y escalables en navegadores antiguos) y los líquidos (adaptables a resoluciones pequeñas).
La anchura de los bloques de contenido se define en “em” y se añade la propiedad max-width de CSS que permite especificar la anchura máxima que podrá tener un bloque. El resultado es un diseño aparentemente fijo, que se adapta a resoluciones menores y mayores sin que aparezcan barras horizontales de desplazamiento en el navegador.
La clave de estos layouts consiste en utilizar “em” como unidad de medida para los bloques contenedores y añadir la propiedad max-width de CSS para establecer su anchura máxima.
Suponiendo que tenemos un diseño de dos columnas, el bloque contenedor de ambas tendría un max-width del 100% y sus bloques anidados tendrían como ancho máximo el porcentaje relativo a la anchura del bloque que los contiene.
El código que se utilizaría en la imagen del ejemplo podría ser similar a este:
#contenedor{width: 100em; max-width: 100%;}
#navegacion{width: 40em; max-width: 40%;}
#contenido{width: 60em; max-width: 60%;}
Y tú, ¿cómo diseñas tus páginas web?
Fuente: 100px
