Smart Tiles Introduction
Un panneau dans Smart Tiles n'est pas une grille fixe. Les vignettes s'organisent en lignes comme les mots dans un texte : chaque vignette demande une part de la ligne selon sa Size, la ligne se remplit de gauche à droite, et tout ce qui ne tient pas commence la ligne suivante. Comprendre ce fonctionnement fait toute la différence entre un panneau qui est simplement correct sur un écran et un panneau qui paraît soigné sur tous les écrans. Cet article explique les tailles, les retraits et la hauteur des vignettes, et propose quelques recettes de disposition.
Les six tailles
La taille d'une vignette est sa largeur, exprimée en part de la ligne. Choisissez-la dans le menu contextuel de la vignette : cliquez sur le bouton …, pointez sur Size et sélectionnez l'une des six entrées ; la taille actuelle est repérée par une coche.
| Taille | Part de base de la ligne | Vignettes par ligne (même taille) |
|---|---|---|
| Extra Small | 15 % | 6 |
| Small | 30 % | 3 |
| Medium | 45 % | 2 |
| Large | 65 % | 1, avec de la place pour une vignette Small ou Extra Small à côté |
| Extra Large | 80 % | 1, avec de la place pour une vignette Extra Small à côté |
| Full Width | 100 % | 1 |
Une nouvelle vignette est de taille Small.
Comment les lignes se remplissent
Deux règles complètent le tableau :
- Les vignettes s'étirent pour remplir la ligne. La part indiquée dans le tableau est un minimum. Lorsqu'il reste de la place dans une ligne (par exemple deux vignettes Small seules sur une ligne), les vignettes s'agrandissent pour la remplir, les tailles les plus grandes s'agrandissant plus vite que les plus petites. Les lignes sont donc toujours pleines, sans bord droit irrégulier.
- Une vignette qui ne tient pas passe à la ligne suivante. Trois vignettes Small remplissent une ligne ; une quatrième en commence une nouvelle. Une vignette Medium placée après deux vignettes Small ne tient pas dans les 40 % restants et commence une nouvelle ligne, où elle s'étire sur toute la largeur si rien ne la suit.
La seconde règle est celle qui surprend : une vignette Small isolée à la fin du panneau sera étirée en vignette Full Width. Comptez les parts de chaque ligne (elles doivent totaliser environ 90 à 100 %) ou terminez le panneau par des vignettes qui remplissent exactement leur ligne.
📝 Remarque
Les parts sont relatives à la largeur du composant WebPart, et non à celle de l'écran. Dans une section à deux colonnes, le composant WebPart est deux fois moins large : trois vignettes Small forment donc toujours une ligne, chacune étant deux fois moins large que dans une section pleine largeur. Sur un téléphone, où la page tient en une seule colonne étroite, les vignettes restent dans les mêmes lignes et deviennent simplement plus étroites.
Hauteur
La hauteur d'une vignette ne se définit pas directement. Elle est la somme du contenu (l'icône à sa Icon size, le titre à sa Font Size et la description, si elle est affichée) et de l'Internal Indent au-dessus et au-dessous du contenu. Toutes les vignettes d'une ligne ont la même hauteur, celle de la plus haute.
Pour agrandir les vignettes en hauteur sans agrandir l'icône ni le texte, augmentez Internal Indent ; pour les rendre quasi carrées, combinez un Internal Indent élevé avec des vignettes Small ou Extra Small.
Les trois retraits
Le groupe Appearance du volet des propriétés comporte trois paramètres d'espacement, chacun de 0 à 30 pixels :
| Paramètre | Ce qu'il espace |
|---|---|
| Internal Indent | Au-dessus et au-dessous du contenu d'une vignette : la « marge intérieure » (padding). Il détermine la hauteur des vignettes. |
| Icon Indent | Entre l'icône et le titre. |
| External Indent | Entre les vignettes voisines, horizontalement et verticalement : la « gouttière » (gap). À 0, les vignettes se touchent et le panneau devient une mosaïque compacte ; à 10–16, les vignettes se lisent comme des cartes distinctes. |
Recettes de disposition
Barre de liens rapides. Six vignettes Extra Small, External Indent 4, Internal Indent 8, titres affichés, descriptions masquées. Une ligne de boutons compacts sous la bannière principale d'une page d'accueil.
Panneau de service. Une vignette Full Width comme en-tête du panneau (une photo en arrière-plan et le nom du service), suivie de lignes de trois vignettes Small présentant les prestations du service. External Indent 8.
Vignette à la une et liste. Une vignette Large avec une image d'arrière-plan et une description, et une vignette Small à côté ; en dessous, deux lignes de trois vignettes Small. La vignette Large attire le regard vers le lien le plus important.
Mosaïque. Un mélange de vignettes Extra Small et Small avec External Indent 0, toutes dans des couleurs d'accentuation, icônes uniquement (titres masqués). Le rendu est optimal dans une section pleine largeur sur un site de communication.
💡 Astuce
Créez le panneau dans une section pleine largeur lorsqu'il constitue la navigation principale de la page ; consultez KB10042. Comment ajouter et configurer le composant WebPart Smart Tiles. Pour les textes des vignettes, consultez KB10249. Afficher des titres et des descriptions sur les vignettes.
❗ Important
Vérifiez le panneau avec une fenêtre étroite avant de le publier : réduisez la largeur de la fenêtre du navigateur ou utilisez l'aperçu mobile de la page. Les titres longs qui tiennent dans une vignette Full Width sont tronqués par des points de suspension sur une vignette Small ; la description, lorsqu'elle ne tient pas, est tronquée de la même manière.
