¿Cómo puedo editar en la vista para móvil sin que ello afecte a la versión de Squarespace para ordenador?

19 de marzo

Escrito por

Las páginas de Squarespace son adaptativas por defecto, pero el enfoque de la edición específica para móviles difiere entre la versión 7.1 y la 7.0. A continuación se indican las prácticas recomendadas para optimizar el diseño móvil de una página de Squarespace 7.1 sin alterar el diseño para ordenador, seguidas de soluciones para los usuarios de la versión 7.0 que necesiten realizar cambios exclusivos para móviles.

Squarespace 7.1 – Prácticas recomendadas para la edición en dispositivos móviles (Fluid Engine)

La versión 7.1 de Squarespace introdujo el «Fluid Engine», que permite un diseño para móviles prácticamente independiente. Puedes reorganizar y cambiar el tamaño de los bloques en la vista para móviles sin que ello afecte a su posición en la versión de escritorio. En otras palabras, el contenido es el mismo, pero tienes control sobre cómo se muestra en teléfonos y tabletas. Ten en cuenta que los cambios de estilo (como la elección de fuentes o la alineación del texto) siguen aplicándose de forma global, pero los ajustes de diseño son específicos para cada dispositivo.

Pasos para personalizar el diseño para móviles en la versión 7.1

Vista previa móvil: Accede al modo de edición de la página y haz clic en el icono «Vista móvil» de la barra de herramientas superior. El editor mostrará una vista previa de tu página adaptada al tamaño de un smartphone.
Selecciona una sección para editarla: haz clic en una sección mientras estás en la vista previa para móvil para activar la edición con Fluid Engine en esa sección en modo móvil. Verás la cuadrícula y los bloques igual que en el ordenador, pero ahora en un diseño vertical propio del móvil.
Reposicionar y cambiar el tamaño de los bloques: Arrastra los bloques para reordenarlos y cambia su tamaño según sea necesario para que se adapten mejor a los dispositivos móviles. Puedes apilar los elementos verticalmente o reducir el tamaño de las imágenes para que todo sea legible sin tener que ampliar ni desplazarse en exceso.
Ajustar el espaciado y las filas: Utiliza los ajustes de «Editar sección» para ajustar el número de filas de la cuadrícula o los espacios entre ellas. Elimina cualquier fila vacía sobrante que pueda estar ocupando espacio tras la reorganización. Asegúrate de que el texto no se superponga y de que haya suficiente espacio entre elementos para que el diseño se vea limpio en una pantalla pequeña.
Previsualización en dispositivos reales y guardar: Cuando estés satisfecho, guarda los cambios. Es recomendable probar la página en un teléfono o una tableta reales para confirmar que todo se muestra como esperabas. Si algo no te convence, vuelve al editor móvil para realizar los ajustes necesarios.

Consejos adicionales para la versión 7.1

Presta atención a los elementos que se superponen o que tienen una disposición compleja en el diseño para ordenador; es posible que haya que ajustarlos en la versión móvil para que el texto y las imágenes no se vean demasiado pequeños o desordenados.
Algunos ajustes de estilo (alineación del texto, colores, etc.) son universales; por ejemplo, al centrar un bloque de texto, este se centrará tanto en el ordenador como en el móvil. El editor móvil de Fluid Engine afecta principalmente a la maquetación y al tamaño, no al estilo básico.
Si quieres ocultar o mostrar determinado contenido solo en dispositivos móviles (o al revés), necesitarás una solución CSS. Squarespace no ofrece una opción nativa para «ocultar en dispositivos móviles». En estos casos, duplica ese contenido y utiliza CSS personalizado (con consultas de medios) para mostrar la versión adecuada en cada dispositivo.

Squarespace 7.0: diferencias entre las ediciones en móvil y en ordenador (soluciones y alternativas)

En Squarespace 7.0 (el editor clásico), no hay un editor de diseño para móviles independiente. El diseño es totalmente adaptativo, lo que significa que los mismos elementos y estilos se adaptan automáticamente a diferentes tamaños de pantalla. Cualquier modificación que realices afecta tanto a la versión de escritorio como a la de móvil, ya que estás editando un diseño único. Por ejemplo, si mueves un bloque o cambias el tamaño del texto mientras previsualizas la vista para móviles, ese cambio también se aplica a la vista de ordenador. Por eso muchos usuarios de la versión 7.0 notan que los ajustes realizados en la versión móvil «desordenan» su diseño para ordenador: la plataforma no se diseñó para permitir un posicionamiento independiente específico para cada dispositivo en la versión 7.0.

Ajustes de estilo para dispositivos móviles integrados (limitados)

Algunas plantillas antiguas de Squarespace 7.0 incluyen unos cuantos ajustes de estilo específicos para dispositivos móviles en el panel «Diseño → Estilos del sitio ». Estos varían según la familia de plantillas, pero pueden incluir opciones como ajustar el aspecto de la navegación móvil, recortar la imagen del banner para móviles o adaptar el tamaño de la fuente en pantallas más pequeñas.

Comprueba los «Estilos del sitio» de tu plantilla para ver si hay alguna sección denominada «Móvil». Por ejemplo, una plantilla puede tener una sección llamada «Navegación móvil» en la que puedes configurar un logotipo más pequeño o un color diferente para los iconos del menú, solo para dispositivos móviles. Utiliza estas opciones si están disponibles, ya que te permiten ajustar con precisión ciertos estilos para móviles sin necesidad de programar. Sin embargo, no todas las plantillas cuentan con una configuración avanzada para dispositivos móviles, y las que la tienen suelen limitarse a unas pocas áreas del diseño.

Uso de CSS personalizado y consultas de medios

La forma más eficaz de realizar cambios específicos para dispositivos móviles en la versión 7.0 sin que afecten a la versión de escritorio es añadir tus propias reglas CSS dirigidas a los tamaños de pantalla de los dispositivos móviles. Puedes añadir CSS personalizado en Diseño → CSS personalizado o a través de Ajustes → Avanzado → Inyección de código. La clave está en utilizar consultas de medios CSS (consultas que aplican estilos solo cuando el ancho del dispositivo se encuentra dentro de un rango determinado).

Por ejemplo, si quieres que un título aparezca más pequeño en los móviles, podrías escribir:

@media (max-width: 640px) { h1 { font-size: 2rem; } }

Este CSS solo aplicará el tamaño de letra más pequeño cuando la ventana de visualización sea de 640 píxeles o menos (aproximadamente el tamaño de un teléfono), sin modificar el estilo para ordenador. Puedes ajustar el punto de ruptura (640 píxeles en este ejemplo) a cualquier ancho en píxeles que se adapte a tu diseño.

Mostrar u ocultar contenido según el dispositivo

Otra solución habitual consiste en crear dos versiones del mismo contenido —una optimizada para ordenador y otra para móvil— y utilizar CSS para alternar su visibilidad. Por ejemplo, puede que tengas una sección que se vea bien en el ordenador, pero que resulte demasiado compleja para el móvil. Puedes duplicar esa sección, simplificar el contenido de la copia para su visualización en el móvil y, a continuación, utilizar clases CSS para garantizar que solo se muestre la versión adecuada en cada dispositivo.

Pasos para poner en práctica este enfoque

Duplica el elemento o la sección que quieras personalizar para dispositivos móviles. Ahora tendrás dos copias de ese contenido en la página.
Asignar una clase o un identificador distintivo a cada versión (por ejemplo, asignar a una de ellas un nombre de clase como solo para ordenador de sobremesa y el otro solo para móviles).
Escribe consultas de medios CSS para ocultar una versión cuando el tamaño del dispositivo sea el contrario. Por ejemplo:

/* Ocultar los elementos con la clase «desktop-only» en pantallas de 640 píxeles o menos */

@media screen and (max-width: 640px) { .desktop-only { display: none !important; } }

 /* Ocultar los elementos con la clase «mobile-only» en pantallas de más de 640 píxeles de ancho */

@media screen and (min-width: 641px) { .mobile-only { display: none !important; } }

En el CSS anterior, cualquier contenido etiquetado con .solo-escritorio desaparecerá en una pantalla pequeña (para que no sature la vista en el móvil), y cualquier elemento que contenga .solo-móvil no se verá en pantallas más grandes (por lo que solo se muestra en los móviles).

Esta técnica te permite mostrar diseños o contenidos ligeramente diferentes a los visitantes que acceden desde dispositivos móviles y a los que lo hacen desde ordenadores de sobremesa, manteniendo al mismo tiempo una única página. Ten en cuenta que ambas versiones del contenido están presentes en tu código HTML en todo momento (simplemente están ocultas mediante CSS), lo cual suele ser adecuado para la mayoría de los sitios web. Asegúrate de mantener ambas versiones actualizadas si el contenido cambia.

¿Por qué no crear una página web específica para móviles?

Squarespace (tanto la versión 7.0 como la 7.1) utiliza un diseño adaptativo: no hay un sitio web móvil completamente independiente, sino un único sitio que se adapta. El objetivo es garantizar la coherencia (para que no tengas que mantener dos sitios diferentes).

Squarespace 7.1 facilita esta tarea al permitirte reposicionar elementos para diferentes pantallas, mientras que la versión 7.0 se basa en el flujo predeterminado y en cualquier código personalizado que añadas. Mediante los métodos mencionados anteriormente —ajustes de estilo integrados cuando estén disponibles o CSS personalizado para cambios específicos—, puedes conseguir un diseño adaptado a dispositivos móviles en la versión 7.0 sin alterar el diseño para ordenador.

Notas finales

Utiliza los botones de vista previa de dispositivos de Squarespace y las herramientas de desarrollador de tu navegador para probar tu diseño en distintos tamaños de pantalla. El Centro de ayuda y los foros de la comunidad de Squarespace ofrecen más ejemplos de fragmentos de CSS para ajustes habituales en dispositivos móviles. Aunque existen plugins de terceros para mostrar u ocultar contenido en función del dispositivo, en la mayoría de los casos bastan unas pocas líneas de tu propio CSS (como se muestra arriba) para satisfacer las necesidades específicas de los dispositivos móviles. Combinando estas prácticas, podrás adaptar con total confianza el aspecto móvil de tu sitio web sin alterar la experiencia de usuario en el ordenador.