Cada vez más usuarios realizan búsquedas a través de dispositivos móviles. Tú página debe ser web responsive, debe adaptarse a toda clase de dispositivos. Al diseño adaptable se le denomina «responsive». Vamos a intentar aclarar porqué una web responsive esla mejor opción.

Objetivos de una web responsive

Mediante el diseño «responsive» de una web, lo que se busca es que todos los elementos de la misma se adapten. Colocándose para la mejor visualización en el dispositivo en el que se está viendo.

Mediante este tipo de diseño se ahorra mucho tiempo en el desarrollo, no es necesario duplicar contenido para adaptarlo a los diferentes dispositivos. Todo el contenido se adaptará por completo a la ventana de visualización, haciendo que los usuarios no abandonen tu web porque tienen una mala lectura o simplemente por aburrimiento al tener que estar ampliando y reduciendo continuamente.

Una de las ventajas de usar un diseño web responsive, puede que la más importante desde mi humilde punto de vista, es la mejora del SEO ó posicionamiento, dado que tan sólo tendriamos una única versión web para todos los dispositivos, también tendriamos una única «url», mejorando considerablemente nuestra presencia, eliminando redireccionamientos y penalizaciones por contenido duplicado.

¿Qué debemos tener en cuenta?

La velocidad de carga

Al no tratarse de una versión diferente de tu página sino la misma con el contenido adaptado hay que valorar qué es lo que se muestra en cada dispositivo. Debemos evitar que se muestre contenido que ralentice la carga de la web.

El tamaño de los elementos

A la hora de diseñar la mejor solución es que el contenido se escale a la pantalla de visualización. En el caso de que no sea posible que se muestre una versión diferente adaptada a cada dispositivo.

Una practica habitual en el caso de las imágenes es el escalado mediante porcentajes. Por ejemplo, con una imagen a tamaño completo se puede utilizar un estilo similar a este «style:max-width:100%;height:auto;». Donde le decimos al navegador que muestre la imagen al 100% del ancho del contenedor; donde está ubicada y con una altura proporcional.

Comprobar y comprobar

Es totalmente necesario revisar todas las versiones de nuestra página web. Lo que en la versión de escritorio se visualiza correctamente no necesariamente se tiene que hacer en la versión responsiva de un móvil.

Esta situación suele darse cuando se aplican determinados efectos que no se pueden mostrar en una pantalla táctil. Como en un dispositivo móvil, el efecto «hover» no se mostrará por no haber puntero.

Todos nuestros planes de diseño web, desde el Plan Basic al Plan Top, incluyen un diseño adaptativo o responsive design.