Mosaïque Modèles HTML

Modèles HTML mosaïques responsifs

Un modèle HTML mosaïque se présente sous forme de fichiers que vous pouvez ouvrir dans un éditeur : une page, une feuille de style et des images déjà intégrées dans des sections de largeurs différentes. La capture d’écran de démonstration illustre un agencement possible de ces tuiles. Toutes les modifications ultérieures sont effectuées dans le code source ; il est donc conseillé d’ouvrir ce dernier avant de prévisualiser l’image.

La plupart des modifications se font au niveau du contenu. Les photos sont remplacées, les légendes réécrites et une carte est dupliquée lorsque la galerie dépasse la taille de la démonstration.

Balisage des blocs d’images irréguliers

La composition des tuiles est construite de manières très différentes, et ces différences apparaissent dès que vous ajoutez un élément. Une grille maintenue par des fusions de colonnes et de lignes reste fonctionnelle même après la copie d’une carte. En revanche, une mise en page avec des décalages fixes nécessite des corrections manuelles à chaque fois.

Sur une page mosaïque, les sections suivantes constituent généralement l'essentiel du contenu :

• une image grand format avec un titre court superposé
• une fiche qui se répète dans une galerie ou un flux de catégories
• une vignette de texte pour un service, une note ou une citation
• une vignette d'appel à l'action qui complète l'ensemble visuel

Aucun modèle ne les inclut tous par défaut. Il est donc conseillé d'ouvrir la démo, de repérer les éléments réellement réutilisables et d'ignorer le reste.

Ordre d'affichage sur les écrans étroits

Sur un téléphone, la composition s'affiche sur une seule colonne, suivant l'ordre de vos fichiers. Une vignette située en haut à droite d'un ordinateur portable peut apparaître en quatrième position sur un téléphone, tout en affichant le titre principal.

Pour le vérifier rapidement, désactivez les styles dans votre navigateur et consultez la page en texte brut. Vous obtiendrez un affichage proche de la séquence de défilement d'un visiteur avec son pouce. Si un élément important est masqué, déplacez la section dans le code HTML. Une requête média supplémentaire ne ferait que le dissimuler.

Modifier le code d'exemple sans casser les vignettes

Considérez le contenu de démonstration comme des éléments de rechange. Copiez une vignette qui fonctionne déjà comme vous le souhaitez, collez-la à l'endroit où se poursuit la galerie, puis modifiez l'image et le texte. Les noms de classes restent tels que choisis par l'auteur ; il est donc plus coûteux de s'en écarter en cours de projet que de les respecter.

Réduisez ensuite la taille de la fenêtre du navigateur jusqu'à ce que la mosaïque se réduise à une seule colonne et observez quel projet apparaît en premier. Si c'est celui que vous présenteriez à un client, le modèle est prêt à recevoir votre contenu.