Diseño responsivo

El diseño responsivo es un método de diseño web que ofrece, con un único HTML, una disposición óptima para distintos tamaños de pantalla, como PC, tableta o smartphone. Mediante las media queries de CSS, cambia el número de columnas, el tamaño de la fuente, el tamaño de las imágenes y el formato de visualización de la navegación según el ancho de la pantalla.

Para las páginas enlazadas desde un código QR, el diseño responsivo no es una opción, sino un requisito imprescindible. La mayoría de los dispositivos que escanean códigos QR son smartphones. Si al final de un código QR se muestra una página diseñada para PC, la experiencia del usuario se ve gravemente perjudicada: el texto es demasiado pequeño para leerlo, los botones son difíciles de tocar, hace falta desplazarse en horizontal, etc. Es un problema que repercute directamente en la tasa de abandono tras el escaneo.

Hay puntos a los que conviene prestar especial atención en la página de destino de un código QR. En primer lugar, colocar la información más importante y el CTA en la primera vista (la zona visible sin desplazarse). Como la pantalla de un smartphone es pequeña, si no se transmite el valor antes de desplazarse, se pierde la visita. En segundo lugar, el tamaño de los objetivos táctiles. Las directrices de Apple recomiendan un mínimo de 44 por 44 puntos, y Google recomienda 48 por 48 dp. En tercer lugar, la velocidad de carga. Pensando en el acceso desde redes móviles, es importante optimizar las imágenes y eliminar los scripts innecesarios.

Con la indexación mobile-first de Google, la calidad de la versión móvil de una página influye directamente en su posición en los resultados de búsqueda. Para que el tráfico procedente de los códigos QR contribuya también a mejorar la valoración en los buscadores, la calidad del diseño responsivo determina el SEO de la página de destino.