Diseño responsive, ¿tienes preparada tu web?

  • Autor de la entrada:
  • Comentarios de la entrada:Sin comentarios
  • Última modificación de la entrada:septiembre 2, 2022
  • Tiempo de lectura:21 minutos de lectura

El diseño responsive para tu web es algo que no debes olvidar, ni dejar a un lado.

Es importante y mucho.

Hoy, el enorme número de usuarios que pueden acceder a ti a través de móviles hace que, si no tienes una web funcional, no cuenten contigo.

Ni ellos, ni Google

Índice

1.-¿Tienes claro qué es el diseño responsive?

NO es diseño responsive

SÍ es diseño responsive

2.-¿Por qué es tan importante tener una web responsive?

3.-¿Cómo puedes conseguirlo?

#01-Elige una buena tipografía

#02- Que el usuario se sienta a gustito

#03-Que cargue lo antes posible

#04-Evita imágenes y videos que puedan ralentizarla

#05-¿Efectos?, asegúrate de que sean necesarios

4.-No olvides que Google penaliza

5.-Comprobaciones siempre antes de publicar

1.-¿Tienes claro qué es el diseño responsive?

Imagino, pero, por si acaso o para despistados, te lo cuento.

Consiste en que tu web sepa adaptarse a los diferentes tamaños de pantallas a través de las cuales el usuario accede.

Consigue una correcta visualización del contenido ya sea en una pantalla de ordenador, en una de tablet y en una de móvil.

NO es diseño responsive

Tener una web responsive no es lo mismo que tener una web para móviles.

Una web para móviles obliga a duplicar tu sitio web, diseñando uno exclusivo para su visualización en estas pequeñas pantallas.

Era la forma que se tenía hace años para trabajar el acceso a unos dispositivos que aún no contaban con la repercusión actual.

Entonces no importaba tanto, ahora, sí.

SÍ es diseño responsive

Un único sitio web capaz de adaptarse y conseguir una correcta visualización según el dispositivo.

Pero es eso, una única web, no tienes que duplicarla para que tus clientes la vean correctamente.

Cuenta con un diseño adecuado que realiza una adaptación automática, un redimensionado de los elementos que evitan la necesidad que había de duplicar un sitio web.

Puedes implementar estas acciones en el momento del diseño.

Cualquier maquetador web actual, te va a permitir hacer modificaciones específicas para cada dispositivo.

No funciona tener un diseño común para una pantalla de ordenador, una de tablet y una de móvil, son dispositivos con diferentes características.

A todas puedes adaptarte de una manera sencilla, manteniendo un único sitio web.

2.-¿Por qué es tan importante tener una web responsive?

Hoy es imprescindible en cualquier web para que sea funcional.

Los usuarios de internet, cada vez más, se manejan con móviles.

A nivel mundial, más de la mitad del tráfico web procede de ellos.

Hoy, 6/10 personas compran a través de su móvil, tienes que tenerlo muy en cuenta para tu e-commerce.

La facilidad de compartir, en redes o en cualquier sistema de mensajería, aumenta la cantidad de personas que pueden acceder a tu contenido.

Los usuarios son los mejores distribuidores de una información que les interesa.

Tus propios clientes son tu mejor publicidad, sin duda.

El tráfico orgánico que puedes conseguir es brutal, siempre que tu contenido interese.

Llega a más en menos tiempo.

Es una muy buena forma de que te conozcan, de aumentar tu red de contactos de potenciales clientes.

La primera impresión que damos al usuario que llega a nuestra web es vital para que tome la decisión de seguir con nosotros o buscar a la competencia.

Si siente que su paseo por tu sitio es difícil, engorroso, que tiene que hacer más y más clics para no llegar a nada, va a tener una sensación de una web desfasada, sin atender.

Te va a ver como a alguien que no atiende bien a sus visitas.

Esa imagen la va a trasladar a tus productos o servicios sin que puedas evitarlo, y van a perder todo su atractivo para él.

Al contrario, una web moderna, funcional y que tiene en cuenta desde dónde se accede, va a dar de ti una imagen actual, de quién se preocupa por cómo le ven, y que intenta ofrecer lo mejor.

Una mayor facilidad para navegar facilita el acceso a ti, si para leerte o comprar, una persona tiene que esperar a llegar a casa y usar su ordenador, te puedes ir olvidando.

De que te lea y de que te compre.

3.-¿Cómo puedes conseguirlo en tu web?

El momento crucial es la maquetación.

Es ahí donde puedes adaptar todo lo que haces y conseguir un diseño responsive que consiga que usuarios y Google te tengan en cuenta.

Es cuando te pones al nivel del resto.

Ten en cuenta estos 5 puntos:

#01-Elige una buena tipografía

Decidir la tipografía adecuada te evita mil y un disgustos.

La legibilidad de tu contenido debe ser igual de sencilla en pequeñas pantallas.

No lo olvides.

Puede que te llame la atención un tipo de letra muy creativa u original que encaja con tu negocio.

Pero antes de decidirte, comprueba su facilidad de lectura.

Ten cuidado a la hora de innovar.

Envíate un correo y ábrelo en tu móvil, valora cómo se sentirá una persona al leer unos párrafos con esa letra.

Los tipos como Arial, Roboto o Monserrat son muy utilizados, por sencillos y claros, dan un toque de elegancia y profesionalidad a tus textos.

Otro aspecto importante es el espaciado entre líneas.

Ten en cuenta que la persona que te lee está haciéndolo en una pantalla muy pequeña, aunque no redactes párrafos largos, debes estar pendiente de que el interlineado sea el adecuado.

#02- Que el usuario se sienta a gustito

Cuando una persona tiene una buena primera impresión y ve que su experiencia en el sitio web es sencillo, rápido y funcional, tienes un 40% de posibilidades de que permanezca más tiempo del que en un principio había imaginado.

Tienes que hacerle agradable la estancia en tu negocio, se quedará y volverá a menudo.

Igual que en un local físico siempre estás pendiente de dar una imagen adecuada para que las personas repitan.

Ten en cuenta, también, que en un ordenador se actúa mediante el pequeño puntero del ratón, pero aquí, la pantalla es táctil, todo lo realizamos con los dedos.

Diseña botones con un tamaño adecuado para eso.

También, y es algo que se tiende a descuidar, los enlaces.

Evita enlazar a través de una o dos palabras, mejor una frase, que con el dedo no haya problema.

Acceder al enlace en esta frase “si quieres saber más pasa por aquí”,es mucho más difícil que en esta otra “si quieres saber más pasa por aquí

La segunda opción es más cómoda para el usuario, es mucho más sencillo que “acierte” en el enlace y llegue a su destino.

Otro tipo de acciones, como un formulario de registro, el paso de una subpágina a otra o, sobre todo, el botón de compra, tienen que ser de fácil usabilidad.

Un diseño responsive mejora la experiencia de usuario, pero también la puede empeorar en caso de no hacerlo de la manera adecuada.

#03-Que cargue lo antes posible

Los clientes son personas, las personas somos impacientes.

Los clientes son impacientes, esta es la lógica que no debes olvidar.

No hagas que tu usuario pierda el tiempo mientras espera a que tu web se abra.

En este punto entra en juego la importancia de la optimización de los tiempos de carga, son los que eliminan esa espera interminable hasta que se accede a una web.

Piensa que cuando una web se abre a través de un móvil, se abren los mismos recursos que cuando se hace desde un ordenador, no implementes elementos innecesarios, plugins u otros recursos que va a repercutir de manera negativa si no aportan ninguna mejora.

La recomendación de Google para que una web tenga una buena valoración ante sus ojos es que no se superen los 3 segundos hasta que toda tu web está accesible.

La velocidad de tu web tiene un gran impacto en la tasa de conversión, cuanto más fácil lo pongas, más fácil también va a ser que el usuario actúe.

Hay herramientas que te pueden ayudar a conocer la rapidez de apertura de tu web, una de ellas es GTmetrix donde solo con poner tu URL vas a saber la velocidad.

Pero, es que además, influye en el porcentaje de rebote, va a disminuir considerablemente, ya que uno de los factores que lo aumenta es que la persona no pueda entrar en una web de manera inmediata.

Fíjate lo importante que es que una web se abra rápido y bien en todos los dispositivos que intenten hacerlo.

Para conseguirlo, un buen plugin de optimización es imprescindible.

En este caso, yo sí te recomiendo que utilices uno de pago, no son muy costosos y evitan muchos dolores de cabeza cuando insertas imágenes y videos en tu web.

Además de que el proceso de optimización es constante, siempre que hagas cualquier modificación comprueba si no te está perjudicando, y para eso un plugin de confianza es vital.

Las acciones de mejora tienen que ser continuas en tu web.

#04-Evita imágenes y videos que puedan ralentizarla

Tener una web repleta de imágenes, puede parecer que aumenta su atractivo, es posible, pero también disminuye esa velocidad que consigues con los anteriores puntos.

Con Photoshop, optimizar las imágenes es sencillo, tan solo con usar la opción de “guardado para web” disminuyes considerablemente su tamaño.

Tienes otros muchos recursos gratuitos en internet a tu disposición, por ejemplo iLoveIMG,  para no depender de que tengas programas de diseño, ni de que los sepas manejar.

Piensa que es posible que no necesites una calidad excesiva, si la reduces y no pierde nada de nitidez, puedes aprovecharlo para bajar su peso.

Tanto imágenes como vídeos que quieras incluir tienen que tener una proporción lógica para adecuar a su visibilidad en móvil.

Contar con un plugin de optimizado de imágenes, puede hacer el resto y conseguir el menor peso posible de una imagen sin perder calidad.

Tienes otra opción: reemplazar las que no son imprescindibles por texto.

Pueden crear en la mente del lector una imagen que va a ser muy atractiva para él, con problemas para ti.

#05-¿Efectos?, asegúrate de que sean necesarios

Los efectos, cuidado con ellos.

Lo mejor es evítalos, algunos no funcionan y te vas a encontrar que un usuario de móvil no recibe el mismo impacto que uno de ordenador.

El efecto Hover, (que un botón cambie de color al pasar el cursor aún sin hacer clic), no te va a servir, tenlo en cuenta para saber qué y qué no experimentan tus usuarios.

Caso similar es el de los pop-up, piensa bien si necesitas que aparezcan en la versión móvil, pueden ser incómodos, incluso hasta asustar, cuando saltan por sorpresa y ocupan la pantalla entera.

No resultan tan atractivos como cuando te salen en un ordenador, y existe la posibilidad de que el usuario se enfade y se vaya cuando los ve aparecer, si eso interrumpe su lectura.

4.-No olvides que Google penaliza

Desde 2015, Google penaliza a los sitios web que no son responsive.

Si no tienes en cuenta a través de dónde se accede a tu web, date por penalizado.

Es un tema esencial para el posicionamiento SEO, no puedes dejar que todo el trabajo que te ha costado posicionar un contenido, se vea perjudicado porque Google considera que no has tenido en cuenta a las personas.

Según Google Think Insights hay un 67% de posibilidades de conversión si un usuario siente una experiencia como positiva.

En el momento en que detecta que una web o un blog tiene una velocidad demasiado lenta, penaliza afectando a tu posicionamiento.

Por muy buen marketing de contenidos que hayas implantado vas a ver que los resultados no son los que esperabas.

Has sembrado mucho para no recoger apenas.

5.-Comprobaciones siempre antes de publicar

Puedes hacer todas las pruebas que necesites, trabaja en modo borrador hasta que estés seguro de lo que quieres publicar.

En ese momento, para un minuto y comprueba cómo se ven en los diferentes dispositivos aspectos como son:

  • Lectura cómoda, con tipografías claras, de tamaño y espaciado correcto.
  • Velocidad de carga, optimiza y optimiza, siempre tras cualquier cambio en tu biblioteca de medios, ojo con el tamaño y peso de videos e imágenes.

Piensa que Google puede penalizarte, lo que va a perjudicar a toda tu estrategia de contenidos para el posicionamiento.

  • Que sea una visita cómoda, haz que el usuario se sienta a gusto y le sea fácil interactuar, ten por seguro que te lo va a agradecer, manteniéndose más en ella y compartiendo contenidos.
  • Hay efectos que no te van a dar el mismo resultado ante un dispositivo móvil, tenlo en cuenta, es posible que no te merezca la pena ponerlos si la mayor parte de tus clientes llegan a ti a través de su móvil.

No cabe duda de que la evolución de los dispositivos móviles propicia que el usuario esté más activo en ellos, se ha vuelto más exigente.

Quiere navegar rápido y conseguir lo que busca, ya.

Si no eres tú, otro se lo va a ofrecer.

Me gustaría haberte ayudado para que, ya sea que hagas tú tu web, o que la encargues, tengas en cuenta cómo se ve en los diferentes dispositivos.

Puedes poner aquí en esta cajita tus comentarios, así nos conocemos.

Si quieres saber más de copywriting (y de la vida), suscríbete a mi lista.

Puedes hacerlo si te pasas por aquí.

Deja una respuesta

Ver más

  • Responsable: Beatriz Martín.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a Raiola Networks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.