9 motivos para usar responsive design en tu sitio web

¿Tu sitio está adaptado para ser visualizado en todos los tipos de dispositivos? ¿Tienes visitantes que se conectan tanto por computadora como por celular o tablet? ¿Y si te decimos que esa condición no es tan nueva, le prestarías más atención?

En este post, vamos a explorar algunas cuestiones básicas sobre diseño web adaptable y mostrar algunas ventajas que eso trae en términos de rendimiento y resultados.

Estas son las preguntas que contestaremos a lo largo del post:

¿Qué es un sitio web con responsive design?
¿Por qué necesitas un sitio web con responsive design?
¿Cómo un sitio con estas características puede ayudar a tu negocio?
¿Qué puede suceder si no te adaptas?

Introducción: Mucho más allá de la computadora de escritorio

¿Estás leyendo este post en una computadora, en una tableta o en un celular? Esa no es una pregunta al azar. Sólo se está haciendo porque la manera de navegar en Internet es cada vez más diversificada, y cualquiera de esas opciones es posible.

Hace un tiempo que las personas dejaron de decir «voy a entrar a internet». Sólo hay que tomar el teléfono celular, conectarse y listo. Sin ninguna dificultad, estamos en línea.

Mira a tu alrededor, en tu oficina, en la parada del colectivo, en la plaza de comidas del centro comercial, en la playa, en el café y hasta en el tráfico. Alguien está con un teléfono móvil en la mano, ¿no es cierto? Es un comportamiento tan común que no pensar en cómo puede influir en tu negocio es quedarse atrás.

Asimismo, un detalle se debe tener en cuenta. La mayoría de esas personas están navegando en aplicaciones o en sitios adaptados para dispositivos móviles. Ese hecho enciende la luz de alerta: tenemos que hacer que nuestro negocio también esté a mano para los usuarios. De lo contrario, la posibilidad de que salgan de nuestro sitio, debido a una mala experiencia, y se vayan a un sitio competidor, es enorme.

En ese aspecto, es donde surgen las ventajas de un sitio con responsive design.

Qué es un sitio con responsive design

¿Conoces algún sitio al que accedas por el celular y use letras tan pequeñas que tienes que hacer zoom para leer? Ese sitio carece de responsive design.

Los sitios web adaptables están diseñados de manera inteligente para ajustarse a cualquier tipo de resolución, sin distorsiones. Un sitio web adaptable identifica cuál es el ancho de cada dispositivo y, de esa manera, consigue determinar cuánto espacio está disponible y cómo se mostrará la página para que ese espacio se aproveche al máximo. También ajusta las dimensiones de las imágenes, de las fuentes y de los demás elementos de la página para que no queden desproporcionados.

En términos muy prácticos, son aquellos sitios que, con el mismo layout, se ajustan perfectamente a cualquier resolución de forma armónica, pasándole la misma experiencia de lectura al usuario, independientemente del dispositivo por el cual está accediendo.

Ocurre una confusión común entre sitios con responsive design y versiones móviles de un sitio. Hay algunas diferencias entre ésas dos características, como veremos a continuación.

Diferencias entre un sitio con responsive design y una versión móvil

Un sitio con responsive design es todo sitio creado para adaptarse a cualquier tipo de pantalla. Es una única estructura de códigos que funciona en diferentes resoluciones.

Una versión móvil es un poco diferente, es un segundo sitio separado, hecho exclusivamente para que se ingrese en determinados tipos de dispositivos.

Lo recomendado, por diversos motivos que verás a continuación, es que el sitio tenga un responsive design. Sin embargo, si todavía no es posible o si tienes un proyecto en curso para esa adaptación, una versión móvil o un plugin que se adapte a los dispositivos móviles también es una opción interesante.

El blog de RD Station tiene responsive design, pero por algún tiempo usamos el plugin WP Touch, que hace automáticamente un nuevo layout cada vez que un usuario accede a un sitio por medio de un dispositivo móvil. Fue una medida provisional hasta que nuestro nuevo diseño quedo 100% operativo.

9 motivos para tener un sitio con responsive design (¡y sus ventajas!)

Ahora que ya estás contextualizado y ya has entendido lo que es un sitio con responsive design, ha llegado el momento de hablar de algunos motivos para que utilices ese recurso en tu sitio.

1 – Mejorar la experiencia del usuario

Experiencia del usuario es todo. Y trae resultados concretos.

Según el Google Think Insights, si un usuario accede a tu página por un dispositivo móvil y no encuentra lo que busca, existe un 61% de posibilidades de que desista y se vaya a otro sitio.

En cambio, si se queda satisfecho con tu sitio, si tiene una experiencia positiva, la oportunidad de que convierta en tu producto o servicio son de un 67%.

Tomate a ti mismo como ejemplo. Cada vez que abres un sitio web por el móvil y te das cuenta de que está desalineado, ¿quedas insatisfecho?

2 – El acceso por móvil está creciendo (y debe seguir)

Una gigantesca encuesta realizada en 63 países por Google Consumer Barometer, entre los que se encuentran los de habla hispana de América, detectó que el año pasado más del 50% de la población conectada a Internet lo hace a través de sus dispositivos móviles.

El uso de Internet móvil a nivel global alcanza hoy el 76%, con porcentajes que en los mercados individuales varían desde el 71% en México hasta el 86% en Argentina. La tendencia es a que estos números sigan subiendo, gracias al avance en el desarrollo de dispositivos móviles y calidad de banda.

3 – SEO + Mobilegeddon

Google favorece sitios con responsive design y, sobre todo, cuando la búsqueda se realiza por dispositivos móviles, les da preferencia, aumentando naturalmente el tráfico orgánico.

Por lo tanto, tener un sitio con estas características aporta para que aparezcas en los resultados de búsqueda, independientemente del dispositivo que el usuario esté utilizando para hacer esa búsqueda.

Una de las actualizaciones de Google de 2015 recibió el cariñoso apodo de Mobilegeddon (Mobile + Armagedón). La intención de Google es favorecer los sitios con responsive design o que tienen una versión móvil en detrimento de los que no están preparados.

Además, la estructura de URL se quedará igual en todos los dispositivos, lo que también mejora tu ranking y la visibilidad de tu sitio para el robot de búsqueda.

4 – Aumentar la velocidad de la página

Una de las recomendaciones de Google PageSpeed Developers es que el contenido por encima del despliegue en un dispositivo móvil se cargue en menos de 1 segundo. Y que la carga completa de la página se dé en menos de 2 segundos.

En la mayoría de los casos, esto se hace inviable cuando una versión de desktop del sitio se carga en un dispositivo móvil. La velocidad de carga, además de ser un factor de ranking para Google, también perjudica al usuario. Si el sitio tarda en cargarse, existe un alta probabilidad de que el usuario cierre la ventana y busque lo que necesita en otro lado.

Un sitio con responsive design ya es más ligero y optimizado para los dispositivos móviles y por eso se carga más rápido que una versión desktop.

5 – Disminuir la tasa de rebote

Tener un sitio con estas características reduce la cantidad de usuarios que acceden y salen sin ninguna interacción.

Este ítem está conectado a la experiencia del usuario, ya que si no es bien recibido al ingresar a la página, las posibilidades de que cierre y desista – o parta a otra búsqueda – son grandes.

Es importante tener cuidado con esa tasa de rebote, ya que si es muy alta, puede ser interpretada por Google como señal de que el contenido no es relevante. Y cuando eso sucede, la posibilidad de que tu página pierda posiciones es alta.

6 – Aumentar las ventas

Según el informe «Global Commerce Review» de la Compañía Criteo, para el tercer trimestre de 2017, el 44% de las compras online en Latinoamérica se hicieron a través de dispositivos móviles.

En ese aspecto, la preferencia de la población todavía sigue siendo el desktop, que tiene para el mismo aspecto una tasa del 56%.

Sin embargo, los números muestran una tendencia que está en pleno desarrollo. Tener una aplicación o un sitio web adaptable para un ecommerce, por ejemplo, es una manera de aumentar tus ventas.

7 – Aumentar la tasa de conversión de Leads

Así como hay un aumento de las ventas, también existe la posibilidad de aumentar la conversión y generar Leads por medio de dispositivos móviles.

Si usas las redes sociales para promover tus materiales, hace mucha falta que las páginas tengan responsive design. El usuario podrá estar navegando en las redes por el smartphone cuando vea tu enlace en el feed de noticias. Y si, al hacer clic, la página está desalineada, es mucho más grande la posibilidad de que no convierta a la de abrir el enlace otra vez en el desktop.

Acá en RD Station tenemos Landing Pages adaptables, lo cual ayuda a que tengamos conversiones por medio de dispositivos móviles.

8 – Mejor difusión en las redes sociales

En América Latina, según diversos estudios, el 88% de usuarios de Internet usa las redes sociales cada día. Como el acceso a las redes sociales por celulares y tabletas es cada día más frecuente, es ideal tener un sitio con responsive design. La oportunidad de que tu página sea compartida en redes sociales por esos usuarios es mucho más grande si tiene una experiencia agradable de navegación.

Además, tener una sola página con responsive design hace la experiencia más agradable también para quienes acceden a un enlace que fue compartido por teléfono celular. Eso evita que una versión móvil – generalmente bien resumida – se abra en un desktop, como aquellos dominios, por ejemplo, “http://m.site.com/slug-da-pagina”, o “http://site.com/mobile/slug-da-pagina”.

9 – Prepararse para dispositivos futuros

Una de las mayores ventajas de un diseño de este tipo es que se hace para diferentes resoluciones y no para diferentes dispositivos. Es decir, no importa cuál es la resolución de la pantalla del dispositivo que tu visitante está utilizando, el layout se adaptará.

Ello abre una brecha para dispositivos futuros, que se pueden lanzar con resoluciones diferentes. Un responsive design deja a tu sitio listo para cualquier dispositivo, incluso para los que aún no existen.

Conclusión

Los dispositivos móviles ya están acá y se van a quedar. Ya no es más el porvenir, es el presente. Después de todo, tampoco es absurdo que algunas personas ya no usen Internet por medio de computadoras. Ni que algunas personas ni siquiera tengan computadoras en casa.

Hoy, la mayoría de las plantillas ya se producen pensando en un diseño web adaptable (responsive design). Por eso te pregunto: ¿Cómo es el diseño de tu sitio? ¿Es adaptable? ¿Tiene una versión móvil? ¿Usa un plugin? ¿O todavía estás implementando una nueva versión? ¡Comparte tu caso en los comentarios!

Este post fue originalmente escrito por Flaubi Farias en portugués y contiene adaptaciones hechas por el autor para el mercado de Latinoamérica y España.