La importancia del contraste

Andy Rutledge escribe uno de mis blogs favoritos sobre diseño web, es una lástima que no lo haga más seguido pero es porque debe estar ocupado y con muy buena razón.

En su más reciente entrada retoma un artículo previamente aparecido en A List Apart donde habla sobre la importancia del contraste en el diseño para resaltar y jerarquizar los mensajes. Es una lectura muy recomendable.

Contrast and Meaning: Design View

Técnica CSS para pies de página

El buenazo de Paul Boag nos remite una técnica muy interesante usada por Ed Merrit, uno de sus diseñadores en Headscape, para hacer pies de página fijos sin javascript, que se queden hasta abajo de la ventana si el contenido es corto, pero que se muestren abajo del contenido si éste es largo.

Usando las propiedades position: fixed; bottom: 0; puedes lograr que el pie de página se quede anclado a la parte inferior de la ventana, pero no se moverá con el contenido si éste es más alto que la ventana. Generalmente el problema se resuelve usando javascript: lees la altura del contenido, lo comparas contra la altura de la ventana y aplicas el posicionamiento que corresponda.

Sin embargo no siempre es conveniente usar javascript ya que puede estar deshabilitado, es una lata asegurarse que funcione en todos los navegadores y siempre es más recomendable resolver un problema de presentación usando css puro.

La técnica mostrada es puro css y dice como sigue:

html


<div id="contenedor">
<div id="contenido"></div>
<div id="pie"></div>
</div> 

O sea, creamos una capa que rodée al contenido y al pie.

css


*, body {margin: 0; padding: 0;}
#contenedor {display: block; position: absolute; min-height: 100%;}
#contenido {display: block; margin-bottom: 3em;}
#pie {position: absolute; display: block; bottom: 0; height: 3em } 

Si tienes experiencia usando css seguro que habrás pensado “¡ajá! esto no va a funcionar en IE6” y tienes razón.

Para que funcione hay que poner:

body, #contenedor {height: 100%;}

de preferencia en una hoja de estilos separada llamada mediante comentarios condicionales.

Y ahí lo tienen, eso es todo. Hay algunas consideraciones que se cubren en la página original, pero los invito a experimentar con esta técnica.