Hace unos días estaba en el pub y la bartender, una amiga llamada Valeria que estudia en la Universidad, me pidió prestado mi teléfono celular para revisar la última calificación en una asignatura, que sería publicada en Internet.
Hasta ahí no había ninguna novedad, un proceso normal. Según lo conversamos, ella está acostumbrada a ingresar al sitio web de su universidad, loguearse como usuaria registrada y acceder a su página personalizada que incluye, entre otras cosas, sus calificaciones.
El problema vino cuando quizo acceder al sitio web de la universidad y nos encontramos con la desagradable sorpresa que el sitio no estaba desarrollado para ser compatible con dispositivos móviles, por lo tanto tuvo que buscar, buscar y buscar hasta encontrar un enlace que decía "versión web" y revisar el sitio como si estuviese frente a la pantalla de un computador, con la respectiva molestia que ello implica, letras chiquitas, hay que hacer zoom en la pantalla del dispositivo móvil para acercar, dificulta ingresar datos para acceder, etc.
Es en ese momento en el que mi amiga Valeria repara en la importancia de que los sitios web sean compatibles a todo tipo de dispositivos y claro, yo también aproveché el momento y comencé a hablarle acerca de las bondades del software libre, los alcances que tiene y las maravillas posibles de conseguir utilizando Joomla! como motor de desarrollo para sitios web.
Una universidad es una empresa gigante que genera muchos recursos y utilidades... Hice una búsqueda rápida por Google para visitar los sitios de otras casas de estudio y me encontré con la triste novedad que a nivel latinoamericano practicamente ninguna universidad está preparada para los nuevos dispositivos y estos son cada día más utilizados, sobre todo en un segmento etáreo que adopta nuevas tecnologías día a día.
Joomla!, desde su versión 3.0 de forma nativa y desde su versión 2.5 a través de un plugin o insersión directa, permite la adopción de Bootstrap para facilitar el trabajo de adaptación de nuestros desarrollos, aún antes ya existián otras alternativas, un poco más rústicas por llamarlas de algún modo, pero que ya nos permitían unos primeros avances. Algunos frameworks venían con la opción de layout para dispositivos móviles y una extensión también nos permitía generar una versión móvil de nuestro sitio web.
Ahora bien, cuidado con pensar que Bootstrap es la panacea del desarrollo web adaptable, porque no es así. Es una tremenda ayuda para comenzar, pero es solo para el comienzo, debes aplicar todo el conocimiento necesario y aprender las nuevas técnicas para que el sitio sea efectivamente adaptable a todo tipo de dispositivos, recuerda que cada día aparecen nuevos aparatos con nuevas resoluciones, la oferta de dispositivos crece día a día, lo que va dificultando de igual forma nuestro trabajo en desarrollo. A continuación veremos algunos consejos que a todos nos caen bien:
- El tamaño si importa:
Lo primero que debes tener en mente antes de comenzar a desarrollar un sitio web que se adapte a todo tipo de dispositivo es comenzar planificando desde el menor tamaño hacia adelante. - Pon atención a JS:
Recuerda siempre que debes hacer la llamada a la librería pensando en el dispositivo en el que será visto el sitio, esto te permitirá jugar con las fuentes, los títulos, etc. - Evita el caos con las imágenes:
Manten siempre las llamadas a las imágenes para las diferentes resoluciones, recuerda que aunque le asignes el atributo non a tus imágenes, estas igual se cargan en el dispositivo móvil. - Volvemos a las imágenes:
Trabaja en las resoluciones de tus imágenes para que sean vistas en distintos dispositivos, con la introducción de "retina", probablemente sea necesario que tengas versiones de la misma imagen, tanto en alta como en baja definición. - Volvemos al tamaño:
El que nuestras imágenes se adapten al tamaño del dispositivo no quiere decir que vayas a poner una imagen gigante pensando en que al disminuir su tamaño, disminuirá su peso. Quizás necesites utilizar 2, 3 y hasta 4 imagenes iguales, con diferente tamaño, resolución y peso para ajustarla correctamente a los dispositivos. - Agilidad:
Trabaja, como señalaba anteriormente, pensando desde el móvil hacia la web, de esa forma visualiza siempre la forma de hacer que el contenido que el usuario busca se destaque al comienzo de la pantalla. Si tienes módulos a la izquierda, derecha o superior, trabaja con Bootstrap, de tal forma que cargue el contenido principal primero. - Contacto:
Facilita el contacto con tu visitante. En desarrollo conocemos los llamados "Call Action", quizás incluir unos 2 en tu diseño movil, uno para generar la llamada telefónica de inmediato y otro para acceder de inmediato al formulario de contacto. Recuerda que en dispositivos móviles no tenemos mouse. - Navegación:
Piensa siempre en la experiencia del usuario, recuerda que tu conoces el sitio que estás desarrollando, pero el visitante no, siempre debes ponerte en el lado de el visitante. La caja de búsqueda a la vista, un menú deslizante, tratar que esté todo siempre a la vista evitando el scroll son siempre buenas prácticas. - Observa tus manos:
Recuerda que todos los seres humanos somos distintos, esas diferencias insiden en tu sitio web, haz que tus botones, links y todo lo que sea "enlazable" se ajuste a un tamaño de dedos standar, un dedo pequeño puede funcionar sin problemas, pero preocúpate de facilitarle la navegación a un dedo grande. - Manten el parecido:
A pesar de los cambios que debes generar para hacer tu sitio web realmente adaptable, no pierdas nunca la igualdad entre la versión de escritorio y la versión móvil de tu sitio, recuerda que muchos de los usuarios antes de visitar la versión móvil, ya han navegado en la versión de escritorio, por lo tanto debes darle la sensación de estar en el mismo sitio siempre. - Menos es más:
A pesar que el "hide" no es recomendable para imágenes, si puedes usarlo en palabras, un botón del tipo "call to action" con una frase del tipo "Escríbenos" puede perfectamente bien reemplazarse en su versión móvil por un simple "Contacto" o "Enviar", de esa forma el visitante entenderá el llamado a la acción, pero le simplificarás la lectura y el esfuerzo visual. - Prueba, prueba, prueba:
Siempre confía en el criterio del visitante, pues es el visitante quien usará tu sitio web, prueba tu sitio en diferentes dispositivos, pídele a amigos y familiares que naveguen por tu desarrollo y escúchalos, probablemente ellos descubran dificultades en donde tu ves lo obvio. Prueba una y otra vez, recién cuando tus "testers" puedan sentirse comodos con tu desarrollo, este estará listo para ver la luz.
Siguiendo estos consejos y probablemente muchos más que te puedan dar, será muy posible que termines desarrollando un sitio web adaptable para todos y evitarás que personas como mi amiga Valeria tengan que estar buscando "versiones de escritorio" para usar en un dispositivo móvil... Quién sabe, quizás hasta puedas ir y tocar la puerta de la universidad ofreciendo tu desarrollo :)