Diseño adaptable

Descubre cómo Squarespace cambia el contenido de tu sitio para que se ajuste a cualquier dispositivo.

Última actualización: 16 de diciembre de 2024

El diseño adaptativo integrado de Squarespace cambia el tamaño de tu contenido e imágenes para adaptarse a diferentes dispositivos y anchos de pantalla. Con este diseño, los visitantes pueden ver automáticamente tu sitio de muchas maneras, por lo que no es necesario crear y mantener sitios separados para cada posible dispositivo, navegador y ancho de pantalla.

La respuesta a preguntas frecuentes como “¿Por qué mi banner se recorta en dispositivos móviles?” o “Mi imagen de fondo está distorsionada. ¿Cómo lo soluciono?” consiste en comprender el diseño adaptativo y elegir imágenes que se adapten a la forma de los diferentes navegadores y dispositivos.

Consejo

Para obtener más información sobre cómo aparecen determinados elementos del sitio en dispositivos móviles, visita ¿Cómo aparecerá mi sitio en dispositivos móviles?

sizes.gif

Mejores prácticas para las imágenes

Imagina una alfombra estrecha que encaja perfectamente en el piso de una habitación estrecha. Si pasas la alfombra a una habitación más pequeña, o simplemente la giras hacia los lados, no encajará correctamente.

Las imágenes, especialmente las imágenes de banner y de fondo, funcionan de la misma manera. El diseño adaptativo ayuda a que tu “alfombra” cambie de tamaño y forma. Para obtener el mejor efecto, selecciona y configura cada imagen para que se vea bien en tantas “habitaciones” como sea posible.

Al elegir una imagen para cargar, ten en cuenta:

Tamaño de Imagen

  • Para obtener recomendaciones sobre el tamaño y el ancho de los archivos de imagen, sigue nuestras prácticas recomendadas.
  • Para obtener más información sobre las prácticas recomendadas para las imágenes de banner, visita Cómo agregar imágenes de banner.
  • Elige imágenes con aproximadamente la misma forma que el contenedor donde aparecen. Por ejemplo, usa una imagen ancha para un banner. Para saber cómo funciona el recorte, visita Solución de problemas de recorte.

Contenido de imágenes

  • Los patrones abstractos e imágenes sin texto o bordes funcionan mejor.
  • Para las imágenes de fondo, los patrones repetidos ofrecen la mayor flexibilidad.
  • Cambia el punto focal para controlar cómo se centra la imagen.
  • Si es importante que no se recorte un área específica de la imagen (como una persona u objeto), puede servir agregar un área sin bordes, de modo que el recorte sea menos notorio.
bleed-areas.png

Prácticas recomendadas sobre texto

El tamaño del texto cambia automáticamente para ajustarse a la pantalla.

Consejos:

  • Agrega texto como leyenda, superposicióno directamente en la página, en lugar de utilizar imágenes que contengan texto. Esto reducirá los problemas de recorte a medida que las fuentes se ajustan con el ancho del navegador. Los motores de búsqueda también pueden indexarlo para obtener resultados.
  • Algunas plantillas de la versión 7.0 ofrecen un control preciso sobre cómo cambia el tamaño del texto en los dispositivos móviles.

Reorganización de contenido en dispositivos móviles

En el Editor dinámico, puedes reorganizar el contenido para el diseño en dispositivo móvil independientemente del diseño en un equipo.

En el editor clásico, el contenido se apila verticalmente en los dispositivos móviles. Esto facilita la navegación en tu sitio y sirve para que las imágenes y el texto se mantengan visibles en un navegador más pequeño y estrecho.

Para obtener más información:

Nota

Si tu sitio está en la versión 7.0 y has deshabilitado los estilos para dispositivos móviles, el contenido no se reorganizará ni se apilará en dispositivos móviles.

El contenido responde de manera diferente en pantallas Retina

La apariencia de tu sitio en pantallas Retina y HD depende del tamaño original de las imágenes que hayas subido.

Cuando subes una imagen, almacenamos hasta siete versiones de la misma, cada una con un ancho diferente. Nuestro diseño adaptativo integrado detecta automáticamente la pantalla del visitante y elige el mejor tamaño de imagen para adaptarse a ella. En las pantallas Retina, mostraremos una imagen el doble de grande según sea necesario.

Nota

Las imágenes cargadas a través de Estilos del sitio en la versión 7.0, como imágenes de fondo, son la excepción a esta regla. Para estas imágenes, siempre mostramos la imagen original en su tamaño completo.

Estos son algunos otros tipos de imágenes que debes tener en cuenta:

  • Logotipos: Cargar un archivo de imagen grande (el doble del tamaño necesario) para tu logotipo puede mejorar su apariencia en pantallas HD y Retina. Sin embargo, puede verse borroso en otras pantallas y algunos navegadores. Considera la audiencia de tu sitio y utiliza un tamaño de logotipo adecuado para la mayoría de las pantallas de tus visitantes. Puedes cambiar la altura del logotipo en la mayoría de las plantillas.
  • Íconos: en la mayoría de los íconos de nuestras plantillas, como los íconos de menú y los íconos de redes sociales, el tamaño se cambia a escala sin perder la calidad de imagen porque están basados en fuentes web o SVG. Algunas plantillas antiguas o descontinuadas tienen íconos basados en imágenes cuyo tamaño no se cambia a escala en las pantallas Retina.
  • Texto: cualquier texto añadido a tu sitio se ajustará a pantallas Retina sin perder calidad.

Para obtener más sugerencias sobre cómo optimizar imágenes, visita Cómo dar formato a imágenes para mostrarlas en la web.

Comparar en diferentes dispositivos

Comparar el sitio en dispositivos móviles con el sitio en una computadora de escritorio es una excelente manera de ver cómo se adapta el sitio a las diferentes formas del navegador. A medida que hagas cambios importantes en tu sitio, es recomendable tener el teléfono a mano, con el sitio abierto en el navegador. Cuando guardes cambios importantes en una computadora de escritorio, actualiza el navegador de tu teléfono inteligente para ver el efecto.

Probar los cambios en tu dispositivo móvil proporciona la visualización más precisa y es la única forma de explorar las orientaciones verticales y horizontales. Para obtener una vista previa rápida mientras estás editando en un equipo, usa la Vista en dispositivo.

Para obtener más información sobre cómo el tamaño de la ventana del navegador puede afectar el formato del contenido de tu sitio, visita Navegadores compatibles.

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.