Consejos para que tu sitio sea apto para dispositivos móviles

Las mejores prácticas para garantizar que tus visitantes en dispositivos móviles puedan usar tu sitio fácilmente.

Última actualización: 21 de febrero de 2025

Todos los sitios de Squarespace han sido diseñados para que se vean bien en los dispositivos móviles desde el principio. No obstante, las adiciones que haces, como los archivos multimedia grande, muchos contenidos en una página y un menor espaciado entre las letras, pueden causar problemas con la carga y la visualización del sitio en los dispositivos móviles. Esta guía incluye nuestras mejores prácticas para que tu sitio siga siendo apto para dispositivos móviles.

Prueba la compatibilidad de tu sitio con los dispositivos móviles

Para ver cómo se muestra tu sitio en las pantallas más pequeñas, como las de dispositivos móviles, ingresa desde un dispositivo móvil o usa la vista en dispositivo para obtener una vista previa. Si tu sitio utiliza el Editor dinámico, debes organizar el contenido en tu diseño de dispositivo móvil como quieres que aparezca.

También puedes informarte sobre cómo se ven las diferentes funciones en estos dispositivos si visitas ¿Cómo aparecerá mi sitio en los dispositivos móviles?

Usa la Prueba de aptitud para dispositivos móviles de Google para hacer una evaluación rápida de la compatibilidad de tu sitio con los dispositivos móviles. Si la prueba dice que tu sitio no es apto para dispositivos móviles o tienes problemas cuando pruebas tu sitio en estos dispositivos, sigue los consejos de esta guía.

Nota

La prueba de aptitud para dispositivos móviles de Google es una herramienta de terceros y no está dentro del alcance de nuestro soporte técnico.

Cada dispositivo móvil trata a los sitios web de manera diferente

Por ejemplo, los teléfonos nuevos soportan mejor los sitios grandes y, por lo general, el tiempo de carga es más rápido en redes inalámbricas (en comparación con la conexión celular).

Algunos navegadores móviles pueden mostrar un mensaje de error si el tamaño de la página es demasiado grande. Sigue estos consejos para que tus páginas sean más pequeñas.

Mantén tus páginas en menos de 5 MB

Cuando el visitante carga una página, su dispositivo descarga todo el contenido. Los dispositivos móviles usan un hardware simple y las redes celulares para el acceso a internet. Requerir grandes cantidades de datos puede saturarlas. Para evitar problemas, minimiza la cantidad de contenido de cada página.

Debido que los tiempos de carga dependen del dispositivo y de la conexión, no hay un límite exacto. No obstante, las páginas cuyos contenidos pesan más de 5 MB pueden cargar lentamente con las conexiones celulares; así que cuanto más chicas, mejor.

Para verificar el tamaño de la página u obtener sugerencias para reducirlo, visita Cómo reducir el tamaño de la página para una carga más rápida.

Configura el espaciado entre letras en 0px o más

Si el espaciado entre letras de una fuente está configurado en menos de 0px, las letras pueden superponerse en los dispositivos móviles.

En el panel de Fuentes, haz clic en el formato de la fuente cuyo estilo quieres seleccionar. Asegúrate de que el espaciado entre letras esté configurado en 0px o superior. Para obtener más información, visita Cómo cambiar fuentes.

En el panel Estilos del sitio, asegúrate de que el espaciado entre letras esté establecido en 0px o superior para todas las fuentes.

image2.jpg

No abuses de los Bloques espaciadores

Cómo acceder a esta función

Los bloques de espacio no son compatibles con el Editor dinámico. Te recomendamos crear un diseño en dispositivo móvil independientemente del diseño en tu equipo.

Los bloques espaciadores agregan espacio vacío a una página, creando diseños minimalistas al visualizar un sitio en un equipo. En un dispositivo móvil, sin embargo, los bloques espaciadores suelen estar ocultos. Esto puede cambiar el aspecto del diseño de tu sitio móvil de maneras que no te agraden. En lugar de utilizar muchos bloques espaciadores, considera cambiar el relleno para agregar más espacio en blanco.

Asegúrate de que los estilos para dispositivos móviles estén habilitados (versión 7.0)

Cómo acceder a esta función

Los estilos para dispositivos móviles siempre están habilitados en la versión 7.1. Para obtener más información, visita ¿Cómo aparecerá mi sitio web en dispositivos móviles?

En los dispositivos móviles, la mayoría de las plantillas de Squarespace muestran contenidos en un diseño único y apilado para que los que visitan el sitio puedan desplazarse fácilmente por tus contenidos. Cuando los Estilos para dispositivos móviles están desactivados, los visitantes deben pinchar y hacer zoom para navegar tu sitio.

Para garantizar que los estilos para dispositivos móviles estén habilitados:

  1. Abre el panel de Diseño y haz clic en Configuración de plantilla.
  2. Cerciórate de que Estilos para dispositivos móviles no esté marcado.

Solo verás esta configuración si tu plantilla permite desactivar estilos para dispositivos móviles.

Más consejos de formato

Para obtener más consejos de formato móvil, visita ¿Cómo aparecerá mi sitio en un dispositivo móvil?, donde indicamos cómo se muestra el contenido en pantallas más pequeñas y cómo optimizar ciertos tipos de contenido para que sean compatibles con un dispositivo móvil.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Consejos para que tu sitio sea apto para dispositivos móviles