Hace ya tiempo varias personas me pidieron un tutorial para hacer un diseño web a 3 columnas, me di cuenta que hace mucho mucho que no uso 3 columnas y despues de pensar e informarme he decidido crear este artículo.

Las webs de antes

Con antes me refiero a antes de ponerse de moda las 16:9, cuando las pantallas eran todas de 4:3 se llegó a un momento que la gran mayoría de webs contaban con 3 columnas y una cabecera.

Estas normalmente eran: un menú vertical (izquierda, por la L visual), el contenido (grande y en el centro), extras (zona de la derecha con todo aquello que quieres destacar, calendarios, botones importantes, etc).
Era algo lógico cuando tu pantalla prácticamente ¡Era un cuadrado!.

En que camino estan evolucionando las pantallas

Como todo en este mundo las pantallas estan evolucionando y mucho en su aspecto cada vez son más horizontales (y lo seguirán siendo) ya que está comprobado que cuanto más horizontal es más se está pareciendo a como vemos los humanos con lo cual decimos que vemos algo mejor en un una 16:9 que 4:3, tampoco veo necesario profundizar mucho más en este aspecto con esto es suficiente para lo que vamos a ver hoy.

¿Y ahora que?

Si las pantallas son más anchas que antes, la vista en esta se torna más horizontal con lo cual una web vertical (entre otras cosas, cuantas más columnas más verticalidad) es más incómoda de ver que una horizontal.

Con lo cual vamos a intentar que nuestro diseño de la sensación de horizontalidad.

Pero.. ¿Y en los móviles?

Hay gente que a veces me comenta: los móviles cada vez son más altos que anchos, es un gran error pensar eso, cada vez son de una resolución más ancha, ¿Que móvil moderno no permite girar su pantalla? Películas, fotos, etc. Aunque he de decir que para los móviles es mejor crear una versión móvil de la web y que el 90% de las veces las webs cuadran con la pantalla en vertical si el móvil es medianamente bueno (y su navegador).

Un diseño cómodo y lógico

Después de hablar sobre todos estos conceptos que yo creo básicos os voy a comentar como, para mi, es un diseño cómodo y lógico en la actualidad.
1.- Estaría bien comenzar por una cabecera compuesta por el logo a la izquierda y una imagen/frase/titulo a su derecha.

2.- Debajo de esta cabecera a mi me parece que queda bien el menú principal con pocas opciones y que destaquen, puedes ponerle un menú desplegable o un submenú (preferiblemente horizontales) con las demás opciones que faltan.

3.- El cuerpo (content) de la web:

Aquí es donde vienen las columnas, vosotros sois los que tenéis que decidir cuantas columnas vais a necesitar, os voy a comentar las diferentes posibilidades.
– Con más de 3 columnas: Sinceramente después de todo lo que he escrito no puedo decir más que: no lo recomiendo, en mi opinión no hay que usar esta opción.
– Diseños a 3 columnas:
Como ya he dicho no me parece lo más recomendable aunque hay dos casos, poco comunes que si podríamos usarlo. El primero serían webs con poco contenido central y muchos widgets y demás (por favor no hagas una web así gracias). El otro caso que se me ocurre es una web que quiera ser muy ancha dejando de lado anchos inferiores a unos 800-1024 px ya que ese tipo de resoluciones verían todo el contenido central muy apretado, para gustos los colores, eso si aunque tengamos una pantalla muy ancha si le pones muchas columnas va a seguir dando sensación de verticalidad ya que el contenido de cada columna se lee por separado.
– Con 2 columnas:
A mi parecer el más actual, el más utilizado y cómodo de ver.
La columna ‘grande’ la del contenido en sí a la izquierda y la derecha más estrecha una columna que puede ir bien para widgets de redes sociales, calendarios, capas para subscribirte, etc…
¿Pero no digo siempre que la L visual la encontramos a la izquierda?
Pues si de hecho es lógico ponerlo así ya que se subscribirán o te seguirán por las redes sociales después de saber de que es tu web y no antes.

– 1 Sola columna:
Lo he utilizado en contadas veces pero también se puede utilizar para gente que no quiere nada de redes sociales o widgets en general, también es útil para mostrar textos extensos o documentos online.

4.- Footer de tu web:
Es quizá la parte a la que la gente da menos importancia normalmente, ya que está ahí abajo, escondida del resto y es al último sitio que llegas.
Hace ya un tiempo me di cuenta que lo que hay que hacer con esas cosas en contra que vemos en esta parte es girarlas, dando importáncia al footer con elementos que destaquen mucho y no en pequeño como enlaces o más widgets (sin abusar) con esto consigues que la gente al pasar rápido por el footer como siempre ya que se esperan 4 frases que en cierto modo no tienen mucha importancia, encontrarán cosas vistosas y de cierta importancia cosa que hará que quizá se fijen un poco más en aquello que has decidido poner y tu no pierdes nada.


5.- barra inferior al footer (muy opcional):
Está compuesta por una línea de texto donde puedes poner cuando se ha hecho, quien es el dueño, los derechos de la web etc..

Espero que este artículo os haya servido y como siempre podéis sugerir más en los comentarios o en mi twitter o facebook.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!