Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Business

Anatomía de un sidebar perfecto – Introducción y cómo usar el mejor diseño

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Anatomy of a Perfect Sidebar.
Anatomy of a Perfect Sidebar – The Nuances of a Good Design

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Admítelo: muchos de nosotros percibimos las columnas laterales o sidebars de nuestros blogs y sitios webs como simples contenedores de cosas. Les concedemos un mínimo esfuerzo en nuestro proceso de diseño y las rellenamos sin reflexionar demasiado sobre qué lugar debería ocupar cada widget.

Pero para conseguir un sitio web bien diseñado, a la hora de trabajar con ellas, los diseñadores deberíamos considerar ciertos factores. Por ejemplo, valorar su número, su anchura y altura, el orden de los elementos que contendrán, etc.

En este artículo, vamos a estudiar la anatomía de un "sidebar perfecto".


Definición e importancia de un sidebar

Lo primero es lo primero — debemos definir qué es un "sidebar":

Un sidebar es una sección separada gráficamente que contiene fragmentos de información y elementos de navegación del sitio web.

Sí, he copiado un poco de la definición que hace la Wikipedia sobre el término "sidebar".

Los sidebars contienen elementos contextuales concernientes al contenido general del sitio web, como menús de navegación, formularios de búsqueda, o widgets de suscripción. También contienen elementos como anuncios o "citas". Son casi siempre más estrechas que la sección de contenido principal para enfatizar la importancia de este último. Su objetivo principal es ayudar al usuario a comprender mejor el sitio web y a navergarlo.

Como sistema de gestión de contenido, WordPress considera los sidebars como "áreas de widgets" en las que los desarrolladores de temas deberían permitir la ubicación de widgets WordPress.

Aunque técnicamente no son columnas "laterales", puesto que entonces las áreas de widgets que pertenecen al "footer" del tema también podrían ser consideradas como "sidebars", los sidebars también son áreas de widgets.

Para nombrar las cosas correctamente, deberían llamarse "footer widget areas" y en este artículo también hablaremos de ellas.


¿Cuántos sidebars debería usar un tema?

Como ya habrás imaginado, no hay una respuesta correcta a esta pregunta. Dependiendo de la complejidad de tu sitio web y de la necesidad de sidebars, la respuesta podría ser desde una a cuatro - o ninguna.

Un único sidebar

Single column sidebar design example: Twenty Twelve WordPress Theme
Ejemplo de diseño con un único sidebar: Twenty Twelve WordPress Theme

Probablemente la columna única sea la opción más popular para el diseño de un blog. Y dado que las páginas de un blog tienden a ser más largas al contener una lista de las entradas, contenido de entradas y listado de comentarios, este único sidebar puede contener hasta 5 o 10 elementos. No obstante, no olvides que si tu sidebar excede la altura del área de contenido principal, tendrá definitivamente un aspecto desagradable.

El sidebar puede estar situado en el lado izquierdo del área principal o en la parte derecha. No existe ninguna diferencia entre ambas pero dado que la gente lee de izquierda a derecha, las situadas a la izquierda pueden atraer más clics pero al mismo tiempo disminuyen la importancia del contenido principal, y en consecuencia, reducen la duración del tiempo de las visitas en cada página. (Lo contrario vale para los idiomas RTL, aquellos que se leen de derecha a izquierda, como el árabe o el hebreo.

Dos sidebars

Two column sidebar design example: Seventeen WordPress Theme
Ejemplo de diseño con una única columna: Tema WordPress Seventeen

El usos de dos sidebars podría ser útil para sitios web corporativos o revistas online, ya que este tipo de sitios suelen necesitar mostrar más elementos de navegación y más información que los blogs. La desventaja es que al utilizar más de un sidebar necesitarás destinar más parte del espacio total disponible a ellas, y por tanto, tendrás que reducir el área dedicada al contenido principal. Aunque puedes seguir disfrutando de dos sidebars con un enfoque responsivo: en pantallas más pequeñas a las de un portátil estándar (una anchura de 1366 píxeles), puedes mover uno de los sidebars bajo el otro.

Además, puedes hacer que uno de los sidebars sea muy estrecho haciendo que contenga únicamente iconos o enlaces formados por una o dos palabras; pero, si tu habilidad para diseñar es floja, el resultado puede quedar desequilibrado y acabar molestando a los usuarios.

Tres o cuatro sidebars

Four column sidebar design example: SmashingMagazine.com
Ejemplo de un diseño con cuatro sidebars: SmashingMagazine.com

No es necesario explicar que para usar este moelo tienes que utilizar técnicas de diseño responsivo. A no ser que desees molestar a aquellos de tus usuarios que usen pantallas menores de 1600 píxeles, tendrás que contraer o desplazar los sidebars laterales para la visualización en pantallas estrechas.

El diseño actual de Smashing Magazine es uno de los mejores ejemplos del modelo de sitio WordPress con un diseño responsivo a cuatro columnas. Conforme la pantalla se estrecha; la columna más a la izquierda que contiene la navegación principal se convierte en una navegación superior, después el segundo sidebar izquierdo se desplaza bajo la primera superior, después el sidebar principal de la derecha desaparece totalmente mientras el segundo de la izquierda vuelve a su ubicación original, y por último el segundo de la izquierda se une al del extremo izquierdo que tenemos ahora en la parte superior conformando la navegación principal (que se activa mediante un botón).

Sin sidebars

Sidebarless design example: Beyn.org
Ejemplo de diseño sin sidebars: Beyn.org

El minimalismo podría ser la respuesta correcta para cualquier tipo de sitio web. Si te gusta esta tendencia, podrías querer reconsiderar qué elementos del sidebar quieres mostrar y cuáles eliminar de tu diseño.

Después, puedes mostrar aquellos que deseas mantener en la parte inferior de tus páginas. También puedes intentar mostrarlos en la parte superior, pero esto podría ser arriesgado, ya que tendrías que desplazar el área de contenido principal bajo el "fold" — por tanto también deberás tener en cuenta la altura de la pantalla de los usuarios.

El tema que se muestra arriba es mío, diseñado para mi blog, Beyn. Siempre uso/creo temas con un único sidebar para Beyn, pero en este nuevo tema quise probar un diseño sin sidebars y resultó funcionar estupendamente: en la parte inferior de cada página, solo tengo tres widgets: una lista para "noticias", una lista con botones para la suscripción a newsletter/feed/redes sociales y un widget para los "últimos comentarios".

El beneficio de los diseños sin sidebars es que toda la atención recae sobre el contenido principal.


Continuará…

Este es el final de la primera parte de esta serie. Veremos temas como las dos dimensiones del sidebar, la ordenación de los elementos y otros temas a considerar (como colores, imágenes y tamaños de fuentes) en la siguiente parte.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.