Mosaico Modelos HTML

Modelos HTML de mosaico responsivos

Um modelo HTML de mosaico é entregue em arquivos que você pode abrir em um editor: uma página, uma folha de estilos e imagens já posicionadas em seções de larguras variadas. A captura de tela de demonstração exibe uma das disposições desses blocos. Tudo o que você fizer a seguir acontece no código por trás deles, por isso vale a pena abrir o código-fonte antes mesmo da pré-visualização.

A maior parte desse trabalho concentra-se no nível do conteúdo. Substituem-se fotografias, reescrevem-se legendas e duplica-se um card assim que a galeria ultrapassa o escopo da demonstração.

A marcação por trás de blocos de imagens irregulares

Composições em blocos são construídas de maneiras muito distintas, e a diferença se torna evidente no momento em que você inclui mais um item. Uma grade estruturada por extensões de colunas e linhas continua funcionando normalmente quando um card é copiado. Já um layout amarrado com deslocamentos fixos exige ajustes manuais a cada alteração.

Seções como estas costumam concentrar a maior parte do peso visual em uma página de mosaico:

• um bloco de imagem largo com um título curto sobreposto
• um card que se repete ao longo de uma galeria ou feed de categorias
• um bloco de texto para um serviço, uma anotação ou uma citação
• um bloco de chamada para ação que encerra o conjunto visual

Nenhum modelo inclui todos eles por padrão, portanto convém abrir a demonstração, verificar o que é genuinamente reutilizável e ignorar o restante.

Ordem do código-fonte em telas estreitas

Um celular exibe a composição em uma única coluna, e essa coluna segue rigorosamente a ordem do seu arquivo. Um bloco no canto superior direito em uma tela de notebook pode cair para a quarta posição em um telefone, mesmo contendo o projeto principal.

Há uma forma rápida de conferir isso. Desative os estilos no navegador e leia a página como texto simples. O que você verá é muito próximo da sequência percorrida pelo polegar do visitante ao rolar a tela. Se algo importante ficou enterrado lá embaixo, reposicione a seção dentro do HTML. Uma consulta de mídia adicional apenas esconderia o problema.

Como editar o código de exemplo sem quebrar os blocos

Encare o conteúdo de demonstração como peças de reposição. Copie um bloco que já se comporte exatamente como necessário, cole-o no ponto onde a galeria continua e troque a imagem e o texto contidos nele. Mantenha os nomes de classe definidos pelo autor: questionar essa convenção no meio do projeto custa mais caro do que simplesmente adotá-la.

Em seguida, reduza a largura da janela do navegador até que o mosaico se comprima em uma única coluna e observe qual projeto o visitante encontra primeiro. Se for aquele que você mostraria com orgulho a um cliente, o modelo está pronto para receber seu conteúdo.