{"id":23362,"date":"2020-05-20T09:27:18","date_gmt":"2020-05-20T09:27:18","guid":{"rendered":"https:\/\/madridnyc.com\/?p=23362"},"modified":"2020-05-20T09:48:25","modified_gmt":"2020-05-20T09:48:25","slug":"elementos-header-y-footer-web","status":"publish","type":"post","link":"https:\/\/madridnyc.com\/es\/elementos-header-y-footer-web\/","title":{"rendered":"\u00bfQu\u00e9 elementos no pueden faltar en el header y footer de una web?"},"content":{"rendered":"

Una p\u00e1gina web consta de una estructura, que est\u00e1 formada por diferentes partes. Pero es cierto que hay muchos tipos de web, dependiendo del tipo de negocio o de los objetivos de cada uno.<\/p>\n

Es decir, no es lo mismo la web de un ecommerce que una web corporativa o que un blog de cocina. Sin embargo, a pesar de esto, la estructura de todas estas tiene elementos en com\u00fan.<\/p>\n

En una p\u00e1gina web podemos diferenciar tres partes: header o cabecera, body o cuerpo y footer o pie de p\u00e1gina. Pero hoy en este post vamos a centrarnos en dos de ellas, ya que muchos tienen dudas sobre qu\u00e9 elementos son necesarios incluir en el header para que su web sea efectiva, as\u00ed como tambi\u00e9n muchos se olvidan de la importancia del footer.<\/p>\n

<\/div>\n
\n
\u00bfQu\u00e9 elementos debes incluir en el header y footer de tu sitio web? Desc\u00fabrelo v\u00eda @MadridNY<\/a><\/div>\n

Click To Tweet<\/a><\/p>\n

<\/div>\n<\/div>\n

\u00bfQu\u00e9 es el header y footer de una p\u00e1gina web?<\/h2>\n

El header es la parte superior de la web y en ella debe aparecer la informaci\u00f3n principal y b\u00e1sica de la empresa. El header se repite en cada p\u00e1gina de la web, igual que el footer.<\/p>\n

Por su lado, el footer es la parte inferior de un sitio web y se trata de un elemento permanente, aparece igual en cada una de las p\u00e1ginas. En el footer, la informaci\u00f3n que encontrar\u00e1 el usuario ser\u00e1 sobre informaci\u00f3n legal, el sitemap, las redes sociales, entre otras que veremos m\u00e1s abajo.<\/p>\n

\u00bfPara qu\u00e9 sirven?<\/h3>\n

El header busca una mayor usabilidad para el usuario, ya que refiri\u00e9ndonos al header, el men\u00fa es uno de los elementos que ayuda al usuario a encontrar lo que est\u00e1 buscando en todo momento.<\/p>\n

Al igual que el header, el footer sirve para mejorar la usabilidad del usuario. Adem\u00e1s, la inclusi\u00f3n de enlaces y men\u00fas, mejorar\u00e1 el posicionamiento seo.<\/p><\/blockquote>\n

Toda la informaci\u00f3n reunida en el footer, generar\u00e1 confianza en el usuario, ya que los datos de contacto como el email, el tel\u00e9fono o las redes sociales les transmite que es una web segura.<\/p>\n

Elementos a incluir en el header<\/h2>\n

Dependiendo de tu tipo de web y de cu\u00e1les sean tus objetivos (conversi\u00f3n, branding o tr\u00e1fico), deber\u00e1s incluir en el header de tu web aquellos elementos que consideres relevantes.<\/p>\n

A continuaci\u00f3n, te mostramos algunos, pero esto no quiere decir que debas incluir todos ellos:<\/p>\n

1. Logotipo<\/h3>\n

Un elemento de branding por el que el usuario te identificar\u00e1 r\u00e1pidamente es el logo<\/a>. Adem\u00e1s, este ser\u00e1 el gr\u00e1fico por el que tus visitas te recuerden.<\/p>\n

Este puedes colocarlo en el centro, por encima del men\u00fa; en el centro, pero alineado con el men\u00fa (integrado como si fuera parte del men\u00fa); o situarlo a un lado, a la izquierda o a la derecha (es el m\u00e1s habitual).<\/p>\n

Independientemente del que elijas, recuerda enlazar tu logotipo con la home de tu sitio. P\u00f3nselo f\u00e1cil a tu usuario siempre.<\/p><\/blockquote>\n

2. Men\u00fa<\/h3>\n

Este es otro elemento que no puede faltar en un header, ya que es el que gu\u00eda al usuario en su navegaci\u00f3n por la web. Puedes optar por un \u00fanico men\u00fa o uno doble, depender\u00e1 de si tu web tiene muchas secciones o si tu ecommerce tiene infinitas categor\u00edas.<\/p>\n

Pero en caso contrario, te recomendamos que optes por el men\u00fa sencillo para que el usuario no se pierda.<\/p><\/blockquote>\n

3. Buscador<\/h3>\n

Muy funcional para que el usuario busque a trav\u00e9s de palabras clave lo que anda buscando de forma r\u00e1pida. Este puedes mostrarlo de diferentes formas, como una lupa o como uan barra de b\u00fasqueda. Y lo habitual es colocarlo al lado del men\u00fa o del logo.<\/p>\n

4. Redes sociales<\/h3>\n

Si tu marca tiene presencia en redes sociales y has trabajado bien tu marca en estas, tal vez te interese destacar tus perfiles de redes sociales. Lo puedes hacer en el header, en el footer o en ambas. Estos son los sitios a los que el usuario acude para buscarlas.<\/p>\n

Si tu perfil de Instagram<\/a> lo tienes descuidado, no tiene sentido que lo incluyas, ya que dar\u00e1s un imagen de abandono.<\/p><\/blockquote>\n

En cambio, si tu perfil de Facebook lo tienes muy activo y cuidado, incluye esta red social, sin quitar protagonismo a otros elementos que son m\u00e1s relevantes para que el usuario siga navegando por la web.<\/p>\n

5. Datos de contacto<\/h3>\n

Igual que con los perfiles de redes sociales, otros datos de contacto importantes son tu tel\u00e9fono y tu email. Estos puedes colocarlos en la misma l\u00ednea donde se encuentran tus redes, en un lugar m\u00e1s reservado; sin quitar protagonismo por ejemplo al men\u00fa o a una llamada a la acci\u00f3n.<\/p>\n

6. Botones destacados<\/h3>\n

Si quieres destacar alg\u00fan servicio o tienes inter\u00e9s en guiar al usuario a una landing espec\u00edfica (registrarse a una plataforma o pedir presupuesto de un servicio), esta opci\u00f3n es ideal para llamar la atenci\u00f3n del usuario.<\/p>\n

Otros elementos a tener en cuenta en el header son:<\/p>\n