Per far apparire l’immagine sul lato sinistro, avere il testo sul lato destro, e avere tutto ben giustificato e allineato verticalmente, ho dovuto strutturare tutto all’interno di una tabella HTML. Il layout della tabella è un po’ confuso con cui lavorare poiché c’è in realtà una tabella annidata dentro una tabella per ottenere l’allineamento desiderato. Ecco come appare lo scheletro della tabella HTML (tenetevi forte):
Immagine della testa
L’elemento immagine è annidato all’interno di un elemento cella tabella <td> ed è centrato verticalmente nella tabella usando valign="middle" per l’attributo e il valore dell’elemento cella tabella. Ho anche aggiunto l’attributo vertical-align: middle e il valore sull’elemento immagine stesso per buona misura.
La fonte dell’immagine è contenuta nel mio Google Drive personale dove l’immagine ha impostazioni di condivisione che permettono a chiunque di vedere l’immagine. Come nota, ho dovuto cambiare il link di condivisione fornito da Google per includere uc?id= all’inizio della richiesta GET nell’URL. Questo permette un download diretto da Google Drive e fa sì che l’immagine appaia correttamente nella firma dell’e-mail.
Per ottenere l’effetto immagine arrotondata, ho aggiunto border-radius: 100% come CSS sull’elemento immagine.
Icone e link dei social media
Le icone dei social media usate nella firma sono tutte composte da un elemento immagine avvolto da un elemento anchor contenente il link alla pagina del social media appropriato. La larghezza e l’altezza sono entrambi attributi specificati sugli elementi immagine (25 pixel è una buona larghezza/altezza da usare IMO). L’attributo source contiene un link a un file icona sul mio Google Drive, proprio come l’immagine dell’headshot. Ricordatevi di includere uc?id= nel vostro URL di origine quando vi collegate a un’immagine su Google Drive.
Le icone sociali sono tutte strutturate come elementi di lista all’interno di un elenco non ordinato per aiutare l’accessibilità (grazie Scott Vinkle per questo suggerimento). Il CSS applicato al ul rimuove i punti elenco e lo spazio extra che circonda l’intera lista non ordinata. Il display: inline-block sull’elemento della lista permette di visualizzare ogni icona affiancata.