Diseño Web Horizontal

Diseño Web Horizontal

Hace ya tiempo que tenía ganas de hablar del diseño web horizontal.

Lejos de las creencias de los llamados “gurús” de la usabilidad, han ido proliferando muchas web relacionadas con el diseño, fotografía, revistas,… En las que en lugar de tener que desplazarse verticalmente por el sitio web, el desplazamiento se hace de modo horizontal.

En este tipo de webs nos encontramos con algún problemilla.  El primero es que lo normal es que nuestro ratón sólo tenga scroll vertical, por lo que tendremos que ir desplazando manualmente el scroll de la barra del navegador, pero vamos a ver algún ejemplo en el que esto se soluciona de un modo perfecto.
El segundo y quizás el más importante, es que debemos de indicar de algún modo al usuario, que se encuentra en una web distinta, que si quiere más contenido tendrá que desplazarse horizontalmente.
Una solución, sería hacer un corte en la página, de modo que se dejase ver que hay más contenido hacia la derecha, por ejemplo, con un contenido cortado por la resolución de pantalla, pero tendríamos que tener presente las distintas resoluciones de pantalla para que esto funcionase. Así que lo normal es encontrarnos con unas flechas dibujadas que nos indican el desplazamiento.

En estos ejemplos podréis ir viendo cómo ha ido evolucionando este tipo de webs, desde el Html con tablas, hasta el uso de CSS.

La primera vez que me encontré con una web horizontal, fue la newsletter de Le Cool Magazine, sorprendente e innovadora (ver ilustración al principio del post). Desde entonces, varias han sido las que han ido incorporándose a mi lista de favoritos, estas son quizás las más relevantes:

URBAN OUTFITTERS: BLOG – Como podréis ver en la mayoría de estos sites horizontales, las grandes fotografías toman una relevancia indispensable, de este modo, además de conseguir un mejor diseño, mantenemos la atención del usuario.

Ejemplo horizontal de Blog

PORTFOLIO DE STEPHANE TARTELIN – Un portfolio en el que el autor mantiene fija una capa con la navegación y otra en la que mediante scroll horizontal, va mostrando los contenidos.

Ejemplo horizontal de portfolio

LES HAUTES-MYNES DU THILLOT – Una web francesa con un diseño espectacular, con la particularidad de que el menú nos persigue en nuestro desplazamiento por los contenidos. Además maquetada sólo con capas.

Ejemplo de web horizontal maquetada en capas

SARAH RHOADS – Genial Blog personal. Genial maquetación en capas, y genial forma de indicar el desplazamiento horizontal al usuario.

Ejemplo de cómo se hace una web horizontal

SURSY – Buenísimo ejemplo de maquetación en capas y con una particularidad sobre las demás. En este caso, el scroll del ratón será el que nos permita navegar por la web.

Ejemplo de cómo navegar con el scroll del ratón

PAOLO BOCCARDI – Otro ejemplo buenísimo, en el que el autor, además de tener el desplazamiento por scroll de la web, tiene una serie de enlaces “ancla” que nos desplazan al lugar elegido. Además de esto, cada vez que pulsamos sobre una fotografía, automáticamente, la web se desplaza hacia el siguiente bloque.

Ejemplo de ayudas al desplazamiento horizontal

SNOHETTA – Y como no podía faltar, aquí tenemos un ejemplo realizado en flash.

Ejemplo de web horizontal en flash

En conclusión, no creo que pueda considerarse una tendencia, ya que se trata de un diseño muy particular, pero con estos ejemplos creo que queda claro que da cabida a varios tipos de contenidos y que sobre todo, aunque sea por ir contra corriente, llama la atención del usuario.