Mosaico Plantillas HTML

Plantillas HTML tipo mosaico responsive

Una plantilla HTML tipo mosaico se entrega como un conjunto de archivos que puedes abrir en un editor: una página, una hoja de estilos e imágenes ya integradas en secciones de diferentes anchos. La captura de demostración muestra una disposición de esas teselas. Todo lo que hagas después ocurre en el código detrás de ellas, por lo que vale la pena abrir el código fuente antes de ver la vista previa.

La mayor parte de ese trabajo se mantiene al nivel del contenido. Las fotografías se reemplazan, los pies de foto se reescriben y se duplica una tarjeta una vez que la galería crece más allá de la demo.

El marcado detrás de bloques de imágenes asimétricos

Las composiciones en mosaico se estructuran de formas muy distintas, y la diferencia se hace evidente en el momento en que agregas un elemento más. Una cuadrícula sostenida por expansiones de columnas y filas sigue funcionando cuando se copia una tarjeta. Un diseño fijado con desfases rígidos exige arreglos manuales cada vez.

Secciones como estas suelen sostener la mayor parte del peso en una página en mosaico:

• una cuadrícula de imagen ancha con un título breve superpuesto
• una tarjeta que se repite a lo largo de una galería o feed de categorías
• una tesela de texto para un servicio, una nota o una cita
• una tesela de llamada a la acción que cierra el conjunto visual

Ninguna plantilla incluye todas ellas de forma predeterminada, por lo que resulta útil abrir la demo, identificar lo que es genuinamente reutilizable e ignorar el resto.

Orden del código fuente en pantallas estrechas

Un teléfono móvil muestra la composición en una sola columna, y esa columna sigue el orden de tu archivo. Una tesela en la esquina superior derecha en una computadora portátil puede aparecer en cuarto lugar en un teléfono y seguir conteniendo el proyecto principal.

Existe una forma rápida de comprobarlo. Desactiva los estilos en el navegador y lee la página como texto sin formato. Lo que obtendrás será muy similar a la secuencia por la que un visitante se desplaza con el pulgar. Si algo importante queda oculto allí abajo, reubica la sección dentro del HTML. Una media query adicional solo lo disimularía.

Editar código de muestra sin desarmar el mosaico

Trata el contenido de muestra como piezas de repuesto. Copia una tesela que ya se comporte exactamente como necesitas, pégala donde continúa la galería y luego cambia la imagen y el texto en su interior. Mantén los nombres de clase tal como los eligió el autor: discutir esa convención a mitad del proyecto cuesta más que adaptarse a ella.

Luego, reduce el ancho de la ventana del navegador hasta que el mosaico colapse en una sola columna y observa qué proyecto encuentra primero un visitante. Si es el que le mostrarías a un cliente, la plantilla está lista para tu contenido.