Mosaico Plantillas HTML

Plantillas HTML de mosaico responsivas

Una plantilla HTML de mosaico se entrega como archivos que puedes abrir en un editor: una página, una hoja de estilos e imágenes ya ubicadas dentro de secciones de diferentes anchos. La captura de pantalla de la demostración muestra una disposición de estos mosaicos. Todo lo que hagas después ocurre en el código subyacente, por lo que conviene abrir el código fuente antes de la vista previa.

La mayor parte de este trabajo se realiza a nivel de contenido. Las fotos se reemplazan, los pies de foto se reescriben y una tarjeta se duplica una vez que la galería supera el tamaño de la demostración.

Marcado detrás de bloques de imagen irregulares

Las composiciones de mosaicos se construyen de maneras muy diferentes, y la diferencia se hace evidente en cuanto añades un elemento más. Una cuadrícula unida por columnas y filas sigue funcionando cuando se copia una tarjeta. Un diseño con desplazamientos fijos requiere una corrección manual cada vez.

Este tipo de secciones suelen ser las más importantes en una página de mosaico:

• Una imagen grande con un título breve superpuesto.
• Una tarjeta que se repite en una galería o un feed de categorías.
• Un recuadro de texto para un servicio, una nota o una cita.
• Un recuadro de llamada a la acción que cierra el grupo visual.

Ninguna plantilla incluye todas estas secciones por defecto, así que conviene abrir la demo, identificar las que son realmente reutilizables e ignorar el resto.

Orden del código fuente en pantallas estrechas

En un teléfono, la composición se muestra en una sola columna, que sigue el orden del archivo. Un recuadro en la esquina superior derecha de un portátil puede ocupar el cuarto lugar en un teléfono, aun mostrando el título del proyecto.

Hay una forma rápida de comprobarlo. Desactive los estilos en el navegador y lea la página como texto plano. El resultado es similar a la secuencia que sigue un visitante al desplazarse con el dedo. Si hay algo importante oculto, mueva la sección dentro del HTML. Una consulta de medios adicional solo lo ocultaría.

Editar código de ejemplo sin modificar los mosaicos

Trata el contenido de demostración como piezas de repuesto. Copia un mosaico que ya funcione como necesitas, pégalo donde continúa la galería y luego cambia la imagen y el texto. Los nombres de las clases se mantienen como los eligió el autor, y discutir sobre esa convención a mitad del proyecto resulta más costoso que seguirla.

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