Un espacio para los entusiastas del web

Desarrollo de un buen encabezado y pie de página para tus sitios web

Publicado el 27 de Diciembre, 2007

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

Otros artículos relacionados

Califica esta nota:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (10 votos, promedio: 4.10 de 5)
Loading ... Loading ...

Comentarios

  1. mecano

    Realmente interesante esta “guia” de encabezados y pie de paginas en paginas web, pero a un mas interesante el dato de los footer automáticos por Hoja de estilo “CSS” genial.


  2. Paul

    Bueno el articulo pero no concuerdo con lo de las hojas de estilos y , luego de invertigar mucho sobre que utilizar encontre este articulo, pongo el link por si no aparece completo: http://forums.searchenginewatch.com/showthread.php?t=11695

    el articulo:
    I have a little story to tell about the webmaster who used a table with DIVs and the webmaster who didn’t. The webmaster who didn’t use a table had the higher paying job, a big house, a nice car, and a hot wife because he got all the good jobs for his tableless designs. The webmaster who used tables only to insert his DIVs was considered a second-rate bum and many believed he didn’t even know how to position his DIVs. He made very little money. He lived in a rundown apartment. He had no car, and he had no wife.

    Then oneday the webmaster who had a classy job and the ever-so-popular tableless designs one day was sitting at his desk smoking a cigar talking on his cell phone about where to meet his buddies for lunch when his boss came running in all excited and out of breath.

    “We just got a whole bunch of affiliate partners that want to place ads on our pages so they can make money and we can make commissions! We want an entire column added to the right side of every page!”

    Now the site had been around for several years and there were thousands of pages of content to add this column to, and the pages were all written in DIVs. So, the webmaster gasped and dropped his phone as the cigar fell from his mouth and he said, “Well, that is going to take some time, I got to place new DIV tags on every page to add one column of ads and that is no easy task!”

    The boss lamented this news, because not only would that mean he would not be making money off of his affiliates until the job was done, but he would have to hire someone else to assist the webmaster with his work until the site was updated. So, trying to save some money and not wanting to take a lot of time to hire someone on a contract, he hired the poor unsuccessful webmaster who always used tables to position his DIVs.

    The poor and destitude webmaster reluctantly decided he had no choice but to accept the tedious task, because he needed the money. So, for nearly a month he labored on inserting the appropriate DIVs on each page, copying and pasting many times into each page. When it was all said and done he went to the boss, and he shook his head and said, “You know it took a lot of copying and pasting to insert all them new DIV tags…If the site had been designed with a table I would have only had to copy and paste once into each page to insert the new column. You would have made a lot more money instead of having to hire someone else on, and it would have saved me from a lot of headaches going vertigo looking at code. I hope you never have to add a column again, for your sake and mine.”

    The boss shook his head, and stopped the man before he could go. “Wait!” he said. “I could have been making tens of thousands of dollars a day all this time if you had done my site with tables?”

    The tired and frustrated impoverished webmaster nodded with a grim expression, and the boss threw up his hands and rolled his eyes. Racing out of his office, he motioned for the poor webmaster to follow after him as he charged into the rich webmaster’s office. The rich webmaster was polishing his W3C Validation pin on his suit jacket as they entered and he smiled saying, “So, did the columns get added to all the pages?”

    “Yes!” shouted the boss, “but you’re fired! I got me a new webmaster right here who is going to make sure I never lose money adding a column of ads again!”

    Now, the poor webmaster is no longer poor, and the rich webmaster is no longer rich. He lost his big house. He lost his nice car. He lost his hot wife, because she only loved him for his money, and he is in the psyche ward for going nuts and breaking computers at a department store.

    Saludos, :D


  3. Gerardo

    Hola,
    Personalmente siento como un crimen incluir un banner en el header, mas si es administrable, y termina ese encabezado con un cartel animado, creo que eso es lo peor que le puede terminar pasando a cualquier diseño pensado y elaborado.

    En fin, con el tiempo las resoluciones standar de pantalla seran otras, los espacios reales tambien aumentarian y terminarian desapareciendo esos sitios repletos de publicidad, tipo coches de Formula 1.

    Agrego un elemento a tu lista para el encabezado, links simples de Login y registrarse, a mi criterio es el mejor lugar para incluirlos.

    Buen artículo, saludos!


  4. Gerardo

    Eemm… no los sitios formula 1 no van a desaparecer nunca… van a estar siempre ahi como ejemplos de lo que no se debe hacer =)

    Saludos


  5. Pues a mi me parece que es algo estetico al desarrollar un sitio pero en ocasiones las politicas de clientes o empresas te obligan a incluir mucha publicidad :S, espero que estas personas vayan leyendo algo de usabilidad de un sitio web :) saludos


  6. Siempre hay que mantener la estética en la medida de lo posible pero si que es verdad que aveces los clientes no entienden eso.


  7. Que tal estaran mis sitio, jejejej buenose le avona unmas uno a maestros del web.. siempre tienen muy buen material. xD


  8. Jose Luis

    Holas Maestros del web, holas saludos a todos,queria saber como podria que mis codigos HTML reconosca mis botones creados en flash, o como puedo crear botones animados para adornar mi pagina web… gracias


  9. La publicidad es la forma de financiar los sitios webs, por eso el pie de página lleva publicidad en muchas ocasiones.


  10. No debe incluirse mucha publicidad en los sitios nuevos, y menos en los encabezados, sería un crimen porque los usuarios saldrán corriendo.


  11. al

    pos esta bueno lo voy a intentar sale.

    vean mi web http://www.ideasporti.es.tl


  12. well done. i’am gonna return in some time for sure


  13. REalmente lo importante es la limpieza y claridad de los contenidos.
    El visitante busca información clara, rápida, fácil de encontrar, y con un orden claro y accesible.
    El resto realmente lo que hace es marearle y hacer perder el tiempo al usuario.
    Cada vez que entro en una web totalmente colapsada de información y con la temática muy enrevesada y dificil de encontrar, automáticamente busco una alternativa más clara.

    No se si os pasa también?

    Elisabet
    http://www.viajesyvacaciones.net


  14. la puta de tu vieja si lo les eres un hijo de puta


  15. manuel

    como tengo mi pagina web????


Deja tu Comentario

Maestros del Web se reserva el derecho de moderación de los comentarios. Evita utilizar palabras soeces, ataques directos, descalificativos, insultos, de lo contrario tu comentario será eliminado.


Sobre el Autor

Reynier Matos Padilla

Reynier Matos Padilla
Administrador de sistemas y diseñador web. Con experiencias en tecnologías ASP.NET, PHP, Javascript, CSS, DHTML, AJAX, servicios web, y XML.

Más artículos de Reynier Matos Padilla

Las Notas en tu correo


Acerca de

Maestros del Web nace cuando intentamos traducir Webmaster al Español. Nacimos orientados al diseño y desarrollo web. Hoy somos un espacio de apoyo para los entusiastas que participan en proyectos en la red.
Leer más de Maestros del Web