Galerías para infografías con Google Web Designer (III)

Selección de Diseño fluido

Galerías web para infografías con Google Web Designer (III)

Diseño adaptable y fluido. Breakpoints. Tamaño de las imágenes. 

El diseño adaptable en función del tamaño y la orientación de la pantalla no está disponible en AMPHTML, de modo que ese tipo de proyecto no resultará útil a la hora de componer la galería web. Habrá que optar por un proyecto HTML, y si no se conoce de entrada el tamaño de pantalla en que se visualizará la galería, lo adecuado será utilizar una página HTML con diseño adaptable. Google Web Designer proporciona varios métodos para crear páginas HTML que se adaptan a la ventana gráfica. El diseño adaptable se basa en el uso de “media queries”, capaces de reconocer el tamaño de cada ventana gráfica y modificar el estilo del documento para conseguir su adaptación. Las media queries utilizan “breakpoints” (puntos de interrupción), que son las dimensiones límite de la ventana gráfica que determinan el momento en que hay que cambiar la configuración del diseño.

Diseño fluido

La disposición adaptable de los elementos en una página requiere activar el Diseño fluido, lo cual permite especificar su ubicación mediante porcentajes, en lugar de dimensiones fijas. El Diseño fluido debe activarse en la barra de opciones de herramientas cuando está activa la herramienta de selección y la opción Alinear con el contenedor, antes de utilizar cualquiera de las herramientas de alineación.

Breakpoints

Google Web Designer permite definir breakpoints horizontales y verticales, utilizando media queries CSS3 para cambiar las reglas de estilo de la página. También permite crear varias versiones verticales y horizontales de una misma página, cada una con sus breakpoints. Los breakpoints horizontales y verticales conforman una cuadrícula. Con solo dos breakpoints, uno horizontal y otro vertical, se crea cuatro estilos distintos.

Tamaño de las imágenes

Un tamaño de imagen lo suficientemente grande como para permitir una visualización de calidad en pantallas grandes puede producir un funcionamiento lento en dispositivos con pantallas más pequeñas. Las media queries no permiten cambiar de imagen cuando se rebasa un breakpoint, pero permiten ocultar las imágenes grandes en pantallas pequeñas (código CSS “visibility:hidden”) y las pequeñas en pantallas grandes.

Daniel Trujillano, Arquitecto
http://www.arquitectotrujillano.com/infografia/home.html
Infografía arquitectónica 3D