No es ningún secreto que cada vez más personas acceden a Internet utilizando sus dispositivos móviles además de o en lugar de las computadoras de escritorio. De hecho, hay casi 7 mil millones de usuarios móviles en todo el mundo. (Como referencia, la población mundial es actualmente 7.7 billones. Eso es mucha actividad móvil).
Pero lo que están haciendo en esos dispositivos móviles es aún más convincente para los vendedores como nosotros.
40% de consumidores usar su dispositivo móvil para realizar investigaciones antes de realizar una compra en persona. Más de la mitad realizar compras de manera rutinaria usando sus teléfonos inteligentes, y 55% de los compradores realizar compras móviles después de encontrar productos en las redes sociales.
Como resultado, las empresas que tienen sitios web receptivos 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 de sitios web receptivos, cómo funciona y por qué debería hacer el cambio? Esta guía se propone responder esas preguntas, ofrecer algunas estadísticas convincentes y enseñarle las características clave del diseño receptivo que todos los especialistas en marketing deben conocer. Empecemos.
¿Qué es el diseño web receptivo?
El diseño web receptivo se refiere a un sitio web diseñado con funciones, contenido y medios compatibles con dispositivos móviles. Los sitios web receptivos cambian y se adaptan a cualquier dispositivo que pueda estar usando un visitante, incluidos teléfonos inteligentes, tabletas y computadoras de escritorio.
El diseño web receptivo ya no es una sugerencia: es una inversión crítica para aumentar el conocimiento de su marca, diversificar su experiencia de usuario (UX) y convertir más visitantes del sitio.
También le ahorra a su empresa un tiempo valioso. Posiblemente no pueda diseñar un sitio web separado para cada dispositivo potencial que puedan usar sus visitantes, sin mencionar las tecnologías futuras. El diseño web receptivo garantiza que su sitio web sea compatible con todos los dispositivos y pantallas para garantizar una experiencia agradable … tanto los dispositivos modernos como los que aún no se han inventado.
Vamos a cavar más en por qué El diseño receptivo es tan importante hoy en día.
Por qué es importante el diseño web receptivo
El diseño receptivo le permite llegar a un público más amplio y más comprometido donde sea y como prefieran navegar.
Más importante aún, la falta de diseño web receptivo puede hacer lo contrario: puede alienar su sitio web de los clientes que buscan una experiencia móvil atractiva. De hecho, la investigación muestra que puede perder hasta 90% de sus clientes potenciales debido a una mala experiencia optimizada para dispositivos móviles.
Son muchos clientes e ingresos.
Desempaquemos tres beneficios principales del diseño web receptivo.
1. El diseño web receptivo ayuda a los consumidores a descubrir su sitio web.
Mucha gente accede a Google en sus dispositivos móviles. 63%, de hecho. Google también penaliza a los sitios web que no ofrecen un diseño receptivo. Sus indexación móvil primero en realidad puede afectar la clasificación de su sitio web y puede hacer que aparezca en las páginas de resultados de los motores de búsqueda (SERP) a favor de los sitios web que ofrecen a los consumidores un diseño optimizado para dispositivos móviles.
Entonces, si la mayoría de su audiencia está buscando en su teléfono inteligente (como dice la estadística anterior), y su sitio web no presenta un diseño receptivo, es posible que los clientes no encuentren su sitio web en absoluto.
2. El diseño web receptivo mantiene a los compradores en su sitio web por más tiempo.
Sitio web las tasas de rebote en los teléfonos inteligentes son casi del 40% (en comparación con solo el 27% para tabletas). Además, una página 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 de sitios web rápidas y de alta calidad (al igual que Google), expectativas que puede cumplir con un diseño de sitio web receptivo. (Usa nuestro Calificador del sitio web para ver cómo funciona su sitio.)
3. El diseño web receptivo genera reconocimiento de marca positivo y confianza con los consumidores.
Finalmente, 57% de consumidores dicen que no es probable que recomienden 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 empresa piensen negativamente sobre la empresa misma.
El diseño receptivo del sitio web deleita a los compradores en línea, los alienta a recomendar su negocio y los hace volver a comprar más.
Cómo hacer un diseño web receptivo
Eso es posible hacer su propio sitio web receptivo usando CSS y HTML. Pero esto es 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 le permite construir su sitio web sin saber cómo codificar, y eso incluye saber codificar para un diseño receptivo. Los creadores de sitios son herramientas similares, pero renuncian a cierta funcionalidad que ofrece un CMS a cambio de facilidad de uso y precios más bajos.
El diseño web receptivo se puede lograr utilizando un CMS o un creador de sitios que facilitan diseños receptivos. Aquí hay algunas opciones comunes.
1. CMS Hub
Hub CMS es un CMS totalmente alojado, totalmente integrado. Se conecta a tu otro Herramientas HubSpot para que pueda presentar una experiencia unificada de marketing, ventas, servicio y navegación del sitio para sus visitantes, clientes y empleados.
En términos de la experiencia de construcción de su sitio, CMS Hub ofrece temas de sitios web preconstruidos que también están optimizados para dispositivos móviles para satisfacer a sus visitantes y clientes en cualquier lugar y sin importar dónde estén navegando.
2. WordPress
WordPress es el CMS más popular del mundo y mantiene este superlativo al ofrecer uno de los creadores de sitios web más directos: el editor Gutenberg.
WordPress ofrece miles de temas y plantillas para comenzar, incluidas numerosas plantillas con un diseño receptivo. (Encuentre temas de WordPress más receptivos aquí y aquí también).
Nota: Una vez que haya configurado un tema para su sitio web de WordPress, involucre y convierta a sus visitantes con formularios gratuitos, chat en vivo, marketing por correo electrónico y análisis agregando Plugin de WordPress de HubSpot.
3. Squarespace
Espacio cuadrado es un creador de sitios popular que ofrece magníficos diseños de sitios y herramientas creativas.
Squarespace ofrece 60 plantillas optimizadas para dispositivos móviles entre las que puede elegir construir rápidamente su sitio. Dentro del editor de Squarespace, también puede hacer la transición del escritorio a la tableta a la vista móvil para garantizar que sus diseños respondan sin problemas a diferentes dispositivos.
4. Wix
Wix es otro creador de sitios que ofrece suscripciones a sitios web gratuitos y de pago. Proporciona un editor de arrastrar y soltar fácil de usar, alojamiento gratuito y funciones de seguridad.
Todas las plantillas de Wix proporcionan una experiencia optimizada para dispositivos móviles para los visitantes. Al igual que Squarespace, el editor Wix le permite ver cómo se ve su sitio web en múltiples dispositivos.
Además de crear un diseño web receptivo utilizando una de las herramientas CMS o creadores de sitios anteriores, lea esta publicación de blog para aprender cómo optimizar su sitio web para uso móvil, también.
Mejores prácticas de diseño web receptivo
Con un CMS intuitivo o un creador de sitios, el diseño receptivo es fácil. Pero incluso si está utilizando el mejor CMS, no puede compensar el contenido y los medios optimizados para dispositivos móviles; esa parte depende de usted. Hablemos sobre algunas prácticas recomendadas de diseño web receptivo para ayudarlo a crear la experiencia web más amigable para dispositivos móviles para sus visitantes y clientes.
1. No descuides tus botones.
¿Qué quiere que hagan los visitantes del sitio cuando llegan a su sitio web? Toma acción, ¿verdad? Esto podría ser haciendo clic en un llamado a la acción (CTA) como Aprende más, Descargar, o incluso Comprar.
¿Cómo interactúan los visitantes del sitio con estos botones cuando están en su sitio de escritorio? Si estas CTA aparecen, se desplazan o se encuentran en la parte inferior de su página web, es posible que deba reevaluar cómo los visitantes móviles pueden acceder a ellas.
Por ejemplo, supongamos que ofrece una CTA principal como Obtenga HubSpot gratis en la parte superior de su sitio de escritorio donde los visitantes pueden ver si desde cada página.
Sin embargo, cuando ve su sitio móvil, no cabe en el encabezado. En lugar de eliminarlo por completo, considere mover el botón o incluirlo en su menú de hamburguesas (las tres líneas en la esquina superior), donde los visitantes aún pueden verlo y hacer clic en él.
Además, considere el tamaño de las áreas en las que se puede hacer clic en su sitio móvil. A diferencia de un escritorio, donde los visitantes pueden usar el cursor del mouse para hacer clic en botones y enlaces, están usando los dedos para navegar por su sitio web en su teléfono inteligente o tableta.
Se recomienda que haga clic en elementos en dispositivos móviles tener al menos 48 píxeles de altura. Esto incluye botones, campos de formulario, enlaces en línea y navegación por el menú.
2. Utilice gráficos vectoriales escalables.
Si su sitio web incluye ilustraciones o iconos, deben formatearse como gráficos vectoriales escalables (SVG).
Los SVG se pueden escalar infinitamente, a diferencia de otros formatos de medios como JPG y PNG. Esto garantiza que su sitio web ofrezca una experiencia de navegación de alta calidad para los usuarios en cualquier dispositivo. También ayudan a que su sitio se cargue más rápido, lo que ya hemos comentado es algo bueno para la experiencia del usuario y las clasificaciones de SERP.
3. Asegúrese de que sus imágenes escalen.
Las ilustraciones y los íconos 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.
En su lugar, considere cargar diferentes resoluciones de imagen y designar qué imagen desea mostrar en cada dispositivo. Esto generalmente se logra mediante la asignación de diferentes etiquetas «multimedia» a objetos específicos «fuente» (por ejemplo, tableta o dispositivo móvil) en el código de su sitio web.
Nota: HubSpot permite cambiar el tamaño automático de la imagen en el contenido – ¡Otra razón más para construir su sitio web receptivo en CMS Hub!
4. Considera tu tipografía.
Una fuente que se ve hermosa en su sitio de escritorio puede no leerse tan bien en un dispositivo móvil que es un cuarto del tamaño. Si los visitantes no pueden leer su sitio web, ciertamente no harán clic ni comprarán nada.
Alternativamente, la combinación de las fuentes de su sitio web con la experiencia móvil puede dejar a los usuarios de su escritorio con palabras feas que son demasiado grandes y chocan con su marca.
Estos son nuestros mejores consejos para la tipografía en diseño web receptivo:
-
El tipo de cuerpo de 16 puntos es la regla general para el contenido web móvil y de escritorio.
-
Evite las fuentes súper delgadas que se desvanecen en pantallas más pequeñas.
-
Asegúrese de que todos los títulos sean claramente más grandes que el contenido del cuerpo y los subtítulos.
-
Use colores contrastantes para su tipografía para que no se desvanezca en los colores de fondo de su sitio web.
5. Aproveche las características del dispositivo.
Si bien los clientes potenciales y los clientes no pueden llamarlo por sus computadoras, definitivamente pueden hacerlo en sus teléfonos inteligentes. Considere cambiar su «¡Chatea ahora!» CTA a «¡Llama ahora!» e incluya el número de teléfono de su empresa en lugar del correo electrónico.
Además, si su empresa tiene una aplicación móvil, solicite a los visitantes del sitio que abran su aplicación desde su sitio web, algo que es posible que no puedan hacer en sus computadoras.
6. Pruebe su sitio web con frecuencia.
Como siempre, pruebe su sitio web receptivo en diferentes dispositivos y navegadores. Revisa Herramienta de prueba para dispositivos móviles de Google para ver cómo funciona su sitio.
Esta práctica herramienta de Matt Kersley también proporcionará un vistazo a su sitio web en dispositivos de diferentes tamaños. Por supuesto, también puede usar sus propios dispositivos móviles.
Plantillas de diseño web receptivas
La mejor manera de garantizar que su sitio web tenga un diseño receptivo es comenzar con una plantilla de diseño web receptiva. A continuación hay cinco hermosas plantillas disponibles en HubSpot Asset Marketplace eso le dará a los visitantes de su sitio una experiencia de navegación amigable para dispositivos móviles.
Obtenga acceso a miles de plantillas con HubSpot Marketing Professional.
1. Plantilla de diseño receptivo de DjanGo
Precio: $ 200
los Plantilla DjanGo es una plantilla de sitio totalmente personalizable y receptiva. Su diseño moderno y minimalista permite a los visitantes centrarse en el contenido de su sitio y la información del producto.
2. Plantilla de diseño receptivo Prodigy
Precio: Gratis
los Plantilla prodigio es una plantilla de sitio web limpia que llega a su audiencia con medios brillantes y múltiples CTA. Convierte automáticamente su diseño para adaptarse a cualquier dispositivo utilizado por los visitantes de su sitio.
3. Plantilla de diseño receptivo cuántico
Precio: $ 75
los Plantilla cuántica es un tema multipropósito que captura a su audiencia con títulos en negrita y un fondo de video. Personalice su sitio con una variedad de diseños de página y módulos personalizados.
4. Plantilla de diseño receptivo de Kalahari
Precio: $ 199
los Plantilla Kalahari es un tema receptivo que ofrece navegación dinámica y personalización a nivel de página. Use esta plantilla para convertir su audiencia con CTA brillantes y sobresalientes.
5. Plantilla de diseño receptivo del marco de inicio
Precio: Gratis
los Plantilla de marco de inicio es una plantilla de sitio web única con tipografía en negrita y gráficos brillantes. Constrúyalo de forma nativa en el editor de contenido de HubSpot y elija entre miles de iconos y docenas de módulos personalizados.
Responda a su audiencia con un diseño receptivo
Con tantos consumidores comprando y navegando en sus dispositivos móviles, el diseño receptivo es absolutamente imprescindible. Sin él, podría perderse clientes potenciales, clientes e ingresos.
Utilice estas herramientas, plantillas y prácticas recomendadas para comenzar hoy con un diseño web receptivo.
Nota del editor: esta publicación se publicó originalmente en septiembre de 2014 y se ha actualizado para que sea exhaustiva.
