Smart Tiles Introduction
Une vignette comporte deux textes : un titre, qui nomme la destination, et une description facultative, qui indique en quelques mots ce que le visiteur y trouvera. Avec le titre du composant WebPart, ce sont tous les mots d'un panneau Smart Tiles : il est donc utile de savoir exactement comment ils sont affichés. Cet article présente les deux textes, les paramètres qui permettent de les afficher, de les masquer et de les dimensionner, ainsi que l'infobulle.
Titre et description
Les deux textes se saisissent dans la boîte de dialogue Properties (Propriétés) d'une vignette : cliquez sur le bouton … de la vignette et choisissez Edit Properties (Modifier les propriétés).
- Le Title (Titre) est affiché dans la vignette sous l'icône, dans la Font Color (Couleur de police) de la vignette et à la Font Size (Taille de police) du composant WebPart.
- La Description est affichée sous le titre dans un texte plus petit et légèrement plus clair — aux trois quarts de la taille du titre, mais jamais en dessous de 12 pixels.
Chaque texte occupe une seule ligne. Un texte plus large que la vignette est coupé par des points de suspension (…) ; il n'est pas renvoyé à la ligne. Le texte complet est toujours disponible dans l'infobulle.
L'infobulle
Lorsque le pointeur reste sur une vignette, une infobulle affiche le titre et, sur une seconde ligne, la description. L'infobulle apparaît même lorsque les textes sont masqués sur la vignette : un panneau de vignettes avec icône seule s'explique donc de lui-même au survol. Les lecteurs d'écran annoncent le titre de la vignette comme nom du lien.
Show Titles et Show Descriptions
Deux interrupteurs du groupe Appearance (Apparence) du volet de propriétés contrôlent les textes de toutes les vignettes à la fois :
| Paramètre | Effet |
|---|---|
| Show Titles (Afficher les titres) | Activé par défaut. Une fois désactivé, les titres disparaissent de toutes les vignettes et les icônes sont centrées. Utilisez-le pour une mosaïque de logos d'applications bien connus ou pour des vignettes d'images qui n'ont pas besoin de libellé. |
| Show Descriptions (Afficher les descriptions) | Activé par défaut. Une fois désactivé, les descriptions disparaissent de toutes les vignettes mais restent dans les infobulles. Utilisez-le pour un panneau compact, ou lorsque seules quelques vignettes ont une description et que le panneau paraît inégal. |
📝 Remarque
Les textes sont masqués, pas supprimés. En réactivant un interrupteur, vous retrouvez chaque titre et chaque description exactement tels qu'ils ont été saisis.
Font Size
Font Size (Taille de police) dans le groupe Appearance définit la taille des titres en sept paliers : 14, 16, 18, 20, 24, 28 et 32 pixels. La description suit à trois quarts de la taille du titre. La valeur par défaut est le palier 3 (18 px).
Un texte plus grand exige des vignettes plus larges : à 28 ou 32 px, un titre de deux ou trois mots remplit déjà une vignette Small. Associez les grandes tailles de police à des vignettes Medium et plus grandes, ou à des titres courts.
Vignettes sans titre
Une vignette dont le titre est vide, ou dont les titres sont masqués par le paramètre, affiche l'icône centrée verticalement. Donnez malgré tout une description à une telle vignette — elle apparaît dans l'infobulle — afin que la destination ait un nom pour les visiteurs qui ne sont pas certains de la signification de l'icône.
❗ Important
Une vignette qui renvoie vers une vidéo YouTube et utilise la Thumbnail (Miniature) de la vidéo comme arrière-plan n'affiche aucun texte sur la page publiée, quels que soient les paramètres : la miniature est le contenu de la vignette. Le titre et la description d'une telle vignette sont visibles en mode édition et dans l'infobulle.
Le titre du composant WebPart
Au-dessus des vignettes se trouve un titre pour l'ensemble du panneau. Cliquez sur l'espace réservé Web Part Title en mode édition et saisissez l'intitulé — il est affiché dans le style des autres titres de composants WebPart de la page. Laissez-le vide si le panneau n'a pas besoin d'intitulé ; rien ne s'affiche à sa place sur la page publiée.
Rédiger des textes adaptés
- Des titres d'un à trois mots. Help Desk, Book a Room, Expense Reports. Les verbes conviennent bien aux actions, les noms aux lieux.
- Des descriptions qui apportent quelque chose. Submit hours by Friday en dit plus que Time sheet system. Gardez-les sous environ 40 caractères pour qu'elles tiennent dans une vignette Small à la taille de police par défaut.
- Pas de répétition. La description ne doit pas reformuler le titre ; s'il n'y a rien à ajouter, laissez-la vide — la vignette est plus nette sans seconde ligne vide.
- Cohérence. Soit toutes les vignettes d'un panneau ont une description, soit aucune. Quelques vignettes avec une seconde ligne rendent les rangées inégales.
💡 Astuce
La façon dont la largeur des vignettes est définie, et donc la quantité de texte qui y tient, est expliquée dans KB10247. Tailles et disposition des vignettes dans Smart Tiles. La boîte de dialogue Properties est décrite dans KB10242. Comment ajouter et modifier une vignette dans Smart Tiles.
