Tener una web responsive es un mandatorie ahora mismo. Aunque sigue habiendo quien ni siquiera entiende qué significa esto exactamente. Tradicionalmente, y en realidad sigue siendo así, el primer planteamiento de una web se hace para escritorio. Esto obliga a adaptar contenidos a dispositivos móviles. Ya no es necesario crear 3 webs distintas y exclusivas para cada dispositivo, sino que el diseño responsive permite, con un solo diseño, tener una web optimizada en todos los dispositivos.
Aunque esto puede llevar a confusión. Muchos clientes creen que el diseño y desarrollo de una web responsive simplifica tanto que sería como construir un solo sitio. En realidad esto no es así, el responsive design simplifica el trabajo, y ayuda a tener un sitio coherente en todos los dispositivos. Pero el trabajo que conlleva es mayor, lógicamente, que el de diseñar un sitio exclusivamente para un único dispositivo.
Esto se debe a que no es una fórmula mágica que permita, dando a un botón, tener un sitio web optimizado para escritorio, tableta y móvil. Si no que se debe realizar un buen trabajo en cada paso del proceso de diseño y desarrollo. Comenzando desde el prototipado y wireframeing hasta el diseño final, pasando por el desarrollo del código.
Se deben tener en cuenta aspectos muy concretos para realizar un buen desarrollo responsive. Adaptar contenidos a dispositivos móviles puede ser relativamente sencillo si se siguen ciertos criterios estandarizados del diseño resposive.
Recursos
Al plantear un diseño web, si se comienza desde escritorio, debe tenerse muy en cuenta el consumo de recursos como principal «problema» a resolver. Es evidente que no es lo mismo acceder a la web desde uno de estos dispositivos que desde un ordenador de escritorio. Pese a que los dispositivos móviles cada vez van mejorando mucho sus prestaciones. Luego se verán otros aspectos, pero ahora este punto se refiere a los recursos gráficos, de memoria, conexión, etc.
A la hora de adaptar contenidos a dispositivos móviles, hay que minimizar los tiempos de carga de un sitio. Ya que en muchas ocasiones la conexión será una tarifa de datos del smartphone y no una conexión wifi. También los procesadores y memorias difieren bastante, lo que podría causar problemas si no se contemplan estas diferencias, y se optimizan los contenidos para su visualización en las diferentes pantallas.
Por lo tanto se podrían contemplar algunos consejos para aprovechar los recursos de los diferentes dispositivos:
- reducir el peso de las imágenes o vídeos
- no cargar grandes galerías de primeras al acceder a un sitio web. Realizar una carga progresiva
- ocultar la información no relevante para la compresión y manejo de una página concreta
Diferentes pantallas
Aquí viene uno de los mayores problemas del diseño responsive. Al menos es uno de los grandes retos que tienen que enfrentar diseñadores y desarrolladores. Adaptar contenidos a dispositivos móviles puede ser relativamente sencillo. Pero que la adaptación sea perfecta en todos los dispositivos es un asunto más peliagudo. Ya que la diversidad de tamaños y resoluciones de pantalla es casi infinita.
Entonces, ¿hay que crear una versión para cada tamaño? La respuesta, evidentemente, es que no. Pero sin embargo, sí deben tenerse en cuenta estas diferencias. La mejor opción es basarse en los datos de uso de cada pantalla. Centrar el tiro a las más comunes en el mercado. Llegando a la mayoría, podría decirse que se están haciendo las cosas bien.
Por otro lado, si el nicho de usuarios al que se dirige un producto digital, es muy concreto y se pueden basar las decisiones en el uso que estos hacen, todo será más sencillo y seguramente, se obtengan mejores resultados.
Si algo hacen bien en Apple es crear productos homogéneos que permiten lograr diseños mucho más eficientes y sencillos. Lo hacen bien para su negocio, claro, ya que mientras el mercado tecnológico trata de tomar un rumbo común, ellos apuestan por seguir su camino en solitario. Pero esto es otra historia.
El mercado está copado por Android, y aquí sí que la variedad es grandísima. Lo que dificulta lograr diseños más eficientes.
El objetivo es ofrecer el mejor producto al mayor número de usuarios, por lo que diseñar para la mayoría suele ser la mejor opción.
Los elementos de interacción
Es evidente que la interacción entre usuario e interfaz varía por completo cuando esta se da entre una persona y un ordenador de escritorio entre una persona y un dispositivo móvil. La primera variación evidente es el tamaño de la pantalla. Lo que obliga a disponer todos los elementos y contenidos de diferente forma. Variando la forma de lectura y de consumo de dichos contenidos.
El otro aspecto relevante que diferencia la interacción es el uso de elementos periféricos. Mientras que un ordenador personal de escritorio ya no es concebible sin, al menos, un ratón y un teclado, en los dispositivos móviles esto es completamente diferente. Todo está integrado en una pantalla «mínima». Todo cabe en la palma de la mano. Y la interacción con la pantalla, con la interfaz, es «directa». Es el dedo del usuario el que directamente hace scroll, el que pulsa un botón, el que escribe sobre la pantalla mientras sostiene el dispositivo. Este último ejemplo pone de relevancia los cambios que esto supone. Ya que la escritura varía de la tradicional, como una máquina de escribir, a la escritura con los pulgares.
Adaptar contenidos a dispositivos móviles significa tener todo esto en cuenta.
Esto obliga a cambiar u optimizar los tamaños de letra, la posición y tamaño de los botones y enlaces, las transiciones u elementos de interacción con contenidos multimedia, etc. Aspectos clave para ofrecer una experiencia de usuario gratificante al adaptar contenidos web al móvil.
Evitar artificios
Como se dice, lo que se busca es una buena experiencia en la interacción. En ocasiones, al diseñar para escritorio, los diseñadores tiran del artificio para tratar de crear una experiencia diferente y única para los usuarios. Aunque esto muchas veces es un arma de doble filo que puede ser contraproducente. Cualquier recurso que se emplee debe dirigirse a mejorar y simplificar la interacción. Y si es un sitio web muy experiencial o artístico, quizá convenga el uso de transiciones, reproducciones automáticas, elementos y trucos visuales, que mediante el artificio entretienen al usuario.
Pero todo esto en el móvil, generalmente, aportará problemas más que soluciones. Por lo que se recomienda esquivarlos lo más posible.
