Diagramación elástica

Bajo ese nombre tan raro hay en la web de Nicolás Fantino un muy muy buen artículo sobre maquetación con CSS y XHTML donde los anchos de los bloques o divisiones se fijan en em en lugar de los píxeles o porcentajes acostumbrados, haciendo así que, además del texto, sus contenedores también se van a redimensionar cuando el usuario aumente el tamaño de letra.

Es muy interesante sobre todo para temas de accesibilidad, porque, como comenta Nicolás, cuando una persona necesita aumentar el tamaño de la letra en una web, si los contenedores tienen tamaño fijo la longitud de las líneas se hará demasiado corta como para leerlo cómodamente. Un ejemplo de esto lo tenéis en esta misma web.

El problema que presenta esto son las imágenes que usamos como fondo, curiosa una solución que propone con imágenes vectoriales, o también definiendo sus dimensiones de la misma forma que el texto y los bloques, ilustrado con un bonito ejemplo del CSS Zen Garden.

Actualización: he hecho mi primera prueba con esta técnica sólo, sin más florituras, en mi currículum y no ha resultado nada difícil maquetar, igual igual que con píxeles.

10 pensamientos en “Diagramación elástica

  1. Si, es normal lo de utilizar “em”. A los que utilizamos TeX aquello nos suena mucho. Es normal redimensionar las cosas utilizando el tamaño de la “m” :) ya que es el carácter más ancho. También está el “ex”, que se utiliza para la altura de la fuente base.

  2. Bueno, yo lo había visto mucho en texto, incluso para definir separación entre letras o palabras, pero no se me había ocurrido ponerlo en los contenedores.

    Realmente para mí es una “revolución” jajajajaja, bueno, porque así date cuenta que siempre tendrás el mismo número de líneas en cada separador… bueno, rollos míos, pero me parece muy muy muy útil para maquetar.

  3. Acabo de caer en la cuenta de que, aunque en la vista previa los enlaces se vean cuando se usa el HTML estándar, aquí hay que ponerlos con otra sintaxis. Es el segundo sitio donde me pasa en pocos días. O yo soy muy burro o no es muy usable… Vale, no digáis nada ;-)

    Lo que quería decir es que hay [LINK=http://www.alistapart.com/articles/elastic/~]un artículo muy bueno sobre diseño elástico[~LINK] en A List Apart.

  4. No, no es muy usable, tienes razón.
    Pensé en ponerlo de la forma corriente usando una función de PHP que deja pasar ciertas etiquetas, pero de esta forma prevengo el spam.

  5. Inma, muchas gracias por reseñar el artículo y aún más por comentar el post sobre las posibles soluciones a los gráficos en 100logs (el cual creo que es más interesante aún por ser algo que todavía no existe y que creo que podría servirnos a todos).

    A ver cuando empezamos a mover el próximo Meetup (al cual espero que vendrás) :-)

  6. Yo creo que el problema va a ser la junta de la trocola, que hace masa con el aforador del depósito y claro, se rompe el fuelle del palier con lo que la rotula de la junta homocinetica pierde valvulina interior…

    … o no, me apunto al Meetup :-)

  7. Te ha quedado muy bonito el curri… especialmente el portfolio (con las pantallitas que se van agrandando o achicando).

    Me alegro que te haya servido :-)