För att få bilden att synas på vänster sida, texten på höger sida och få allt fint rättfärdigat och vertikalt anpassat var jag tvungen att strukturera allt i en HTML-tabell. Tabelllayouten är lite förvirrande att arbeta med eftersom det faktiskt finns en tabell inbäddad i en tabell för att uppnå den önskade inriktningen. Så här ser skelettet av HTML-tabellen ut (håll dig fast):
Headshot Image
Bildelementet är inbäddat i ett tabellcellelement <td> och är vertikalt centrerat i tabellen med valign="middle" som attribut och värde för tabellcellelementet. Jag har också lagt till attributet vertical-align: middle och värdet vertical-align: middle på själva bildelementet för säkerhets skull.
Källan till bilden finns i min egen personliga Google Drive där bilden har delningsinställningar som gör det möjligt för vem som helst att visa bilden. Som en notering var jag tvungen att ändra delningslänken som tillhandahölls av Google för att inkludera uc?id= i början av GET-förfrågan i URL:en. Detta möjliggör en direkt nedladdning från Google Drive och ser till att bilden visas korrekt i e-postsignaturen.
För att uppnå den rundade bildeffekten har jag lagt till border-radius: 100% som CSS på bildelementet.
Sociala ikoner och länkar
De ikoner för de sociala medierna som används i signaturen består alla av ett bildelement som är omslaget med ett ankarelement som innehåller länken till lämplig sida för sociala medier. Bredden och höjden är båda angivna attribut för bildelementen (25 pixlar är en bra bredd/höjd att använda IMO). Källattributet innehåller en länk till en ikonfil på min egen Google Drive, precis som headshotbilden. Kom ihåg att inkludera uc?id= i din käll-URL när du länkar till en bild på Google Drive.
De sociala ikonerna är alla strukturerade som listelement i en oordnad lista för att underlätta tillgängligheten (tack Scott Vinkle för detta förslag). CSS som tillämpas på ul tar bort punktmarkeringar och extra utrymme som omger hela den oordnade listan. display: inline-block på listelementet gör att varje ikon kan visas sida vid sida.