Ahora que ya tengo tu atención, quiero contarte un secreto.
El primero es que yo no soy Daniel y el segundo es quién soy y por qué estoy aquí.
Soy Aitor Pradas y como mucho, me puedes llegar a conocer por X (antiguo) Twitter de @aitorpradasmkt.
Quiero agradecer antes de nada la oportunidad a Daniel por poder estar aquí, dejándome un hueco dentro de su espacio para hablarte sobre un tema muy importante que afecta directamente a tu negocio si tienes una página web.
Vengo a contarte qué es el diseño responsive y cómo hacer para que captes la atención de los usuarios que entran a visitarte y no se vayan a la competencia porque tu página es ilegible desde el teléfono móvil.
¿Qué es tener una página web con diseño responsive?
Muy sencillo.
Tienes una página web, que se ve fantásticamente bien en ordenador.
Pues el diseño responsive es que sin tocar nada, solamente pequeños ajustes, se vea fantásticamente bien en el teléfono móvil.
El diseño se adapta de un dispositivo a otro.
Pero… ¿por qué es importante?
Porque cada vez entramos a mirar más en las páginas web con nuestro teléfono móvil.
Y cada año más va aumentando.
En 2023 tenemos que los usuarios utilizan un 55,63% el smartphone u otro dispositivo móvil para acceder a Internet versus el 42,21% a través del ordenador de sobremesa.
¿Ves lo importante que es tener bien optimizada tu página para que se vea bien en móvil?
El diseño web responsive mejora la experiencia del usuario
Como has podido comprobar, es necesario e imprescindible tenerlo en cuenta.
A más a más, de darle una buena experiencia al usuario, hacérselo fácil y cómodo.
Deja de ponerle trabas, sales perdiendo tú y lo envías directo a la competencia.
Ahora quiero contarte el por qué mejora la experiencia al usuario cuando visita tu página web a través del teléfono móvil.
- Al adaptarse a los diferentes tipos de pantalla, evitas que el usuario tenga que hacer zoom in y zoom out para ver el contenido.
- El texto y los elementos se ajustan para ser legibles y cómodos de leer en las pantallas de los dispositivos más pequeños. Le ahorras esfuerzos para leer o entender el contenido.
- Los menús y los enlaces se rediseñan para ser accesibles y fáciles de usar en pantallas táctiles. Los botones se dimensionan adecuadamente para evitar clics accidentales.
- Si el diseño web es responsive, cargará más rápido tu página web y retendrás a los usuarios. Recuerda, si tarda más de 3 segundos en cargar el usuario acaba marchándose para no volver.
- Evitas que tengan que desplazarse horizontalmente para que vean todo el contenido. Éste se adapta para poderlo ver verticalmente.
- Aumenta la retención de los usuarios. Si consigues que el usuario tenga una experiencia cómoda y eficiente en el teléfono móvil, es más probable que permanezcan en el sitio por más tiempo y realicen la acción deseada (comprar el producto o suscribirse a la newsletter).
- Porque Google valora los sitios web responsive y los clasifican más alto en los resultados de búsqueda móvil. Te da más visibilidad y tráfico.
- Y la última, consigues un solo sitio para múltiples dispositivos. En lugar de tener una página web para escritorio (ordenador de sobremesa) y otro para teléfono móvil, el diseño responsive permite tener una única página que se adapta a todo facilitando la actualización y administración.
La retención de los usuarios
En el anterior apartado te comentaba que, si mejora la experiencia, aumenta la retención de los usuarios.
Es fundamental para que tu página web tenga éxito a largo plazo.
Los retendrás y conseguirás:
- Facilitarles la navegación y la interacción con los elementos, para que así encuentren lo que el usuario busca y acceda a la información que necesita.
- Aumentar su satisfacción y esto conlleva a que se lleven una impresión positiva.
- Reducir la frustración porque no les confundirás con menús extraños o enlaces que no funcionan.
- Fomentar la interacción y la participación mediante comentarios, que te rellenen el formulario de contacto o participando en una comunidad.
- Aumentar la conversión al ser más propensos a realizar la acción que deseas que haga el usuario.
- Mejorar la percepción de tu marca. Los usuarios son propensos a confiar y tener una opinión positiva si le proporcionas una experiencia agradable.
- Favorecer que hagan difusión y compartan tu página web en redes sociales u otros canales. Esto conlleva a un aumento del tráfico y visibilidad de tu sitio web.
Las imágenes
Un error que me encuentro frecuentemente cuando visito páginas web es el tamaño de las imágenes.
Imágenes que no quedan bien encuadradas con el dispositivo, que hacen que la página web sea horizontal en vez de vertical para verla entera, que pesan mucho y hacen que la web vaya lenta a la hora de cargar…
Para que esto no pase, debes tener en cuenta lo siguiente:
- Asegúrate que las imágenes estén en formato de la nueva generación como puede ser .webp. Hay diferencia de peso entre imágenes en .jpg, .png versus .webp.
- El formato .webp ofrece una buena calidad y alta comprensión.
- Hay páginas externas que te permiten pasar del formato .jpg y .png al .webp. También plugins des del mismo WordPress.
- Utiliza la carga diferida para cargar imágenes y vídeos solamente cuando el usuario se desplace hacia la zona donde esté ubicado. Conseguirás mejorar los tiempos de carga.
- Antes de darlas por buenas y definitivas, hay que probar el diseño y funcionamiento en varios dispositivos para asegurarte que se vean y funcionen correctamente.
Los botones y enlaces de tu página web en WordPress
Si arriba hablábamos de las imágenes, ahora toca hablar un poco sobre los botones y enlaces.
Es importante asegurarse que éstos tengan un tamaño adecuado para el tacto.
¿En qué te ayudará que esto sea responsive?
- Los usuarios interactúan principalmente a través de pantallas táctiles. Por lo tanto, tener los botones y enlaces más grandes facilitará que el usuario los pueda tocar con los dedos y así reducir la posibilidad de errores.
- Botón y enlace pequeño = riesgo de que el usuario toque accidentalmente el elemento incorrecto. Puede ser frustrante para él y que se vaya de tu página web con una experiencia negativa.
- Reduce la fatiga visual y la tensión en los dedos, ya que evitas que el usuario haga esfuerzos sobrenaturales para leer el contenido.
Mobile-First Design
Comenzar el diseño desde la perspectiva móvil y luego expandirse hacia los dispositivos más grandes.
Así se conoce esta estrategia llamada Mobile-First Design.
Te la cuento como opción, para que la conozcas y sepas que se puede hacer.
Yo soy partidario aun así de empezar por escritorio y luego acabar de rematar las pequeñas modificaciones en los dispositivos más pequeños.
Al empezar desde la perspectiva móvil, te aseguras que los usuarios de dispositivos móviles tengan la mejor experiencia posible.
Ya que tendrás que priorizar el contenido esencial, acabando en un diseño más limpio y simple enfocado en lo verdaderamente importante.
Conclusión
Date cuenta de la importancia que tiene una página web responsive, bien adaptada a los dispositivos móviles y lo que puedes llegar a evitar.
Evitar que el usuario se vaya, que se vaya con una mala impresión de ti y de tu marca.
Hay que ponérselo sencillo al usuario, dar las máximas facilidades posibles y tener en cuenta las variables.
Tan solo piensa… Si entras en una página web que te cuesta leer o te es imposible darle a un botón para continuar, ¿te irás o te quedarás hasta conseguirlo?
No le des más problemas a tu usuario.
No trates mal a tu negocio, privándole de tráfico y buenas opiniones.
Cuida los detalles, lo acabarás agradeciendo.
Espero y deseo que te este artículo te haya ayudado a ver si tu página web se ve bien en este tipo de dispositivos, y si más no, dejarte un poco más claro el concepto y la importancia del responsive.
Por último, quiero dar las gracias de nuevo a Daniel por la oportunidad de escribir este artículo en su casa, es un placer estar rodeado de personas como él.
Y como te decía al principio, puedes encontrarme en mi página web aitorpradas.com, por X (antiguo Twitter) @aitorpradasmkt, Instagram con aitorpradas y en Linkedin por aitorpradas.
Si necesitas mejorar el diseño responsive de tu página web y evitar que los usuarios se vayan con tu competencia, estoy a tu disposición para ayudarte.
Gracias por leerme y por dedicarme un rato de tu tiempo.
