Diseño adaptable¶
WebAcappella permite crear sitios web responsivos que se ajustan automáticamente a los distintos tamaños de pantalla: ordenador, tableta y móvil.
El programa funciona como un sistema modular basado en casillas, filas y columnas.
Entender el modo responsive¶
Un sitio responsivo debe adaptarse sin perder legibilidad ni ergonomía.
WebAcappella incluye una serie de puntos de interrupción para ajustar el diseño de la página al tamaño de la pantalla.
Los tres modos principales de visualización disponibles son :
✔ Modo Escritorio: Visualización en pantalla grande (PC, Mac).
✔ Modo tableta: Adaptación a pantallas intermedias.
✔ Modo móvil: optimización para smartphones.
Acceso a las opciones de pantalla¶
Localice los iconos de los distintos tamaños de pantalla encima de la superficie de trabajo.
Haga clic en el icono para visualizar la vista previa del sitio en cualquier momento.
Propiedades sensibles¶
Algunas propiedades pueden adaptarse en función del modo de visualización (Escritorio, Tableta, Móvil).
Cuando se puede modificar un ajuste para una pantalla específica, aparece un icono de modo de respuesta junto al parámetro.
Al activar estas opciones, cada modo de visualización tendrá su propio ajuste, sin afectar a los demás.
Otro ejemplo es la adaptación del tamaño de letra. Un texto demasiado grande puede ser difícil de leer en un teléfono móvil.
Redimensionar columnas¶
Cada línea tiene una o varias columnas, cuya anchura varía de 1 a 12 unidades.
Activar el modo columna manteniendo pulsada la tecla Opción (Mac) / Alt (Windows) facilita la selección de columnas.
Cuando se selecciona una columna, puede :
Muévelo para reorganizar la estructura.
Cambia su tamaño para ajustar su posición en la línea.
Utiliza un diseño fluido: Las columnas se reorganizan automáticamente en función de la pantalla.
Compruebe el redimensionamiento de las columnas: deben adaptarse para que no se vean demasiado apretadas en los dispositivos móviles.
Modo cascada: apilar elementos en una columna¶
El modo Cascada permite forzar el apilamiento vertical de los elementos contenidos en una columna en una pantalla determinada.
Es especialmente útil en dispositivos móviles para evitar una disposición horizontal demasiado apretada y mejorar la legibilidad.
Selecciona una línea.
Acceda a los parámetros de la línea (panel derecho).
Activar el modo «Cascada» para la pantalla actualmente seleccionada.
Los elementos de cada columna se apilan automáticamente en vertical.
Utilice un «Break» para forzar un salto de línea¶
El elemento Break puede utilizarse para forzar que una línea vaya por debajo de la anterior en una pantalla determinada. Este ajuste se hereda en pantallas más pequeñas, lo que garantiza una mejor adaptación del contenido.
Debe seleccionar una línea.
Abra la barra de herramientas de elementos.
Seleccione el elemento Break.
Arrastre y suelte el salto en una línea en la que desee forzar un salto de línea.
⚠ Un Break insertado en una línea estará activo en esta pantalla y tamaños más pequeños.
Ocultar elementos de la pantalla¶
Si un elemento es demasiado complejo para una pantalla pequeña, puede ocultarse en función del tamaño de la pantalla.
Seleccione un elemento.
Acceda a las opciones de visibilidad (en las propiedades de la derecha).
Marque o desmarque las opciones para mostrar u ocultar el elemento en escritorio, tableta o móvil.
Probar y finalizar la visualización¶
Cambie regularmente al modo móvil para comprobar el renderizado.
Ajuste los márgenes y el espaciado para evitar elementos demasiado ajustados.
Utilice la vista previa (Cmd + T / Ctrl + T) para ver el renderizado en condiciones reales.
Buenas prácticas¶
Utilice una estructura de columnas flexible para una mayor adaptabilidad.
Activar el modo Cascada en determinadas líneas para evitar elementos desalineados en móviles.
Utiliza un Break en una línea si tiene que pasar por debajo de las demás de una pantalla determinada.
Pruebe cada modo de visualización antes de publicarlo.
Optimice las imágenes y el texto para que sean fáciles de leer en todas las pantallas.