Mosaïque Modèles HTML

Modèles HTML en mosaïque responsives

Un modèle HTML en 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 variées. La capture d'écran de démonstration montre une disposition possible de ces tuiles. Tout ce que vous ferez ensuite se déroule dans le code sous-jacent ; il est donc utile d'ouvrir le code source avant même l'aperçu.

L'essentiel de ce travail reste au niveau du contenu. Les photos sont remplacées, les légendes sont réécrites et une carte est dupliquée dès que la galerie dépasse le cadre de la démo.

Le balisage derrière des blocs d'images asymétriques

Les compositions en tuiles sont conçues de manières très diverses, et la différence apparaît dès que vous ajoutez un élément supplémentaire. Une grille structurée par des étendues de colonnes et de lignes continue de fonctionner lorsqu'une carte est copiée. En revanche, une mise en page calée sur des décalages fixes exige des retouches manuelles à chaque fois.

Des sections comme celles-ci représentent généralement l'essentiel d'une page en mosaïque :

• une tuile d'image large surmontée d'un titre court
• une carte qui se répète dans une galerie ou un flux de catégories
• une tuile de texte pour un service, une note ou une citation
• une tuile d'appel à l'action qui clôt le bloc visuel

Aucun modèle ne les intègre toutes par défaut ; il est donc utile d'ouvrir la démo, de recenser ce qui est réellement réutilisable et d'ignorer le reste.

Ordre du code source sur écrans étroits

Un smartphone affiche la composition sur une seule colonne, et cette colonne respecte l'ordre de votre fichier. Une tuile située dans le coin supérieur droit sur un ordinateur portable peut se retrouver en quatrième position sur un téléphone, tout en mettant en avant le projet principal.

Il existe un moyen rapide de le vérifier. Désactivez les styles dans le navigateur et lisez la page sous forme de texte brut. Ce que vous obtenez reflète fidèlement la séquence qu'un visiteur fait défiler du pouce. Si un élément important se retrouve relégué trop bas, déplacez la section directement dans le HTML. Ajouter une requête média supplémentaire ne ferait que masquer le problème.

Modifier le code de démonstration sans déformer les tuiles

Considérez le contenu de démonstration comme un ensemble de pièces détachées. Copiez une tuile qui se comporte déjà comme vous le souhaitez, collez-la là où la galerie se poursuit, puis modifiez l'image et le texte qu'elle contient. Conservez les noms de classes choisis par l'auteur : contester ces conventions au beau milieu du projet coûte plus cher que de s'y conformer.

Rétrécissez ensuite la fenêtre du navigateur jusqu'à ce que la mosaïque se réduise à une seule colonne, puis observez quel projet le visiteur découvre en premier. S'il s'agit de celui que vous présenteriez en priorité à un client, le modèle est prêt pour votre contenu.