Estructura de una Página Web desde 3 Enfoques

La estructura de una página web es una de las principales dudas que surgen al iniciar el proceso de creación de un sitio.

Pero… ¿qué estructura?

Si es tu primera web, seguramente tu preocupación sobre la estructura se refiere a las páginas que debe contener ese sitio para proporcionar toda la información que quieres ofrecer.

En casos un poco más avanzados, lo que rondará tu cabeza será más bien cómo estructurar cada una de las páginas para que se vea limpia, ordenada y al mismo tiempo muestre todo lo que necesitas mostrar.

Tanto un tipo de estructura como la otra son igual de importantes y están presentes en todo tipo de webs.

Aunque claro… no todas los sitios son iguales y, por tanto, tampoco la estructura de todas las páginas web.

De todo esto es de lo que te voy a hablar en el artículo de hoy. Así que si todavía estás pensando en la estructura que debe tener tu web, sigue leyendo, porque encontrarás información muy valiosa.

Tipos de Páginas Web

Antes de empezar conviene recordar que existen muchos tipos de webs según distintos criterios. Cada uno de ellos tiene unos objetivos, unas necesidades y, por supuesto, una estructura diferente.

Por eso en este primer punto vamos a repasar los tipos de sitios web según la finalidad que le suelen dar los emprendedores, autónomos y pequeños empresarios.

Estática, modelo tarjeta de visita

El tipo de página web más básico es el que yo llamo «modelo tarjeta de visita». Son esas webs donde sólo encuentras información estática básica que no cambia nunca o muy de cuando en cuando: Horarios, servicios, ubicación…

Sin embargo, nunca hay información actualizada, ni sobre el sector ni sobre el propio negocio. Como mucho, alguna noticia suelta sobre una feria en la que se puso un stand o el enlace a una entrevista en un periódico local.

Son webs que en muchos casos están programadas directamente en HTML porque no necesitan base de datos, ni ninguna exigencia técnica específica. No obstante, yo siempre recomiendo utilizar un CMS aunque sea para algo básico. De esta forma si en el futuro se quiere subir un escalón, no habrá que comenzar el proyecto desde cero, ni complicarse la vida, sólo hará falta mejorar lo existente.

¿Es útil este tipo de web?

Sí, si lo que pretendes es que tus potenciales clientes encuentren información sobre ti cuando buscan tu nombre en internet, o tener un sitio al que remitir cuando alguien te pide información de cómo llegar, por ejemplo.

Dentro de mis servicios, este tipo de web se denomina «Presencia Online» precisamente porque es lo que proporciona.

Corporativa, para darte a conocer

El segundo tipo de página web es el corporativo. Esas páginas no sólo buscan proporcionar información básica, sino también dar a conocer la empresa, generar interés por sus productos o servicios y hacer crecer el negocio.

Suelen ser mucho más dinámicas que las anteriores, con un blog que se actualiza con cierta periodicidad, ofreciendo contenidos que pueden ser relevantes para el público objetivo y menos centrados en la propia empresa.

Estos contenidos suelen tener como objetivo despertar el interés de los potenciales clientes y también su captación a través del posicionamiento en buscadores de cada uno de ellos.

Es frecuente que incluyan formularios para captar suscriptores e, incluso, algún método de venta off-page, tipo SendOwl o Hotmart. Sin embargo, lo más habitual es que busque cerrar las ventas mediante trato directo con el cliente, ya sea a través de email, teléfono u otros medios.

He llamado a este tipo de web «Profesional», ya que su principal objetivo acostumbra a ser demostrar la profesionalidad de quien está detrás, para captar clientes.

De Negocio, para quien va a por todas

El último tipo de página web, según las finalidades más frecuentes, es la que busca generar negocio directamente en el sitio.

Puede ser una tienda online, una academia virtual, un membership site, una página de reservas… Las posibilidades son muchísimas y dependerá de la naturaleza de cada empresa.

Lo que tienen en común es que pretenden cerrar la venta dentro del propio sitio, con la menor interacción con el cliente. Es decir, que esté lo más automatizada posible y que la relación se limite a la ejecución del servicio o el envío de productos, pero no al proceso de compra.

En mi catálogo puedes encontrar este tipo de web como «Facturación», con diferenciación entre tienda online y otros sistemas más avanzados.

Estructura de una Web, Páginas que debe contener

Cabe destacar que a la hora de planificar cómo organizar el contenido de una página web hay muchas alternativas según el objetivo del sitio.

No obstante, no entraré a analizar los diversos tipos de estructura web, ya que suele ser una cuestión de la que se preocupan usuarios más avanzados y no quienes están empezando.

Por tanto, simplemente me limitaré a explicarte cuáles son las páginas que habitualmente forman parte de la estructura de una página web.

Home o Portada. Imprescindible en la Estructura de cualquier Página Web

Y tan imprescindible, ya que es la página principal del sitio. A donde llegas cuando escribes en el navegador el dominio, sin ningún dato adicional. Es decir, todas las webs tienen una home, inicio, portada o índex, como se le quiera llamar.

¿Y qué debe contener? Pues eso ya depende del tipo y objetivo de la web.

Como mínimo debería dar información clara de qué puede conseguir el visitante en esa web. Por ejemplo, cuando entras a mi home lo primero que ves es una frase que dice claramente a qué me dedico:

Sé que puede parecer una obviedad, pero ni te imaginas la cantidad de webs que se pierden en sliders con ofertas, diseños llamativos y contenidos enrevesados sin decir clara y abiertamente a qué se dedican.

A partir de ahí, puedes utilizar el inicio como mejor cumpla tus objetivos:

• Captar leads para tu lista.
• Mostrar los contenidos monetizables más destacados o recientes.
• Listar los productos nuevos, los más vendidos, los que mejores reseñas tienen.
• Explicar quién eres, qué haces y cómo lo haces.
• Vender un producto destacado.
• …

En realidad, la home lo soporta casi todo. Eso sí, no metas contenido por meter. Valora qué necesita tu proyecto realmente y cíñete a eso.

3 ejemplos de Portada

En la home de esta web el objetivo es captar leads, ya que dada la naturaleza del servicio que ofrezco, es complicado que alguien contrate en su primera vista. De ahí que mantener el contacto sea primordial.

Sin embargo, en elsuperhincha.com lo que interesa es que la gente navegue por los diferentes artículos, donde hay publicidad y venta de afiliados, así que la home es totalmente distinta.

Tampoco es igual la de acupunturalaura.com, donde lo que se pretende es hacer ver al usuario, desde el principio y sin esfuerzo, que la acupuntura puede ayudarle. Esto debería desencadenar la curiosidad para que quiera saber más hasta cerrar un contacto telefónico de información y venta.

Son sólo 3 ejemplos de los muchísimos que puedes utilizar. Para verlos, haz clic sobre cada imagen para ampliarla:

Quiénes Somos / Sobre Mí

Ambas son la misma página. Se denomina «Quiénes somos» en empresas corporativas o formadas por varios miembros, y se convierte en «Sobre mí» en webs de empresarios individuales o que representan la marca de su compañía.

Es la página donde dar a conocer quién eres, qué haces y cómo puedes ayudar a tu cliente. Pero ten en cuenta que…

• A pesar del título, es una página que debes orientar al usuario. No la conviertas en un yo, mí, me, conmigo.
• Queda fatal que te refieras a ti o tu empresa en tercera persona, como si lo escribiera alguien que no tiene nada que ver.
• No es un currículum donde poner todos tus títulos y experiencia anterior.
• Siempre debes cerrar con una llamada a la acción. El visitante debe saber cuál es el siguiente paso después de conocerte.

Productos o Servicios

Esta página dependerá un poco del tipo de web y empresa, aunque como su propio nombre indica, es en la que especificas qué productos y/o servicios pones a disposición del cliente.

Por lo general, debes utilizarla como un índice, con unas breves pinceladas de cada uno y un enlace que lleva a una página específica para cada servicio o producto.

Puede que se llame de otra manera, como por ejemplo, en un eCommerce, donde la página de productos es la portada del catálogo y, por tanto, se denomine sencillamente tienda.

Y en una web con un único producto o servicio cabe la posibilidad de que no exista como tal, sino que la información aparezca directamente en la home o un landing page.

Contacto

Esta es la típica página con los datos de contacto y, frecuentemente, con un formulario desde donde el usuario puede enviar su mensaje sin necesidad de iniciar sesión en su propio email.

Si tienes un negocio físico, puedes combinarla con la página «Dónde estamos», incluyendo en ella la dirección física, un mapa y los horarios.

Muchas webs que sólo operan de forma digital optan por eliminarla de su estructura y poner la información de contacto en el pie de todas las páginas del sitio.

Blog

Más que una página, el blog es un listado de contenidos ordenados según su fecha de publicación, desde los más recientes a los más antiguos. Seguro que sabes de qué te hablo. Si no, aquí está el de esta web para que te formes una idea.

No está presente en todos los tipos de web. Por ejemplo, las páginas estáticas suelen prescindir de él y algunas tiendas online también.

No obstante, cabe mencionar que es una de las mejores herramientas para lograr visibilidad en Google, crear cierta autoridad dentro de tu sector y tener siempre algo fresco para compartir en redes sociales, si es que las usas.

Eso sí, requiere implicación o inversión económica para encargar los contenidos.

Páginas Legales

Aunque habitualmente pocos usuarios las leen, las páginas legales deben estar presentes siempre, según las necesidades de cada sitio:

Política de Cookies

Sólo es necesaria cuando utilizas cookies no exentas. Sin embargo, la mayoría de sitios utilizamos, como mínimo, Google Analytics y el Píxel de Facebook, así que ya estamos usando cookies sobre las cuales debemos informar y solicitar consentimiento.

Como de esto ya te hablo largo y tendido en la Guía «Cumple hoy mismo la Ley de Cookies en WordPress», no me extenderé.

Por cierto, en esa guía encuentras un modelo de política de cookies listo para copiar, pegar, incluir los datos de tu web y publicar.

Política de Privacidad

Es el texto legal donde debes explicar a tus usuarios qué datos personales recoges, con qué finalidad, cuánto tiempo los vas a guardar, con quién los compartes…

En principio sólo necesitas tenerla cuando recopilas algún tipo de dato personal. Por ejemplo, formularios de suscripción a la newsletter, de contacto, si pides información para dejar comentarios…

Ten en cuenta que nombre de pila, correo electrónico y dirección IP se consideran datos personales, por tanto, será casi inevitable que necesites una política de privacidad.

Condiciones Generales de Contratación

Esta página sólo necesitas incluirla en la estructura de tu página web cuando vendes directamente en ella. Por ejemplo, tiendas online o webs donde se puede contratar un servicio.

En esencia, es el contrato que se formaliza entre tú y tu cliente, por eso siempre debes procurar que lo acepte de una manera explícita.

Condiciones de Uso

Son las normas de conducta que tú estableces para tu sitio y pueden afectar tanto a clientes como a visitantes que no tienen ninguna relación contractual contigo.

Tienen cabida en cualquier tipo de web, aunque son más habituales en aquellas donde el usuario interactúa de alguna manera: Dejando comentarios, subiendo contenidos…

Algunos ejemplos de cláusulas que puede contener esta página serían: Requisitos para crear un usuario gratuito, limitación de contenidos que se pueden subir, normas de etiqueta, notificación de derechos de autor…

Aviso Legal

El aviso legal es la página donde informas quién eres, recopilas todos los documentos anteriores (los que tengas que incluir en tu página web) y añades cualquier otra información relevante que no tenga cabida en el resto de textos legales, como por ejemplo, información sobre autorizaciones especiales de la actividad, descargos de responsabilidad, códigos de conducta a los que te acoges…

Otras Secciones de la Estructura de Páginas Web

La estructura de una web puede tener (o no) otros muchos tipos de páginas, como por ejemplo:

• Landing Pages o Páginas de Aterrizaje. Cuyo objetivo es conseguir que el usuario haga una única acción, ya sea comprar, registrarse o cualquier otra. Las landing pages que buscan el registro de usuarios a una lista, también se denominan Squeeze Pages.
• Página de Ayuda y/o Preguntas Frecuentes.
• Portafolio.
• Colaboraciones y Presencia en Medios.
• Testimonios de Clientes.
• Mapa del Sitio.
• Métodos de Pago y Envío y Política de Devoluciones, en comercios electrónicos.

La lista es interminable, ya que cada negocio es un mundo. Pero en general, has visto los tipos de página más frecuentes en cualquier estructura web.

Partes de una Página Web Individual

Además de saber qué contenidos debes incluir en tu portal, también necesitas estructurarlos correctamente dentro de cada página.

En general, hay 4 partes de una página web en las que debes centrarte:

Header o Cabecera

El header es la parte superior de la web, común a todas las páginas del sitio.

En esta área aparecen el nombre de la web y/o su logo, así como el menú principal de navegación. Adicionalmente, puede contener una caja de búsqueda, algún menú secundario, botones de redes sociales…

Body o Cuerpo

El cuerpo es la parte de una web donde se muestran los contenidos propiamente dichos de una página.

Este texto que estás leyendo está en el body.

Es la parte más dinámica, ya que cambia en todas las páginas del sitio.

Sidebar o Barra Lateral

Aunque se suele denominar barra lateral, porque es su ubicación más frecuente, en realidad un sidebar puede tener otras posiciones dentro de la web, como encima o debajo del contenido, por ejemplo.

Hace unos años, la posición más frecuente para el sidebar era el lado izquierdo de la pantalla, sin embargo, fue cambiando paulatinamente para, ahora, predominar a la derecha.

En los últimos tiempos, y con la incursión de la navegación móvil, cada vez más webs prescinden de esta área.

La barra lateral suele utilizarse para mostrar información y contenidos de distintos tipos:

• Formularios de registro.
• Contenidos destacados o recientes.
• Filtros de productos.
• Menús secundarios.
• Banners publicitarios.
• Etc.

Footer o Pie de Página

La última zona de las principales partes de una web es el footer, o pie de página.

Es equivalente al header, pero al final de cada pantalla. Precisamente por su ubicación, lo habitual es que contenga información menos destacada, aunque esto no quiere decir que no sea importante.

El footer es la zona donde habitualmente se colocan los enlaces a textos legales, créditos de la web, enlaces que salen del sitio, datos de contacto…

Una vez más, en cada proyecto se debe valorar qué información debe incluir en esta parte o si debe dejarla libre.

Estructura de Páginas Web dentro del contenido

Hay un tercer nivel de estructura web al que no se le suele prestar demasiada atención, y es la estructura proporcionada por los encabezados.

Si te fijas, al crear un nuevo encabezado, o titular, junto al H2 marcado por defecto, aparece una escala numerada del H1 al H6.

Esto son distintos niveles de títulos que puedes utilizar dentro de la web para crear una estructura jerárquica.

Como regla general, el H1 suele ser el título de la propia página, por lo que no deberías usarlo dentro de los contenidos que estás creando.

Los H2 son los subtítulos que estructuran el texto que estás escribiendo. Son los más importantes por detrás del H1.

Si necesitas subdividir el contenido de un H2 en apartados más cortos, debes utilizar encabezados H3. Y así sucesivamente hasta donde necesites, con el límite de H6.

Es importante que respetes esta jerarquía y que no utilices los encabezados con la única finalidad de resaltar texto.

Utilizarlos de forma errónea no sólo puede hacer más confuso el contenido, sino que puede perjudicar a tu posicionamiento en buscadores y será complicado de seguir para los navegadores utilizados por personas con discapacidad visual.

Conclusión

Ya ves que cuando hablamos de «estructura de una página web» podemos referirnos a varias cosas: Contenidos que debe incluir, partes dentro de cada pantalla e, incluso, jerarquía de los contenidos.

Y aunque en este artículo he intentado aclararte todas ellas, es imposible abarcar con exactitud lo que cada sitio web necesita, ya que cada proyecto es un mundo.

Si todavía estás a vueltas con tu sitio y quieres ahorrarte estos y otros quebraderos de cabeza, ponte en contacto conmigo. Te ayudaré a elegir el mejor tipo de web para ti y, por supuesto, a desarrollar la estructura más adecuada, entre otras configuraciones. Ahorrarás tiempo y tendrás tu web lista en poco tiempo.