El Responsive Design consiste en diseñar los cursos de tal manera que el usuario podrá verlos cómodamente, en cualquier dispositivo: smartphone, tablet o computadora. El diseño responsivo permite ver directamente el curso en diferentes tamaños de pantallas, sin tener que manipular las opciones del dispositivo que está utilizando.
Existen muchas posibilidades técnicas de Responsive Design, por ejemplo: las bibliotecas JavaScript para los programadores. Estas soluciones funcionan según el mismo esquema: los elementos de contenido se posicionan en una plantilla que se adapta a las dimensiones de la pantalla en la cual se ven. Así, cuando el usuario consulta el curso en una pantalla más angosta, como la de un smartphone, los elementos se vuelven a posicionar para evitar las manipulaciones (deslizar horizontalmente o hacer zoom).
¿Porqué es útil el Responsive Design?
El uso de dispositivos móviles se hace cada vez más presente; Por otra parte, el aprendizaje “en cualquier lugar y en cualquier momento” es cada vez más común. Pero la gran diversidad de dispositivos potencialmente utilizados, con sus características diferentes (tamaño, definición…) ya no nos permite saber cómo se va a ver el contenido que producimos. Además, los dispositivos permiten la lectura tanto horizontal como vertical, lo que cambia mucho la organización de los elementos en la pantalla.
Necesitamos diseñar los cursos con un enfoque Responsive Design para asegurarnos que los usuarios tengan siempre una experiencia placentera de lectura, cual sea el dispositivo que ocupen.
La solución Responsive Design de Lectora
Lectora, herramienta de autoría para la producción de módulos e-learning, permite crear cursos adaptados al tipo de pantalla y a su orientación. Ofrece 5 posibilidades:
- Computadora
- Tableta horizontal
- Tableta vertical
- Smartphone horizontal
- Smartphone vertical
La creación del curso se realiza en modo “computadora”, luego se modifica para los otros dispositivos.
Las modificaciones hechas en modo “computadora” se repercuten en los otros modos.
Las modificaciones en modo “tableta” no influyen en la presentación para computadora, pero se repercuten en el modo “smartphone”.
Las modificaciones en modo “smartphone” sólo impactan la presentación en este tipo de dispositivo:
En dispositivos móviles (tabletas y smartphone), el contenido se reduce para adaptarse a lo ancho de la pantalla. El tendrá que deslizar hacia abajo para ver el contenido completo si este es más largo que la pantalla.
Veamos un ejemplo de curso en diferentes dispositivos.
El tamaño de pantalla de una computadora permite colocar más elementos de contenido, botones y opciones.
En un smartphone, el espacio se reduce mucho. En este caso, suprimimos algunos botones de navegación para reducir el tamaño de las imágenes, sin quitar ninguna información necesaria.
Organizar los elementos para una pantalla en modo vertical es a menudo más difícil. En este caso, colocamos el texto alrededor de las imágenes.
Con Lectora, es muy fácil pasar de una configuración a otra. En cada página del curso, puedes acomodar la presentación adaptada para cada tipo de dispositivo, sin perder la arquitectura dl curso, las relaciones entre las diferentes partes, las animaciones, etc.
Nuestro consejo: crea tu página en modo “computadora”. Después, verifica la apariencia en cada modo, siguiendo el orden: tableta/smartphone. Realiza tus ajustes. Por ejemplo, si necesitas suprimir botones de navegación, como en nuestro ejemplo, simplemente, colócalos fuera de la vista:
Con el Responsive Course Design de Lectora, puedes diseñar tu curso para cada tipo de dispositivo. Con su función de publicación HTML optimizada, tienes la garantía que tus usuarios podrán ver el curso en cualquier dispositivo.
Comunícate con nosotros para empezar tu prueba gratis de Lectora y empezar a producir tus contenidos e-learning responsivos.
Fuente: http://trivantis.com/whitepapers/responsive-course-design