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.
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).
Lecturas recomendadas
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.
[…] MAESTROS DEL WEB he encontrado un buen artículo sobre el desarrollo de un buen encabezado y pie de página […]
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, 😀
[…] Fuente :: Diseño de encabezado y pie de página […]
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!
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
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
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.
Que tal estaran mis sitio, jejejej buenose le avona unmas uno a maestros del web.. siempre tienen muy buen material. xD
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
La publicidad es la forma de financiar los sitios webs, por eso el pie de página lleva publicidad en muchas ocasiones.
No debe incluirse mucha publicidad en los sitios nuevos, y menos en los encabezados, sería un crimen porque los usuarios saldrán corriendo.
pos esta bueno lo voy a intentar sale.
vean mi web http://www.ideasporti.es.tl
well done. i’am gonna return in some time for sure
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
la puta de tu vieja si lo les eres un hijo de puta
como tengo mi pagina web????
Hola, les agradesco la informacion, en mi busqueda por enrriquecer mis propuestas de web, me he encontrado con datos interesantísimos que salen de mi función “estética” de diseño.
Lo del encabezado estaba dentro de mis conocimientos, estaba en busca de buena información para los piés de página, gracias, saludos.
EStan bien la informacion de encavezado y pie de pagina, pero quisiera saber como lo hago o que codigo utilizo para poder utilizarlo en otras paginas
Hola muchas gracias por la informacion! sobre encabezado y pie de un sitio web. Actualmente me encuentro desarrollando un sitio web como proyecto escolar. Tengo una gran duda que hasta ahora no me han podido dar solucion. “Centrar una pagina web” sin importar el Explorador o la resolucion de la Pantalla!. Algo que me ha llamado mucho la atencion en este sitio! Te lo agradeceria mucho si me pudieras ayudar con ese pequeño problema!
Mi pagina web trata de cantantes,peliculas,imagenes y musica.Para meteros en mi pagina web teneis que poner en google la palabra JIMDO el primer resultado que te salga le das…entonces te habras metido en la pagina web de jimdo. Arriba, donde pone foro,paginas..etc. Le das a paginas y te salen todas las páginas web que ha creado la gente. La que se llama: siempredivina.jimdo.com esa es.
buena web