Pour que l’image apparaisse sur le côté gauche, que le texte soit sur le côté droit et que tout soit bien justifié et aligné verticalement, j’ai dû tout structurer à l’intérieur d’un tableau HTML. La mise en page du tableau est un peu déroutante, car il y a en fait un tableau imbriqué dans un autre tableau pour obtenir l’alignement souhaité. Voici à quoi ressemble le squelette du tableau HTML (accrochez-vous) :
Headshot Image
.
L’élément image est imbriqué à l’intérieur d’un élément cellule de tableau <td> et il est centré verticalement dans le tableau en utilisant valign="middle" pour l’attribut et la valeur de l’élément cellule de tableau. J’ai également ajouté l’attribut et la valeur vertical-align: middle sur l’élément image lui-même pour faire bonne mesure.
La source de l’image est contenue dans mon Google Drive personnel où l’image a des paramètres de partage qui permettent à quiconque de la visualiser. À titre de remarque, j’ai dû modifier le lien de partage fourni par Google pour inclure uc?id= au début de la requête GET dans l’URL. Cela permet un téléchargement direct à partir de Google Drive et assure que l’image apparaît correctement dans la signature du courriel.
Pour obtenir l’effet d’image arrondie, j’ai ajouté border-radius: 100% comme CSS sur l’élément image.
Icônes et liens sociaux
Les icônes de médias sociaux utilisées dans la signature sont toutes constituées d’un élément image enveloppé d’un élément ancre contenant le lien vers la page de médias sociaux appropriée. La largeur et la hauteur sont toutes deux des attributs spécifiés sur les éléments d’image (25 pixels est une bonne largeur/hauteur à utiliser, selon moi). L’attribut source contient un lien vers un fichier d’icône sur mon propre Google Drive, tout comme l’image du portrait. N’oubliez pas d’inclure uc?id= dans votre URL source lorsque vous faites un lien vers une image sur Google Drive.
Les icônes sociales sont toutes structurées comme des éléments de liste à l’intérieur d’une liste non ordonnée pour aider à l’accessibilité (merci Scott Vinkle pour cette suggestion). Le CSS appliqué sur le ul supprime les puces et l’espace supplémentaire entourant l’ensemble de la liste non ordonnée. Le display: inline-block sur l’élément de liste permet à chaque icône d’être affichée côte à côte.