No es ningún secreto que cada vez más personas acceden a Internet utilizando sus dispositivos móviles, además de las computadores de escritorio o en lugar de ellas. De hecho, hay casi 7 millones de usuarios móviles en todo el mundo. (Como referencia la población mundial actualmente es de más de 7.800 millones, lo que significa mucha actividad móvil).

Pero lo que están haciendo en esos dispositivos móviles es aún más convincente para los marketeros como nosotros. 

<< Descarga gratis la guía para rediseñar tu sitio web >> 

El 82% de los usuarios consulta desde su teléfono sobre las compras que están a punto de hacer en tiendas. Más de la mitad hace compras de manera habitual con sus teléfonos inteligentes, y el 55% de los compradores realiza compras móviles después de encontrar productos en las redes sociales. 

Como resultado, las empresas que tienen sitios web responsive generan más clientes potenciales y mantienen una ventaja competitiva cada vez mayor sobre las empresas que no lo hacen. 

Pero ¿qué es exactamente el diseño responsive, cómo funciona y por qué deberías hacer el cambio? Esta guía te responde esas preguntas, ofrece algunas estadísticas convincentes y te muestra las características clave del diseño responsive que todos los especialistas en marketing deben conocer.

El diseño responsive ya no es una sugerencia: es una inversión crítica para aumentar el alcance de tu marca, diversificar tu experiencia de usuario (UX) y convertir más visitantes del sitio. 

También le ahorra a tu empresa tiempo valioso. Posiblemente no puedas diseñar un sitio web por separado para cada dispositivo potencial que puedan usar tus visitantes, sin mencionar las tecnologías futuras. El diseño responsive garantiza que tu sitio web sea compatible con todos los dispositivos y pantallas para garantizar una experiencia agradable tanto en los dispositivos actuales como en los que aún no se han inventado. 

Veamos por qué el diseño responsive es tan importante hoy en día. 

¿Por qué el diseño responsive es importante?

El diseño responsive te permite llegar a un público más amplio con el que podrás satisfacer a los clientes que buscan una experiencia móvil atractiva. De hecho, la investigación muestra que puedes perder hasta el 90% de tus clientes potenciales debido a una mala experiencia optimizada para dispositivos móviles. 

Eso son muchos clientes e ingresos. 

Ahora veamos algunos de los beneficios del diseño responsive.

1. El diseño web responsive ayuda a los consumidores a descubrir tu sitio web

63% de personas acceden a Google desde sus dispositivos móviles, por eso Google penaliza a los sitios web que no ofrecen un diseño responsive o uno creado especialmente para los entornos móviles. Es por este motivo que tu indexación móvil podría afectar a la clasificación de tu sitio web e incluso podría hacer que disminuya el puesto que ocupa en las páginas de resultados de los motores de búsqueda (SERP). Estas últimas están a favor de los sitios web que ofrecen a los consumidores un diseño amigable para los dispositivos móviles. 

Entonces si la mayoría de tu audiencia está buscando en su teléfono inteligente y tu sitio web no presenta un diseño responsive, es posible que los clientes no encuentren tu sitio en absoluto.

2. El diseño web responsive mantiene a los compradores en tu sitio por más tiempo

Las tasas de rebote de sitio web en los teléfonos inteligentes es casi del 40% (en comparación con el 27% en tabletas). Además, un sitio web que se carga en cinco segundos o menos garantiza un 70% más de sesiones de visualización. 

Los usuarios de dispositivos móviles esperan experiencias rápidas y de alta calidad en el sitio web (al igual que Google) y esto solo lo puedes cumplir con un diseño de sitio web responsive. Utiliza nuestro calificador de sitios web para ver cómo funciona tu sitio y analiza qué cambios podrías hacer.

3. El diseño web responsive genera reconocimiento de marca positivo y confianza en los consumidores

Finalmente, 57% de los consumidores afirma que no es probable que recomiende una empresa con un sitio web móvil mal diseñado. El mismo informe muestra que es probable que más de la mitad de los compradores en línea que están decepcionados por la presencia en línea de una marca piensen negativamente sobre su negocio. 

El diseño responsive del sitio web, en cambio, deleita a los compradores en línea, los alienta a recomendar tu negocio y los hace volver para comprar más. 

¿Cómo hacer un diseño web responsive?

Es posible crear tu propio sitio web responsive utilizando CSS y HTML. Pero esto sería como tomar largos caminos cuando hay una autopista disponible. En este caso, la autopista sería un Sistema de Gestión de Contenido (CMS) o un creador de sitios web.

Un CMS es un software que te permite construir tu sitio web sin tener que saber cómo codificar y eso incluye saber cómo modificar un diseño para que sea responsive. Los creadores de sitios web son herramientas similares, pero renuncian a algunas funcionalidades que ofrece un CMS a cambio de facilidad de uso y precios más bajos.

A continuación de mostramos algunas de las opciones más comunes de cms y creadores de sitios web.

1. CMS Hub

CMS Hub es un CMS totalmente alojado e integrado. Se conecta a tus otras herramientas de HubSpot y crea una experiencia unificada de marketing, ventas, servicio y navegación del sitio para tus visitantes, clientes y empleados. 

En términos de la experiencia de construcción de tu sitio, el CMS Hub ofrece temas de sitios web preconstruidos que también están organizados para dispositivos móviles para satisfacer a tus visitantes y clientes en cualquier lugar, sin importar cómo estén navegando. 

CMS Hu de HubSpot para crear diseño responsive

Imagen de HubSpot

2. WordPress

WordPress es el CMS más popular del mundo y ofrece uno de los creadores de sitios web más directos: el editor Gutenberg.

WordPress ofrece miles de temas y plantillas para comenzar, incluidas muchas con diseño responsive. 

Diseño responsive en WordPress con el editor Gutenberg

Imagen de THEME.CO

Nota: Una vez que hayas configurado un tema para tu sitio web de WordPress, involucra y convierte a tus visitantes con formularios gratuitos, chat en vivo, marketing por correo electrónico y análisis agregando el complemento WordPress de HubSpot

3. Squarespace

Squarespace es un creador de sitios popular que ofrece magníficos diseños de sitios y herramientas creativas.

Squarespace cuenta con 60 plantillas optimizadas para dispositivos móviles entre las que puedes elegir para construir rápidamente tu sitio web. Dentro del editor de Squarespace, también puedes hacer la transición del escritorio a la tableta o vista móvil para garantizar que tus diseños respondan sin problemas a diferentes dispositivos. 

Squarespace como opción de CMS para diseño responsive

Imagen de Squarespace

4. Wix

Wix es otro creador de sitios web que ofrece suscripciones para crear sitios web gratuitos y de paga. Proporciona un editor fácil de usar con el que solo tendrás que arrastrar y soltar elementos y también dispondrás de alojamiento gratuito y funciones de seguridad.

Todas las plantillas de Wix proporcionan una experiencia optimizada para dispositivos móviles para tus visitantes. Al igual que Squarespace, el editor de Wix te permite ver cómo luce tu sitio web en múltiples dispositivos. 

Wix como opción de CMS para diseño responsive

Imagen de Wix

Mejores prácticas de diseño web responsive

Con un CMS intuitivo o un creador de sitios, el diseño responsive es fácil. Pero incluso si estás utilizando el mejor CMS no puedes compensar el contenido y los medios optimizados para dispositivos móviles, esa parte depende de ti. Por eso a continuación te hablaremos sobre algunas de las prácticas recomendadas de diseño web responsive; así podrás crear una experiencia web amigable para los dispositivos móviles de tus visitantes y clientes. 

1. No descuides los botones de CTA

¿Qué quieres que hagan los visitantes de tu sitio cuando llegan? Tomar acción. Esto podría ser haciendo clic en un llamado a la acción (CTA) como «Más información», «Descargar» o incluso «Comprar». 

¿Cómo interactúan los visitantes del sitio web con estos botones cuando están en tu sitio de escritorio? Si el CTA aparece, se desplaza o se encuentra en la parte inferior de tu sitio web quizá debas evaluar cómo los visitantes móviles pueden acceder a ellos y si te están dando los resultados que esperas.

Por ejemplo, supongamos que ofreces un CTA principal como pedir una demostración gratuita en la parte superior de tu escritorio donde los visitantes pueden ver en cada página. 

CTA de HubSpot para solicitar una demostración

Sin embargo, cuando ves el sitio móvil, no cabe en el encabezado. En lugar de eliminarlo por completo, considera mover el botón o incluirlo en tu menú en donde los visitantes aún puedan verlo y hacer clic en él. 

CTA de HubSpot en diseño responsive

Además ten en cuenta el tamaño de las áreas en las que se puede hacer clic en tu sitio móvil. A diferencia de un sitio de escritorio, donde los visitantes pueden usar el cursor del mouse para hacer clic en los botones y enlaces, están usando los dedos para navegar. 

Se recomienda que los elementos en los que se puede hacer clic en dispositivos móviles tengan al menos 48 píxeles de altura. Esto incluye botones, campos de formulario, enlaces en línea y navegación por menús.

2. Usa SVG

Si tu sitio web incluye ilustraciones o iconos, estos deben formatearse como gráficos vectoriales escalables (SVG).

Gráfico vectorial escalable para diseño responsive

Imagen de PNG Image

Los SVG se pueden escalar infinitamente, a diferencia de otros formatos de medios como JPG y PNG. Esto garantiza que tu sitio web ofrezca una experiencia de navegación de alta calidad para los usuarios en cualquier dispositivo. También ayuda a que tu sitio se cargue más rápido, lo cual es bueno para la experiencia del usuario y las clasificaciones de SERP, como lo hemos comentado. 

3. Asegúrate de que tus imágenes aparezcan a escala

Las ilustraciones y los iconos no son el único tipo de medio que cambia de tamaño en diferentes dispositivos. Tus imágenes también tienen que escalar. 

Por ejemplo, los sitios web de escritorio pueden requerir imágenes a 1200 píxeles, mientras que los sitios web móviles pueden necesitarlos a 400 píxeles. El uso de una resolución mayor en todos los dispositivos puede reducir la velocidad de la página, por lo que no se recomienda ese enfoque. 

Logo en diferentes pantallas con tamaños distintos gracias al diseño responsive

Imagen de 99designs

En su lugar, considera cargar diferentes resoluciones de imagen y designar qué imagen deseas mostrar en cada dispositivo. Esto normalmente se logra mediante la asignación de diferentes etiquetas multimedia a objetos específicos fuente, como tableta o dispositivo móvil, en el código de tu sitio web.

Nota: HubSpot permite el cambio de tamaño automático de la imagen en el contenido. Otra razón más para construir tu sitio web receptivo en CMS Hub.

4. Considera la tipografía

Es posible que una fuente que se ve hermosa en tu sitio de escritorio no se lea tan bien en un dispositivo móvil, que es un cuarto del tamaño. Si los visitantes no pueden leer tu sitio web, entonces no harán clic ni comprarán nada. 

Textos en diseño responsive

Imagen de iA

En caso de que le dieras el enfoque contrario, la rotación de las fuentes de tu sitio web en torno a la experiencia móvil puede dejar a los usuarios de tu escritorio con textos que son demasiado grandes y que van en contra de la identidad de tu marca.

Estos son nuestros mejores consejos para la tipografía en diseño web responsive:

  • El tipo de cuerpo de 16 puntos es la regla general para el contenido web de escritorio móvil.
  • Evita las fuentes muy finas que se desvanecen en las pantallas más pequeñas.
  • Asegúrate de que todos los títulos sean claramente más grandes que el contenido del cuerpo y los subtítulos.
  • Usa colores que contrasten para tu tipografía para que no se desvanezca en los colores de fondo de tu sitio web.

5. Aprovecha las funciones del dispositivo

Si bien los leads y los clientes no pueden llamarte por sus ordenadores, definitivamente pueden hacerlo desde sus teléfonos inteligentes. Considera cambiar tu CTA «Chatea ahora» por «Llama ahora» e incluye el número de teléfono de tu empresa en lugar del correo electrónico. 

Además, si tu empresa tiene una aplicación móvil solicita a los visitantes del sitio que la descarguen desde tu sitio web, algo que probablemente no puedan hacer en sus computadoras.

6. Prueba tu sitio web

Como siempre, prueba tu sitio web responsive en diferentes dispositivos y navegadores. Consulta la herramienta de prueba de dispositivos móviles de Google para ver cómo funciona tu sitio web.

Esta herramienta de Matt Kersley también proporcionará un vistazo a tu sitio web en dispositivos de diferentes tamaños. Por supuesto, también puedes usar tus propios dispositivos móviles. 

Plantillas de diseño web responsive

La mejor manera de garantizar que tu sitio web tenga un diseño responsive es comenzando con una plantilla de diseño web responsive. A continuación te presentamos cinco hermosas plantillas disponibles en HubSpot Asset Marketplace que brindarán a los visitantes de tu sitio una experiencia de navegación amigable para dispositivos móviles. 

Obtén acceso a miles de plantillas con HubSpot Marketing Profesional.

1. DjanGo

Precio: $200 USD

Plantilla responsive DjanGo

La plantilla DjanGo es una plantilla de sitio totalmente personalizable y responsive. Su diseño moderno y minimalista permite a los visitantes que se centren en el contenido del sitio y en  la información del producto. 

2. Prodigy

Precio: Gratuita

Prodigy, plantilla responsive gratuita

La plantilla Prodigy es una plantilla de sitio web limpia que llega a tu audiencia con medios brillantes y múltiples CTA. Convierte automáticamente tu diseño para adaptarse a cualquier dispositivo utilizado por los visitantes de tu sitio web.

3. Quantum

Precio: $75 USD

Plantilla responsive Quantum

La plantilla Quantum es un tema multipropósito que captura a tu audiencia con títulos en negrita y un fondo de video. Personaliza tu sitio con una variedad de diseños de página y módulos. 

4. Kalahari

Precio: $199 USD

Plantilla Kalahari con diseño responsive

La plantilla Kalahari es un tema responsive que ofrece navegación dinámica y personalización a nivel de página. Usa esta plantilla para convertir a tu audiencia con CTA brillantes y sobresalientes. 

5. Startup Framework

Precio: Gratuita

Startup Framework, tema responsive gratuito

Imagen de InboundLabs

La plantilla de Startup Framework es única, con tipografía en negrita y gráficos brillantes. Construye tu sitio web de forma nativa dentro del editor de contenido de HubSpot y elige entre miles de iconos y docenas de módulos personalizables. 

Con tantos consumidores comprando y navegando en sus dispositivos móviles, el diseño responsive es absolutamente imprescindible; sin él, podrías perderte leads e ingresos.

Usa estas herramientas, plantillas y prácticas recomendadas para comenzar hoy a presentar tu sitio con un diseño web responsive. 

Rediseño Web

 Rediseño web

Publicado originalmente en septiembre 17 2020, actualizado septiembre 17 2020

Topics:

SEO