El diseño web responsive surgió en respuesta a la creciente popularización de los dispositivos móviles como medios para navegar en internet, así como las misma evolución tecnológica que ha cambiado de raíz el uso y la interacción de las personas con los teléfonos móviles.
Sin embargo, el diseño web responsive está lejos de ser perfecto y como muchos otros recursos, al usarlo siempre hay riesgos y desventajas. Pero no todas esas desventajas son definitivas, la comunidad del diseño ha hallado respuestas a esos principales problemas que presenta el diseño web responsive. En este artículo te mencionamos los 8 principales problemas del diseño web responsive y sus posibles soluciones:
Problema # 1: Primera fase de desarrollo compleja
En la actualidad, debido a la creciente interactividad que se puede apreciar en el diseño web, la primera parte de tu proceso se reduce a revisar referencias y realizar bocetos. En estos bocetos se colocan los principales elementos de diseño: el logo de la empresa, el menú de navegación, las llamadas de acción, etc. Teniendo en cuenta los diferentes tamaños de pantalla, en ocasiones los elementos deben ser reorganizados. Esto implica que la parte inicial del proceso podría ser complicada e incluso confusa para muchos diseñadores.
Solución
Existen dos posibles soluciones. La primera requiere que crees bocetos de todas las páginas de la versión para ordenadores. Una vez terminada puedes adaptar esos bocetos a las dimensiones de pantalla de los dispositivos móviles más populares.
La segunda opción es realizar una serie de bocetos de layout y determinar cuál es la más acertada para cada pantalla. El proceso de prototipado digital empieza mucho antes puedes debes verificar que tan bien se adapta la layout en distintos dispositivos.
Problema # 2: Menú de navegación
En el diseño web, la navegación siempre ha sido un tema prioritario pues debería ser lo suficientemente sencilla para ser comprendida de inmediato por el usuario. En ordenadores no hay problema, el menú de navegación usualmente se mantiene en la parte superior de la pantalla e incluso hay suficientes espacios en blanco que hacen que el diseño se vea moderno y sea más legible. El problema es cómo hacer que esos extensos menús de navegación se vean igual de bien en dispositivos más pequeños.
Solución
Probablemente ya tengas una idea de la solución más efectiva en estos casos: hamburger menu. Como muchas otras tendencias que han sobrevivido el paso del tiempo, el hamburger menú ofrece una solución efectiva en pantallas más pequeñas pues esconde el menú y lo hace visible sólo cuando es necesario.
Problema # 3: Carga de imágenes en mayor densidad de pixeles
Las imágenes conforman gran parte de la experiencia de usuario en la web. Sin imágenes podría ser complicado (aunque no imposible) captar la atención de tus usuarios. Claro, no sólo las imágenes son recursos que pueden causar impacto en el usuario, los colores, textura, tipografía y otros elementos de diseño también tienen esta capacidad, pero sin imágenes se pierde gran parte de la expresividad en nuestros diseños.
Con la popularización del diseño web responsive debes asegurarte no sólo elegir fotografías que vayan acorde a la personalidad de marca o gráficos que combinen con el estilo de diseño seleccionado, sino también de elegir imágenes que tengan una gran densidad de pixeles y que puedan ser escaladas y apreciarse en los diferentes dispositivos. Es probable que al implementar este tipo de soluciones el tiempo de respuesta de tu página se incremente, lo cual puede ser un problema para temas de SEO.
Solución
Para este problema existe un recurso muy interesante llamado “Lazy loading” que se refiere a el contenido que se carga solamente si el usuario lo requiere. Un claro ejemplo de este tipo de recurso lo podemos ver en Facebook, en la sección de Inicio donde aparecen las distintas publicaciones de tus contactos.
El “lazy loading” no sólo ofrece una solución al tiempo de carga pues sólo muestra las imágenes que el usuario requiere en ese momento, sino que es una excelente forma de informar a tus usuarios que el contenido está siendo cargado.
Problema # 4: Mostrar un gran volumen de información
En dispositivos móviles, debido al tamaño reducido de las pantallas, en ocasiones deberás reconsiderar usar sólo el contenido absolutamente fundamental. Esta decisión podría ser la diferencia que haga que tu sitio web tenga una buena experiencia de usuario.
Pero en ciertos tipos de sitios web deberás recurrir a información estadística. En estos casos puede ser problemático mostrar un gran volumen de contenido, especialmente si tienes tablas con muchas columnas y filas que requieren que los usuarios se desplacen horizontalmente.
Solución
Al igual que muchos otros elementos de diseño, puedes crear una tabla de diseño adaptativo, de modo que se escale en dispositivos con pantallas más pequeñas. También puedes recurrir a crear una tabla más pequeña a modo de evitar el scrolling horizontal. Para ello necesitarás olvidarte de momento del layout cuadriculado.
Otras buenas opciones son transformar esa información a gráficos que sean más fácilmente escalables como gráficos de torta o usar diversos colores para cada columna de tu tabla de modo que la información se pueda visualizar de manera más sencilla, incluso podrías incluir una leyenda para evitar que el usuario se tenga que desplazar para verificar qué dato pertenece a cada sección.
Problema # 5: Elevado tiempo de respuesta de página
Uno de los mayores retos en el diseño web es hallar un equilibrio entre una buena experiencia de usuario y las expectativas de los mismos. En internet todo se mueve rápidamente y los usuarios esperan lo mismo de las páginas web que visitan. Desafortunadamente, el diseño web responsive a menudo es bastante pesado pues básicamente contiene contenido tanto para dispositivos móviles como para ordenadores. El resultado a menudo es un sitio web donde el tiempo de respuesta es mayor que lo esperado por el usuario.
Solución
La solución ya la mencionamos en un punto anterior, es “lazy loading” y es perfecta para el diseño web responsive pues el contenido sólo se carga cuando el usuario lo requiere. Por regla general el primer contenido que se debe cargar el menú de navegación y luego el contenido, generalmente las imágenes son lo último en cargarse. Asegúrate de incluir algún indicador para informar al cliente que el contenido está siendo cargado; este pequeño detalle puede hacer maravillas por la experiencia de usuario.
Problema # 6: Mayor tiempo de diseño y desarrollo
Ya que los sitios web adaptativos deben lucir bien en distintos dispositivos y tener la misma funcionalidad, usualmente la etapa de diseño y desarrollo es más larga, al igual que los periodos de pruebas. En general, un sitio web adaptativo puede tomar hasta el doble de tiempo que un sitio web normal
Solución
El tiempo de desarrollo es algo inevitable teniendo en cuenta todo lo que implica el diseño web adaptativo, pero evaluaremos el “problema” desde otra perspectiva: la funcionalidad de los sitios web responsive. Al tener un sitio web responsive un mayor número de personas puede acceder a tu sitio y puedes mantener una sola identidad de marca y línea gráfica, detalle importante no sólo para ti sino también para los usuarios pues al ver un sitio web móvil esperan que luzca y funcione igual de bien que la versión para ordenador.
Problema # 7: Eliminación de contenido
Sitios web con diversos elementos de diseño como interfaz de usuario, opciones de búquedas, formularios, tablas de datos, etc. son a menudo un problema pues básicamente tiene mucho volumen de información. En ordenadores no hay ninguna dificultad, pero pasar toda esa información a dispositivos más pequeños puede ser todo un reto.
Solución
Planificar desde el inicio qué contenido y cómo se organizará éste es la solución ideal. El objetivo es eliminar todos los elementos innecesarios y quedarse solamente con los elementos fundamentales. De esta manera, el contenido se reduce y se optimiza pensando en los dispositivos más pequeños. Recuerda también dejar un enlace para los usuarios que desean ver el sitio web completo, es decir la versión para ordenadores.
Problema # 8: Versiones antiguas de Internet Explorer no aceptan Media Queries de CSS3
Internet Explorer sigue teniendo una base estable de usuarios y es uno de los navegadores más populares después de Google Chrome. Sin embargo, en versiones antiguas es probable que tu contenido no se muestre de manera correcta. Si has realizado las pruebas correspondientes y notas este error es importante que tomes en cuenta a estos usuarios y encuentres la manera de que tu web se pueda visualizar correctamente.
Solución
Puedes incorporar lo que se llama Polyfill, que es un código que permite que se pueda ver las funcionalidades de HTML5 en navegadores que, por defecto, no soportan este lenguaje. Este código se puede descargar en GitHub, por ejemplo, sólo es necesario que implementes el código y listo. Otra posible solución es usar las hojas de estilo de Internet Explorer de manera condicional si es que se reconoce que el dispositivo tiene este navegador.
