¿Existe algo más molesto que un contenido que no se adapta a la pantalla de un dispositivo? Por ejemplo, cuando intentas leer un artículo en tu smartphone y el texto es tan pequeño que terminas por dejar la lectura a la mitad.

Lo mismo ocurre con las formaciones online. En una publicación anterior hablábamos sobre qué son las píldoras de aprendizaje y no cabe duda de que la correcta visualización de una píldora (u otro contenido digital) desde cualquier dispositivo es crucial para conseguir una buena experiencia de usuario.

Cuando se trata de modos de visualización en dispositivos móviles, existen dos opciones principales: el diseño responsive y el diseño escalable. A continuación te contamos algunas características que los diferencian:

Diseño responsive

El diseño responsive es flexible, ya que se adapta a la pantalla del dispositivo que se utiliza: smartphone, tableta, ordenador portátil… Establece las medidas de ancho de cada elemento que se muestra en pantalla a través de columnas y porcentajes, utilizando medidas proporcionales en vez de valores fijos.

La principal característica de este diseño es que reestructura todos los elementos que tiene la píldora de formación (texto, imagen…) en función de la pantalla desde la que se visualiza, optimizando así el espacio y asegurando una excelente experiencia visual y de navegación.

Diseño escalable

El diseño escalable requiere menos código y es más sencillo. Al contrario que el responsive, utiliza valores fijos en vez de porcentajes y los elementos se muestran siempre en la misma disposición sea cual sea el dispositivo desde el que se acceda. 

Como su nombre indica, cuando la pantalla es más pequeña, los contenidos se “escalan”. Es decir, se ven exactamente igual que en un ordenador de sobremesa, pero con un tamaño más pequeño. Esto hace que a veces tengamos que hacer zoom en algún elemento si este se ve muy pequeño, pero asegura que la composición gráfica se visualiza siempre de la misma manera.

¿Qué tipo de diseño es mejor?

Conocer los modos de visualización de contenidos y las características de cada uno te ayudará a elegir la mejor opción para tus proyectos de formación. Tanto el diseño responsive como el escalable tienen grandes ventajas, pero para lograr una experiencia de usuario eficaz, es necesario saber cuáles son tus necesidades específicas y en consecuencia, optar por uno u otro.

Existe una tendencia general hacia el diseño responsive para la creación de píldoras de aprendizaje y de páginas web. Es un modo de visualización mobile-first, es decir, está pensado teniendo presente desde el principio su visualización en dispositivos móviles, desde los cuales cada vez más personas acceden a las formaciones online.

En la práctica de nuestros contenidos elearning, elegir uno u otro diseño significa escoger entre dos herramientas de autor: Articulate Rise (diseño responsive, pero funciones más limitadas a nivel técnico) y Articulate Storyline (diseño escalable, pero mayor número de posibilidades a nivel técnico). En futuras entradas del blog explicaremos los pros y los contras de cada opción.