La estructura de tres columnas crea varias relaciones que examinar cuando este bloque se presenta en una maqueta web adaptable. La imagen en orientación vertical situada a la izquierda cuenta con una presencia vertical considerable, por lo que su recorte y ancho deben mantenerse equilibrados frente al área de texto central en lugar de dominar la sección en anchos reducidos. El panel naranja «Espacios comunitarios» y el panel oscuro «Construir ciudades en el fondo del océano» también necesitan espacio suficiente para que sus encabezados y textos complementarios se ajusten en varias líneas sin perder su diferenciación visual.
El enlace central «más información» se ubica debajo del texto complementario, lo que convierte su posición en otro punto clave de revisión a medida que las columnas se estrechan o se apilan. Los párrafos, en su mayoría alineados a la izquierda, deben seguir siendo legibles, mientras que el texto centrado de los paneles debe conservar su énfasis sin generar bloques de color incómodamente altos. Las esquinas redondeadas deben permanecer visibles tras cambiar el tamaño, y el generoso espacio en blanco debe continuar separando los grupos de imagen y texto en lugar de convertirse en huecos verticales excesivos.
La sección es estática, por lo que la revisión de la maqueta atañe a la presentación y no al comportamiento de interacción. En anchos menores, compare cómo se reorganizan las tres columnas, cómo altera la imagen vertical la altura total de la sección y si los dos temas destacados continúan siendo fáciles de distinguir. Una presentación adaptable lograda mantiene conectados la imagen, la jerarquía editorial, los paneles y el enlace de lectura, al tiempo que adapta sus proporciones al ancho de pantalla disponible.
Al utilizar Creador de maquetas de sitios web, podrá ajustar los colores, las fuentes, el encabezado y el pie de página, el diseño, las columnas y otros elementos de diseño, así como el contenido y las imágenes.
Usa los Modos adaptables para ver cómo se ve el diseño web en pantallas grandes, ordenadores de escritorio, portátiles, tabletas y teléfonos. Cambia entre las vistas disponibles para comparar el mismo diseño en diferentes anchos de pantalla y revisa cómo la tipografía, las imágenes, el espaciado, la navegación y otros contenidos se adaptan a cada dispositivo.
Nicepage ofrece herramientas de diseño web adaptable para ajustar las vistas de cada dispositivo cuando el diseño inicial necesita ajustes. Puedes personalizar las vistas móviles por separado, cambiar el tamaño y la posición de los elementos, adaptar cuadrículas, listas y galerías, y ocultar elementos o bloques seleccionados en tamaños de pantalla específicos. Esto permite desarrollar una maqueta web adaptable en lugar de evaluar el diseño en un único tamaño de escritorio fijo.
Usa Vista previa de página en vivo para revisar el diseño sin la interfaz de edición. La vista previa instantánea puede ocultar el Navegador de páginas, el Panel de propiedades, las selecciones y los marcos, lo que facilita la evaluación de la presentación general, la jerarquía del contenido y el diseño adaptable tal como lo vería un visitante.
Este flujo de trabajo convierte la plantilla en una útil maqueta de sitio web adaptable para visualizar, comparar y perfeccionar cómo se verá el mismo diseño en diferentes tamaños de pantalla.