Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Diseño adaptable

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 ofrecen un control preciso sobre cómo cambia el tamaño del texto en dispositivos móviles.

Reorganización de contenido en dispositivos móviles

En general, el contenido se apila verticalmente en dispositivos móviles. Esto facilita la navegación en el sitio, y sirve para que las imágenes y el texto permanezcan visibles en un navegador más pequeño y angosto.

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, como Internet Explorer. Considera la audiencia de tu sitio y utiliza un tamaño de logotipo adecuado para la mayoría de las pantallas de los visitantes. Puedes cambiar la altura del logotipo en la mayoría de las plantillas.
  • Íconos: la mayoría de los íconos de nuestras plantillas, como íconos de menú, íconos de redes sociales y botones Compartir, se ajustan sin perder calidad porque tienen tipografía web o están basados en SVG. Algunas plantillas anteriores o descontinuadas tienen íconos basados en imágenes que no se ajustan en 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 un equipo es una excelente manera de ver cómo se adapta el sitio a las diferentes formas del navegador. A medida que realices cambios importantes en tu sitio, es recomendable tener el dispositivo a la mano, con el sitio abierto en el navegador. Cuando guardes cambios importantes en un equipo, actualiza el navegador de tu dispositivo 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.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 60 de 222