Este artículo te explica cómo tu diseño se adapta para mostrarse de forma igual de legible en ordenador que en móvil. A esto se le llama también Responsive Design (optimizado para móvil).
- El Responsive Design
- Regla general para las páginas personalizadas
- Consejo de diseño
- En un bloque de texto
- Para las páginas prediseñadas
- Cómo verificar el responsive de forma rápida y sencilla
El Responsive Design
El Responsive Design ajusta automáticamente la visualización de una página web al tamaño de pantalla del dispositivo utilizado (smartphone, tablet, ordenador de escritorio...).
Se trata de adaptar el sitio web a todas las resoluciones. Dicho de otro modo, los bloques de contenido (textos e imágenes) se redimensionan y se reorganizan según el espacio disponible en la pantalla.
Regla general para las páginas personalizadas
Las páginas personalizadas son las que más tiempo requieren para configurar y personalizar. Además, hay algunos ajustes necesarios para lograr una visualización coherente en tablet y móvil.
Visualización por defecto sin personalización
Si no personalizas el comportamiento responsive de tus páginas personalizadas, se aplicarán las siguientes reglas de lectura del contenido:
- Lectura del contenido de izquierda a derecha;
- Luego de arriba hacia abajo.
Veamos el siguiente ejemplo: un bloque de texto con su botón «TEXTO» (en azul) y un bloque de imagen con su botón «IMAGEN» (en verde). El orden de lectura de esta página siguiendo las reglas anteriores se indica con la flecha roja: Texto > Imagen > Botón texto > Botón imagen.
La visualización responsive por defecto tendrá este aspecto:
¡Esto no es precisamente lo que queremos transmitir!
Personalizar la visualización responsive
Hay que hacer un ajuste para agrupar el bloque de texto con su botón, y lo mismo con el bloque de imagen, que queremos que permanezca junto a su botón.
Para agrupar los bloques, selecciónalos manteniendo pulsada la tecla Ctrl del teclado y haciendo clic en los bloques que van juntos. Una vez seleccionados, verás la opción de agruparlos en el panel de la izquierda.
Tras la operación, solo tendrás un bloque (como se muestra a continuación). Puedes desagruparlos cuando lo necesites.
Así queda el resultado final en tablet y móvil:
¡Ahora sí tiene mucho más sentido!
Atención: si agrupas todos los bloques en uno solo (texto + imágenes + botones), se aplicarán las reglas de lectura generales dentro del bloque, con lo que el resultado sería como si no hubieras agrupado nada.
La buena práctica es agrupar solo los bloques que van juntos ;)
Consejo de diseño
A veces los bloques no tienen bordes ni separaciones visibles. El contenido queda comprimido y, en móvil, los elementos parecen pegados entre sí, lo que dificulta la lectura.
Aquí tienes un pequeño truco para darle más aire a tu sitio web y mejorar su visualización responsive.
Juega con los márgenes
La mayoría de los bloques tienen márgenes interiores y/o exteriores. Los encontrarás en el panel de la izquierda al seleccionar un bloque. ¡Ajustar estos márgenes te permite separar el contenido y darle más espacio!
Ajusta los márgenes antes de agrupar los bloques para el responsive. Siempre puedes desagruparlos, modificar los márgenes y volver a agruparlos.
En un bloque de texto
Una vez en la página, selecciona el bloque de texto y arrástralo al área de edición.
3. Añade contenido
Ahora puedes añadir los elementos directamente en este bloque.
4. Insertar una imagen
En el mismo bloque, haz clic en la opción imagen de la barra de edición.
A continuación, haz clic en Subir > Elegir archivo > Enviar al servidor.
Se abrirán automáticamente las propiedades de la imagen, donde podrás ajustar su altura y anchura. Haz clic en Aceptar para guardar los cambios.
En este caso, no recomendamos usar la opción Imagen del menú de la izquierda, ya que las imágenes añadidas desde esa opción se centran en responsive pero no se redimensionan.
Vista del sitio en versión escritorio
Vista en versión móvil
Para las páginas prediseñadas
¡Buenas noticias! Para las páginas que usan plantillas (Blog, Galerías de fotos, Calendario, Encuestas, Directorio) no hay que hacer nada.
Su contenido es responsive por defecto y no se puede modificar.
Cómo verificar el responsive de forma rápida y sencilla
Ya has agrupado los bloques, pero el trabajo no ha terminado. Ahora toca comprobar que la visualización es correcta en pantallas pequeñas. ¡La buena noticia es que puedes hacerlo sin móvil, directamente desde tu ordenador!
Para ello, sigue estos pasos:
1. Guarda los cambios
Si no guardas, los bloques no aparecerán agrupados. No olvides este paso.
2. Visualiza el resultado de la página
Hay varias formas de hacerlo. En general, puedes ver el resultado de la página accediendo a: Sitio web > Menús y páginas > «...» de la página en cuestión > Ver el resultado de la página:
3. Reduce el tamaño de la página de resultado (en ordenador)
Puedes reducir el tamaño de la ventana en tu ordenador para simular cómo se vería en un móvil. Lo importante es reducir la anchura de la página; la altura no importa.
Para reducir el tamaño de tu página, consulta la captura de pantalla a continuación:
4. Actualiza la página de resultado tras cada cambio
Este paso es fundamental y fácil de pasar por alto, sobre todo cuando haces varios cambios en la misma sesión de trabajo. ¡Actualiza siempre la página donde ves el resultado!
Guardar la página en modo edición no es suficiente, especialmente si ya tienes el resultado abierto en otra pestaña.
Tienes varias formas de actualizar una página:
- Pulsa F5;
- Haz clic en la flecha de actualización junto a la barra de dirección 🔄
También puedes consultar el resultado directamente desde tu móvil. Recuerda actualizar siempre la página.
Para saber más:
Comentarios
0 comentarios
El artículo está cerrado para comentarios.