Para un desarrollador siempre es imprescindible un encabezado y pie de página que garantice la armonía visual del diseño, una navegación cómoda para los usuarios y muestre con pocas palabras el tema principal de nuestro sitio.

Tablas vs CSS

Recuerdo mis inicios en la programación web cuando para colocar el encabezado y pié de página en nuestros sitios se lograba con una tabla de una columna y tres filas. Hoy en día las hojas de estilo, CSS (por sus siglas en inglés de Cascading Style Sheets) y el javascript han tomado gran auge gracias a las maravillas que se pueden lograr combinándolos en nuestras aplicaciones.

Un encabezado y pié de página implementados con CSS resultan muy prácticos, de este modo no es recomendable ni necesario usar tablas en nuestros sitios. Si los diseñamos completamente utilizando hojas de estilo será más manejable desde el punto de vista del diseño, ya que con sólo hacer algunas modificaciones en nuestro archivo de estilos nuestra web podrá quedar rediseñada completamente.

Esto es muy útil para la tarea de renovar el diseño y que debemos practicar cada cierto tiempo para lograr que nuestro sitio se mantenga acorde a las últimas tendencias de desarrollo y siempre disponga de un diseño fresco y renovado. Un ejemplo de esto son algunos gestores de contenido como Joomla, Drupal y Blogger que implementan plantillas y para cambiarlas sólo es necesario modificar el archivo de estilo.

Es recomendable validar siempre nuestras hojas de estilo para asegurarnos que nuestro encabezado, pié de página y nuestra web en general tendrá un aspecto similar en los navegadores más populares.

El pié de página siempre abajo

Uno de los problemas más comunes a la hora de desarrollar el pié de página de nuestro sitio es que no se comporta como tal, es decir, sube cuando el contenido de la página es poco, no se mantiene al final de la página y vemos un molesto espacio en blanco luego de nuestro pié de página.

Para este problema hay varias soluciones, quizás la más sencilla sea siempre llenar las páginas con suficiente contenido para que esto no suceda, pero el problema está en que generalmente quienes desarrollamos el sitio no somos las mismas personas que insertan el contenido, porque hacemos webs por encargo o por cualquier otro motivo. En tal caso lo ideal sería buscarle al problema una solución definitiva.

Algunos desarrolladores prefieren colocar un pié de página flotante que se siempre permanezca pegado al borde inferior del navegador, pero esto a veces es un poco molesto ya que perdemos una parte del área de la página en la que siempre se deberá mostrar el pié de página. Otros, en los que me incluyo, preferimos rompernos la cabeza con el código hasta lograr que el pié de página siempre sea el final de nuestra página y no aparezca un espacio en blanco al final de ésta.

Ryan Fait, un diseñador Web se tomó este trabajo y ha publicado en su sitio un pié de página al que él le llamó Sticky Footer (Pié de Página Pegajoso) que se adhiere al borde inferior del navegador incluso si el contenido es poco. Lo encuentro bastante útil y completo, ya que es compatible con los navegadores más populares: Firefox, Internet Explorer, Opera y Safari; además que el autor nos aclara que el código no tiene términos, licencias, es completamente gratis y puede ser utilizado por cualquiera que lo desee.

Publicidad, la necesaria

El diseño de un buen encabezado debe contener un banner como mucho, si llenamos nuestros encabezados y pié de publicidad opacaremos el nombre, slogan y logo de nuestro sitio, romperemos la estética y armonía del sitio logrando con esto que el usuario no se sienta a gusto en nuestra web y abandone el sitio.

Limpieza y sencillez

Un buen diseño de encabezado debe contener un logo, el nombre de nuestra web que será el que nos identifica y con éste el usuario debe de tener una idea de qué tipo de contenido tenemos publicado en ella. Si nuestro sitio representa una empresa debemos poner el slogan publicitario de ella.

Además, la inclusión de muchos efectos dinámicos como películas flash puede hacer que la página cargue con lentitud. Los encabezados cargados de efectos y animaciones resultan al usuario muy densos, molestos y rebosantes. También es importante tener en cuenta que nuestro encabezado y pié de página mantenga la armonía de diseño con el resto del sitio. Utilizando los mismos colores, el mismo tipo de letra y tamaños proporcionales en la fuente.

Generalmente los visitantes entran a nuestra web en busca de algún tipo de información y dedican para ello pocos minutos, si no encuentran lo que buscan abandonarán nuestra web y perderemos con ello un futuro visitante. Es por esto que si decidimos colocar en nuestro encabezado un menú horizontal debemos organizar los elementos por temas o categorías, ayudando a una fácil navegación.

En ocasiones tenemos en el pié de página cosas que en realidad no son útiles, como varios botones RSS o elementos que se repiten en el menú lateral de la página. Es importante mantener el encabezado y pié de página limpio de imágenes y vínculos innecesarios.

Elementos y enlaces

Pongo a su disposición una recopilación de las cosas que generalmente utilizamos en nuestros encabezados y pies de página:

Elementos y enlaces de un encabezado:

  • Logo de nuestro sitio.
  • Nombre del sitio.
  • Eslogan de la empresa.
  • Una caja de búsqueda de contenido en nuestra web.
  • Menú de navegación horizontal.
  • Un espacio para la publicidad, aproximadamente el espacio de un banner.
  • Barra de navegación que nos muestre en qué parte del sitio nos encontramos y nos permita movernos por las categorías previas.
  • A la página principal del sitio.
  • A nuestro feed RSS.

Encabezado

Enlaces y elementos del pié de página:

  • A una descripción de la empresa (Acerca de…).
  • A la página de contacto (Contáctenos).
  • Nombre del sitio.
  • Datos del Copyright.
  • Código del gestor de estadísticas (contador de visitas).

pie página

Lecturas recomendadas