La importancia del diseño web responsive

Me apuesto lo que sea a que más de una vez has navegado por Internet desde tu teléfono móvil o tu tablet. Desde que estos aparatos aparecieron en nuestras vidas, las han revolucionado; y también ha alborotado el mundo de la web.

Es por eso que, como manda el dicho, hay que renovarse o morir. Y eso se aplica al diseño responsive de tu página web, que debe adaptarse a estos dispositivos más recientes para que todo el mundo la vea bien independientemente de que la visite a través de su smartphone, tu tablet, su ordenador e incluso su smart TV.

El responsive se define por ser una técnica de diseño y maquetación que tiene el objetivo de hacer páginas web flexibles que puedan adaptarse al tamaño de las distintas pantallas de los dispositivos existentes para que el usuario pueda visitarlas y leer con toda comodidad.

Como te decía, seguramente habrás entrado en alguna web desde tu teléfono y has tenido que ir ampliando y alejando la imagen, moviéndote por la pantalla. Eso quiere decir que esa página no es responsive y, por lo tanto, no se adapta a los distintos dispositivos que existen, tal como te muestro en la imagen.  

Pero, por qué es importante tener un diseño responsive?

Como te he ido diciendo, tu web necesita tener un diseño responsive porque lo que te interesa es que tus visitantes puedan ver tu web sin molestias desde cualquier dispositivo. Por lo tanto, una web responsive mejora la experiencia de usuario de tus seguidores, y eso hará que valoren más tu página web.

El hecho de tener un diseño adaptable a distintas pantallas hace que tus visitantes puedan manejarse mejor y leer con mayor facilidad por tu web. Es decir, con un diseño responsive tu usuario puede acceder mejor a los distintos botones de tu página, y eso te interesa. Los dos salís ganando.

Incluso, en el caso de una tienda, debe ser fácil y sencillo que el usuario pueda hacer una compra sin problemas. ¿Cuántas veces aprovechamos para comprar en un rato de sofá con el ipad o el móvil? Si el usuario se encuentra que tu tienda no es responsive, se irá al instante y por lo tanto perderás ventas.

Es importante saber que un diseño responsive se hace para adaptarse a pantallas más pequeñas que las de un ordenador. Es por eso mismo que elementos muy importantes y que ocupan un espacio considerable en una pantalla de ordenador, como el menú y el logo, deben ser más pequeños pero igual de importantes en una pantalla de otro dispositivo distinto.

Por eso, te recomiendo que simplifiques ese contenido y localices todos los ítems del menú en lo que, comúnmente, se llama un menú hamburguesa. Éste no es más que un botón que sólo aparece en las versiones responsive y que, al hacer click sobre él, despliega los ítems del menú.

Lo mismo pasa con el sidebar de tu blog. En el diseño responsive, los distintos elementos que conforman una web se van apilando unos debajo de otros, por lo que hay que priorizar y ordenar jerárquicamente el contenido.

Así pues, lo que se localiza en el primer bloque es tu logo y el menú hamburguesa, y luego, el contenido de tus posts para, finalmente, en el penúltimo bloque, situar los elementos del sidebar y, detrás, el footer.

Hay muchas páginas gratuitas en las que puedes probar, desde tu ordenador, cómo se verá tu web en las distintas pantallas para así saber si el responsive está bien hecho. Por ejemplo, en nuestras plantillas puedes comprobarlo desde responsive.is.

Consejos a tener en cuenta en el diseño responsive

Finalmente, te dejo con algunos consejos a tener muy en cuenta para un buen responsive:

• Valorar los distintos dispositivos. No es lo mismo una tablet que un teléfono. Ni tampoco si lo ves en horizontal o en vertical.
• Tienes que priorizar que el usuario lea y acceda fácilmente los contenidos por delante de cualquier otra opción.
• Ten cuidado con el tamaño de los textos. Como en cualquier web, debes  jerarquizar.
• Simplificar los contenidos que aparecen en varios columnas en pantalla grande a una sola columna para otros dispositivos.

Ahora ya sabes la importancia del diseño responsive y por qué tu web lo necesita. Así que, cuando encargues el diseño de tu web o compres una plantilla para tu blog, asegúrate que dispones de una versión responsive accesible a todas las pantallas.

¿Te has fijado antes si tu web lo es? ¿Has comprobado el funcionamiento de tu web en todos los dispositivos que tienes a tu alrededor en tu día a día?