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.
I like the way your homepage is set up. It has a awesome theme to it. I enjoy the graphics of your site. I wish I can create a homepage that looks as good as urs .
Y como nunca es suficiente, aporto este enlace : http://vandelaydesign.com/blog/galleries/horizontal-websites/
Saludos y excelente blog..!
Buenas!
Acabo de llegar aquí buscando como hacer un diseño de este tipo. Muy buena recopilación, sin duda es un estilo diferente, no útil para todos los casos pero si para hacer algo especial.
Por cierto, gran blog! Lo añado a mi rss 😉
Salu2
Te aconsejo que mires el código fuente, es la mejor manera de aprender. Si te fijas verás que la página está dividida en etiquetas
Pero ya te digo que la mejor manera de aprender es desmenuzar el código y ver qué hace cada una de las funciones.
Cómo se puede hacer? he buscado en la web la manera de hacerlo pero en ninguna parte lo explican para usuarios básicos como yo o rosalba, que no tenemos mucha idea de cómo lograrlo.
Si alguien conoce alguna página o blog donde lo explican paso por paso, por favor péguenlo por aquí o si se le da la gana a alguien que sepa, le pido que lo explique porfa, se lo agradecería mucho.
Saludos
Gracias Fernando.
A mi también me gusta, todavía no estoy convencido del todo, pero sinceramente me parece que sale de la monotonía y que para según qué proyectos es una solución muy buena.
En cuanto a programa, ninguno en particular, es sólo una forma de maquetar. Te recomiendo que te empapes bien de CSS y que entiendas lo que estás haciendo, huyendo de los programas que te lo hacen solos (dreamweaver y demás), ya que suelen meter mucho código de más. Yo uso el Dreamweaver, pero sólo como plataforma para escribir en formato código, de ese modo siempre tengo el control de lo que hago. Cuando tocas en modo diseño cualquier componente, acabas ensuciando código y peleándote contigo mismo sin saber por qué ha dejado de verse bien…
Aunque para gustos los colores… 😉
Hola felicidads por este tu blog de diseño web, me parece super interesante esta nuevas presentaciones de web horizontal, soy diseñador publicitario-grafico y estoy incursionando recien en web a lo mucho que programa se usa para hacer este tipo de web.
Saludos.
hola, este blog es muy muy interesante!! queria decir que quedé fascinada con este tipo de diseño, pero lamentablemente no tengo idea de como aplicarlo a mi blog.
si alguien se apiada, por favor escribame a: philopannix@yahoo.com.ar
saludos!
Webs en contra de la corriente? jajaj
Por lo menos tienen otro punto de vista…
Recomiendo esta web tambien:
http://www.ctrln.com.ar/
hola,
Sumo otro ejemplo de Diseño web horizontal, es una página muy interesante la cuál puede ser de mucha utilidad
http://www.bluevertigo.com.ar
Saludos!
Hola
Estuve visitando tu Blog y está excelente, permíteme felicitarte.
Sería un gusto contar con tu blog en mi directorio y estoy segura que para mis visitas será de mucho interés.
Si lo deseas no dudes en escribirme
Exitos con tu blog.
Un beso
Jackie
Una web tuve que crear una intranet de ese tipo, quedo bastante bien la verdad, en cuanto a usabilidad fue un gran trabajo.