¿Diseño web para móviles o diseño responsive?

Cada día, los usuarios se conectan más a Internet desde sus dispositivos móviles. Esta tendencia está obligando a quienes quieren tener presencia online a tener un diseño web para móviles. En este sentido, se abren las dos opciones: crear una web distinta para escritorio de ordenador y otra web para móviles o trabajar con un diseño web responsive.

Los problemas del diseño web adaptativo

La primera opción, la de crear una web para las pantallas más grandes y que pueda visualizarse en móviles o crear una distinta para estos frente a la del ordenador, es un error. Básicamente, porque la navegación es radicalmente distinta, según el dispositivo desde el que se esté entrando en la web.

ma

Los principales obstáculos a los que se enfrenta una web con un diseño adaptativo son tres:

El tiempo de carga

Por lo general, el tiempo que tarda en cargarse una web de escritorio es demasiado largo para los usuarios de dispositivos móviles.

Las descargas

No es lo mismo descargar los datos de la web en el ordenador que en un dispositivo móvil.

El formato

En una web que está diseñada para escritorio, hay detalles que precisan del zoom para poder verla correctamente en una pantalla más pequeña.

Por todo esto, aquellos que desean crear una web deben adaptarse a los nuevos usos de los usuarios de Internet. Que se pueda ver desde cualquier pantalla es fundamental para que el tráfico llegue a la misma, independientemente del tipo de pantalla que utilice el usuario.

¿Y qué es el diseño web responsive?

Este tipo de diseño web logra que el sitio se adapte a la pantalla desde la que se está viendo. La experiencia de navegación en las webs que lo utilizan es mucho más positiva que si se utiliza una adaptación de la web de escritorio para los dispositivos móviles.

Entre las ventajas de utilizar este tipo de diseño web para móviles, además de la experiencia de usuario propiamente dicha, destacan:

Incremento de la visibilidad de la web para los usuarios móviles

Aumenta las ventas, así como la ratio de conversión

Los análisis e informes son más reales y consolidados

Mejora la visibilidad en los motores de búsqueda

Ahorro de costes, al no tener que desarrollar una versión específica para móviles de la web

Ahorro de tiempo en la gestión de la web

Mejora la experiencia cuando se realiza navegación offline, es decir, sin conexión a Internet

Es por esto que el diseño web responsive se está consolidando en los últimos tiempos. Además, hay que tener en cuenta que Google penaliza, desde el pasado mes de abril de 2015, a los sitios que no tienen este tipo de diseño, ya que se considera que las webs deben ser vistas desde cualquier tipo de dispositivo, independientemente del tamaño de pantalla y de manera totalmente optimizada.

Las principales diferencias entre el diseño adaptativo y el diseño responsive

Ahora que ya se conocen los dos tipos de diseño, es hora de conocer sus diferencias para entender por qué Google exige que las webs estén diseñadas de manera responsive.

Por un lado, el diseño responsive reestructura todos los elementos del sitio, según el tamaño de la pantalla desde el que se está viendo. Por tanto, se optimiza el espacio disponible y se mejora la experiencia de usuario.

El diseño responsive establece las medidas, así como los márgenes en tamaños proporcionales, y no utilizan valores fijos, como se venía haciendo en el diseño web tradicional. Además, también se añaden media queries y hojas de estilo propias para que las CSS funcionen, con independencia del tamaño.

Para entenderlo mejor, se cita un ejemplo: si en la versión desktop se tiene un menú horizontal, se convertirá en vertical cuando la web se abra desde un dispositivo móvil. De esta forma, se evita que el usuario tenga que hacer zoom para navegar por las distintas pestañas del menú de navegación.

Otra de las ventajas del diseño web responsive, frente al adaptativo, es que escala, de manera automática, las imágenes y los vídeos y evita que se conviertan en un impedimento para el usuario a la hora de visualizar correctamente los contenidos de la web.

Hay que señalar también que el diseño responsive necesita más código que un diseño adaptativo, pero este tiempo de más que se consume a la hora del desarrollo se amortiza de manera rápida, ya que la experiencia de usuario, tal y como se precisa, es mucho más agradable.

Al utilizar alguno de los editores web en cloud y de software libre con diseños totalmente responsive, se puede crear una web perfecta, sin necesidad de conocimiento alguno de programación.

Diferencias entre diseño web para ordenadores y para dispositivos móviles

Grandes diferencias entre pantalla de un pc y un dispositivo móvil. Mientras que en un ordenador tenemos unas altísimas resoluciones, sobre todo en los monitores modernos, en lo móviles o tablets las limitaciones son obvias. No hablamos de que no puedan tener la misma resolución, que cada vez se acercan más, sino de que el espacio será siempre limitado.

Estas diferencias se producen por factores a tener en cuenta:

• Tipo de conexión: En un PC nos solemos conectar vía Wifi, tenemos conexión ilimitada, en cambio el consumo de datos es critico en el móvil cuando lo consumismos en la calle.
• Velocidad de conexión: Relacionado con el punto anterior, las conexiones en casa suelen ser notablemente más rápidas.

¿Cómo saber si una web cumple los requisitos del diseño responsive impuestos por Google?

Google, el buscador más utilizado en el mundo, pone al servicio de los webmasters una serie de herramientas que les permiten saber si su web cuenta con un diseño responsive, que permita a los usuarios de dispositivos móviles visitar la web de manera optimizada.

Prueba de optimización para móviles

En Google Developers, se encuentra la pestaña de prueba de optimización para móviles. Simplemente, hay que introducir la URL de la web que se quiera consultar y, si todo es correcto, se obtendrá un informe favorable. De no ser así, se indicará qué es necesario modificar para conseguir la optimización.

Verificación de la usabilidad

Que la usabilidad sea buena significa que los usuarios que acceden a la web obtienen unos resultados de búsqueda óptimos. Para que así sea, el contenido de la página debe ajustarse a la pantalla del dispositivo, así como contar con fuentes adaptables para facilitar la lectura; los elementos táctiles han de estar bien separados y tener un diseño visual optimizado para los móviles; y el contenido ha de ser ser fluido y evitar que el usuario tenga que desplazarse en la pantalla.

Para hacer las comprobaciones necesarias, el webmaster puede comprobar la usabilidad en el apartado destinado a ello en herramientas para webmasters de Google.

En resumen, si se quieren obtener buenos resultados en el posicionamiento de la web, una experiencia agradable para los usuarios y conversiones, es necesario aplicar un diseño responsive a las webs.