Cada vez que comienzas con el desarrollo de una página web, hay que cuidar todo lo referente al diseño, así como tener en cuenta los diversos factores SEO para optimizarla. Pero sobre todo es necesario asegurarse de que la web vaya a contar con un diseño web responsive, es decir, que esta se pueda adaptar a todos los dispositivos y pantallas posibles.
No obstante, será aconsejable que tengas en cuenta algunos puntos clave, si no quieres cometer una serie de errores muy comunes que se suelen repetir durante la implementación de este tipo de páginas web.
índice de contenido
Errores comunes a evitar en el Responsive Design
1. Comenzar diseñando la versión de escritorio
Tal vez sea el error más habitual de todos, y por esta razón empezaremos por aquí. Quizá pueda parecer más intuitivo comenzar a diseñar la web pensando en la versión de escritorio, para luego adaptarla en todo lo posible, ajustando la información que vayamos a mostrar para un espacio mucho más pequeño. Pero lo cierto es que, hoy en día, los valores de tráfico mayoritario son para dispositivos móviles, por lo que es mejor cambiar el enfoque.
Es decir, lo aconsejable es comenzar por la versión móvil, y luego adaptarla a la versión escritorio. Además, comenzar por la versión móvil te permitirá poner todo el énfasis necesario en la información que de verdad sea relevante, así como en la forma de mostrarla en pantallas reducidas. Esto permitirá que la experiencia del usuario sea la mejor posible.
2. Pensar en dispositivos y no en tipos de pantalla
En la actualidad existen un gran número de dispositivos diferentes en los que poder consultar contenido web, y dicho número no deja de crecer. Además, las características de estos dispositivos pueden ser muy variadas, llegando a haber móviles más grandes que algunas de las tablets más pequeñas.
Por eso, a la hora de empezar con tu diseño web en WordPress, no puedes limitarte a agrupar todos los modelos de teléfono en una sola categoría. Concentrarte en tamaños de dispositivo, y clasificarlos como ordenadores de escritorio, tablets y teléfonos móviles puede ser un error de diseño. En su lugar, es más aconsejable pensar en categorías de pantalla, como micro pantallas, pantallas pequeñas, de rango medio, grandes e incluso extra grandes. Así, además, conseguirás evitar desarrollar tu web solo para aquellos dispositivos que sean conocidos en el momento.
3. No revisar todas las versiones al incluir modificaciones
Cada vez que vayas a incorporar modificaciones de cualquier tipo en el diseño de la web responsive, has de tener en cuenta de que estas modificaciones pueden repercutir en el funcionamiento del sitio en las demás versiones de visualización. Ya sea por las prisas, o por no tener todos los factores en cuenta, es habitual encontrar páginas en las que una modificación introducida durante su desarrollo funciona de forma eficaz en la versión de escritorio, pero en cambio provoca problemas en la versión para móviles, estropeando así la primera impresión que tenga el usuario de nuestra web, y empañando su experiencia.
Así que, cuando realices modificaciones, estas deberían ir acompañadas de una batería de pruebas, con tal de asegurarte de que todo sigue funcionando a la perfección.
4. Usar la misma resolución de imágenes
Otro de los errores más habituales que puede presentar un sitio web responsive con problemas de desarrollo es que, a la hora de crearlo, se han utilizado imágenes con una sola resolución para todos sus modos de visualización, sin tener en cuenta los diferentes dispositivos.
Esto es un error, ya que lo ideal no es usar la versión de más resolución para la versión de escritorio y luego escalarla para los demás tamaños, sino emplear imágenes de diferentes dimensiones. Además de verse mejor de esta forma, se optimizará la carga de dichas imágenes, que de otro modo podrían ser innecesariamente pesadas.
5. No diseñar para pantallas táctiles
Trabajar en una web responsive no solo implica trabajar con distintos tamaños de pantalla. También comporta tener en cuenta distintos métodos de ingreso por parte de los usuarios, y eso incluye los táctiles
Así, el error que deberás evitar es el de obviar este tipo de funcionalidades. Por ejemplo, no coloques los elementos demasiado juntos, ya que eso podría hacer que el usuario toque por error el que no desea.
Cuida que la navegación se pueda hacer de forma natural con la mano y con los gestos que se suelen emplear al manipular una pantalla táctil. Además, has de prestar especial atención a las esquinas, ya que se emplean de forma distinta según el tipo de dispositivo. Por ejemplo, para pantallas pequeñas es aconsejable colocar botones de llamada a la acción o enlaces en la esquina inferior izquierda. En cambio, en pantallas medianas, lo que facilita el acceso es colocar esos mismos botones en las esquinas superiores.
6. No tener en cuenta el rendimiento
Cuando diseñas una página web responsive, seguramente querrás que la experiencia del usuario sea lo más óptima posible, y eso puede depender del tiempo de carga. Que dicho usuario tenga que esperar unos segundos de más puede ser fatal, y es un problema que debes evitar. Por eso, la página ha de estar siempre optimizada, para que pueda rendir sin importar el dispositivo o la calidad de la conexión a internet que el usuario emplee.
Para conseguir esto, es recomendable limitar la cantidad y el tamaño de las imágenes. También es mejor no contar con dependencias, como bibliotecas JavaScript. Además, aprovechar la memoria caché te permitirá utilizar archivos usados en tu web, que se almacenarán localmente. Gracias a esto, la página web se verá agilizada cuando se realicen visitas reiteradas. Tienes más información sobre ésto en nuestro post WPO.
Conclusión
Una página web responsive ha de ser interesante y llamativa, pero al mismo tiempo necesita ser ligera y adaptable para cualquier tipo de pantalla y dispositivo. No tener en cuenta estos puntos puede enturbiar la experiencia que tenga el usuario, así que procura evitarlos. Por último, ten en cuenta que la mejor forma de no cometerlos es poniendo la web a prueba. Realiza tests de usabilidad con usuarios y dispositivos reales. Esto te permitirá localizar y subsanar problemas que podrían haber pasado desapercibidos.