Carrelage Modèles HTML

Modèles HTML de vignettes propres avec code source modifiable

Lorsqu'un développeur hérite d'un modèle HTML de vignettes, il reçoit un ensemble de fichiers. La qualité du travail à venir dépendra de la manière dont ces fichiers sont agencés. Ce principe se retrouve partout : index de portfolio, grille de produits ou page d'accueil d'un magazine. Le code ci-dessous détermine si l'ajout de deux cents entrées sera une tâche d'après-midi ou nécessitera une réécriture complète.

Modèles de balisage à reproduire fréquemment

La répétition est essentielle dans une mise en page en vignettes et constitue le premier point à examiner. Une vignette comprend généralement une image, un titre et un lien, et sa forme doit rester identique de la première à la dernière entrée. Ouvrez le code source et recherchez les éléments suivants :

1. Des sections sémantiques autour de chaque groupe de vignettes, plutôt qu'un conteneur unique et continu.

2. Des titres qui descendent dans l'ordre, avec une entrée mise en avant au-dessus des éléments qu'ils introduisent.

3. Un modèle de vignette répété à l'identique, avec les classes de raccourci conservées pour une utilisation ultérieure.

4. Des liens placés directement sur les éléments sur lesquels un visiteur clique.

L'ordre de lecture reste inchangé

Une disposition en vignettes bien lisible sur un grand écran peut apparaître dans un ordre étrange sur un téléphone, car la position visuelle d'un panneau et son emplacement dans le code source diffèrent. L'élément principal en haut à gauche ne doit pas apparaître sous trois vignettes secondaires. Vérification rapide de tout bloc répété :

1. L'élément dont un visiteur a besoin en premier doit figurer en premier dans le code source.

2. Le texte d'accompagnement reste attaché à l'image qu'il décrit.

3. Le lien ferme le bloc au lieu de flotter au-dessus du contenu auquel il renvoie.

Si vous respectez ces règles une fois dans une vignette, les deux centièmes les hériteront. Dans le cas contraire, vous en entendrez parler par un client utilisant un téléphone.

Après l'exportation, vérifiez d'abord les liens

Nicepage exporte le projet depuis l'application de bureau, et le guide d'exportation décrit ce processus. Ce qui est enregistré sur le disque est un ensemble de fichiers que vous pouvez héberger où vous le souhaitez. Ainsi, rien n'est lié à l'hébergement Nicepage et le code source reste ouvert pour des modifications ultérieures.

La première vérification après l'exportation est rapide et utile. Assurez-vous que les liens relatifs et les chemins d'accès aux ressources fonctionnent toujours une fois les fichiers sur un serveur, que les attributs alt des images décrivent correctement leur contenu et que les titres sont conservés lors du remplacement du contenu. Les fiches répétées méritent une seconde vérification une fois remplies de contenu réel, car un titre adapté à la démo en quatre mots est rarement adapté à la réalité en douze.

Vous évaluez la facilité d'utilisation du code source. Un balisage lisible, modifiable et extensible sans difficulté reste exploitable longtemps après la modification de la mise en page.