Boucle Modèles HTML

Modèles HTML de boucle pour le contenu répété

Un modèle HTML de boucle définit une unité répétée unique et la remplit avec du contenu dynamique provenant d'articles, de produits ou d'enregistrements de projets. Vous choisissez un bloc d'élément prêt à l'emploi, vous l'adaptez aux entrées que vous publiez, et la boucle génère ce balisage pour chaque enregistrement. Rien n'est dupliqué manuellement, de sorte qu'un seul bloc détermine la lecture de toute la grille.

Où s'arrête le modèle et où commence le contenu

La confusion habituelle avec les boucles consiste à confondre le modèle avec l'élément lui-même. Un modèle contient des emplacements vides : souvent une zone d'image, un titre et une ligne de métadonnées. Modifiez le nom d'un produit et un seul enregistrement change ; modifiez le balisage, et toute la grille s'ajuste d'un coup.

Cette séparation laisse à la boucle trois éléments mobiles :

1. Le balisage de l'élément, qui fixe la hiérarchie et l'ordre de lecture ;
2. Les champs dynamiques, qui injectent les valeurs dans ce balisage ;
3. La grille externe, qui décide du nombre d'éléments placés côte à côte.

Ces trois éléments déterminent si un modèle prêt à l'emploi est exploitable. Un bloc d'élément avec deux champs ne conviendra pas à des entrées qui en comportent cinq.

Les jeux de champs diffèrent d'une boucle à l'autre

Toutes les boucles ne comportent pas une image, un titre et une description. Le jeu de champs dépend du type de contenu et décide de ce que le lecteur remarque en premier.

Trois cas familiers montrent à quel point ces ensembles divergent :

1. Une boucle d'articles associe la date, l'auteur et l'extrait au titre, de sorte que l'extrait ne prenne jamais le pas sur lui ;
2. Une boucle d'événements commence par la date et le lieu, afin que le bloc temporel ait plus d'importance que l'image ;
3. Une boucle d'annuaire présente la catégorie, l'adresse et les coordonnées, avec le bouton d'action à côté.

Tous trois répètent un même squelette, pourtant la pondération interne varie, et faire correspondre un modèle à cette pondération constitue l'essentiel du travail de sélection. Adapter une mise en page d'article à des enregistrements d'événements implique de réorganiser les champs.

Préserver l'ordre sur toutes les tailles d'écran

Les blocs répétés se lisent bien sur un écran large, mais deviennent plus difficiles à lire dès que les colonnes s'empilent. Ce qui importe alors, c'est que l'enregistrement reste cohérent : l'image au-dessus de son propre titre, le prix à côté de son propre nom, l'action rattachée à sa propre entrée.

Le contenu d'exemple masque cela, car les éléments de démonstration ont généralement la même hauteur. Les problèmes apparaissent lorsqu'un titre de projet s'étend sur trois lignes et que le suivant n'a presque aucune description. Il est utile de charger vos entrées les plus longues et les plus courtes dans le modèle choisi avant de publier à grande échelle.

Dans Nicepage, l'Élément Grille place les éléments répétés dans des cellules responsives ; le guide sur le Web design responsive détaille ses réglages.

Un modèle HTML de boucle prend tout son sens lorsque la structure, la lisibilité et l'ordre des données se maintiennent quel que soit le nombre d'enregistrements et la largeur d'écran.