Diseño web

El diseño web con opciones más modernas

Las animaciones interactivas, el parallax scrolling o los fondos activos, son unas de las tendencias modernas del diseño web, que llaman poderosamente la atención del usuario, y optimizan el aprovechamiento de datos, si bien habitualmente de forma negativa en el performance del diseño web.
En vista de esto, los diseñadores se ven obligados a determinar los efectos que brindan valor agregado y los que vuelven la página más lenta. Es decir, en líneas generales, el proverbio del “menos es más” continúa activo en este caso, por supuesto, sin devolverse al diseño llano.

Vale recordar que la utilidad de una página web impacta la experiencia de usuario. Por ello es preciso establecer la diferencia entre el tiempo de carga de una página, tal como se entiende, y lo que se tarda realmente. Lo retrasos son un problema cuando el usuario los identifica como tales.

Es por ello que para impedirlo muchos diseñadores optan por las siguientes opciones:

Barras de progreso

En caso de que el visitante deba aguardar, ha de brindársele la posibilidad de saber por cuánto tiempo. Si bien la barra de progreso no reduce el tiempo para cargar la página, por lo menos está diseñada de una manera interesante, de manera que pueda hacer la espera menos pesada.
La finalidad es impedir que el usuario se retire de la página, en el momento en que se vea precisado a aguardar a que se cargue. Se sabe que el espacio de tolerancia del usuario moderno se ha venido reduciendo gradualmente en tanto que las conexiones van mejorando.

Los elementos más importantes se cargan primero

La programación de las páginas debe hacerse de tal manera que el contenido above the fold, el que se presenta al internauta, primeramente, sin requerir aplicar scroll, se cargue de primero. Si se le presenta este contenido al usuario, le restará importancia que el contenido below the fold se cargue después.

JPEG progresivo

Al utilizar esta herramienta (progressive JPEG), que aplica el conocido escaneo entrelazado, primero se le presenta al usuario inmediatamente una vista previa con una calidad inferior por ser pixelada, la cual se va detallando progresivamente, hasta obtener la imagen completa. En contraste, las imágenes baseline tardan más su carga y lo hacen de arriba hacia abajo.

Es decir, igual que los textos, el contenido visual debe ser original, de buena calidad y notable para el internauta. Igualmente, es conveniente que se cargue solamente cuando el visitante lo abra. Se trata más que todo de usuarios de terminales móviles o de conexiones debilitadas, los mayores beneficiados de los sitios bien elaborados sin carga excesiva de información.

WebAssembly

Para la experiencia de navegación del usuario, las aplicaciones web se han transformado en factores fundamentales. Aunque con JavaScript se optimiza la experiencia de usuarios, ya que les posibilita interrelacionarse con el espacio del diseño web, numerosas aplicaciones pueden ver una disminución de su utilidad.
Mediante WebAssembly (Wasm) se conformó hace poco un lenguaje que, debido a la pre compilación, se aplica con rapidez en el navegador. Aunque el estándar no se encuentra aún tan difundido, los navegadores actuales son compatibles con esa tecnología.