06/11/2013

Diseñando sitios web con efecto de paralaje

Diseñando sitios web con efecto de paralaje

En diseño web, el efecto de paralaje consiste en otorgar sensación de tridimensionalidad a través del uso de elementos que parecen desplazarse en planos diferentes. En los sitios web que utilizan este recurso, cuando hacemos scroll (horizontal o vertical) diferentes objetos entran o salen de la pantalla en un nivel de profundidad superpuesto al del fondo.  En el sitio de los premios Awwwards hay muchos ejemplos increíbles que demuestran el potencial de esta modalidad de navegación, generalmente posibilitada por HTML5, CSS3 y JavaScript.

El efecto de paralaje es una de las tendencias más fuertes en el mundo del diseño web, pero antes de aplicarlo es bueno conocer tanto sus ventajas como sus desventajas.

  • Entretenimiento. El efecto de paralaje nació en los videojuegos de plataformas de los años 80. Por eso, es de esperar que los sitios web que utilizan este recurso sean muy divertidos y dinámicos.
  • Velocidad. Generalmente, los sitios web con efecto de paralaje tienen una sola página. En ella se concentran todas las secciones del sitio, permitiendo aplicar increíbles animaciones de transición para pasar de una a otra. Al estar todo el contenido en la misma página, se evita realizar nuevas peticiones al servidor. Sin embargo, las animaciones son complejas y suelen tardar mucho en cargar.
  • Experiencia de usuario. Las páginas con efecto de paralaje son como una película que debe reproducirse de principio a fin: para llegar a una sección dentro de la página, se deben atravesar las que vienen antes, a través del scroll. La ruta de navegación queda totalmente controlada por el desarrollador, pudiendo brindar exactamente el mensaje que quiere transmitir. Sin embargo, es probable que cuando el usuario vuelva a entrar al sitio no quiera volver a reproducir toda la animación para obtener la información que necesita. Hay que evitar que la secuencia quede demasiado larga.
  • Adaptabilidad. Por lo general, los sitios con efecto de paralaje no son responsivos: en una pantalla chica no lucirían bien. Además, no pueden verse en navegadores incompatibles con HTML5 o CSS3, ni menos aun con JavaScript deshabilitado.

Por último, hay que recordar que aplicar paralaje suma una importante dificultad al desarrollo y la actualización de un sitio web.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce