Para que a imagem aparecesse do lado esquerdo, ter o texto do lado direito, e ter tudo bem justificado e verticalmente alinhado, tive que estruturar tudo dentro de uma tabela HTML. O layout da tabela é um pouco confuso de se trabalhar, pois na verdade existe uma tabela aninhada dentro de uma tabela para se conseguir o alinhamento desejado. Aqui está o aspecto do esqueleto da tabela HTML (prepare-se):
Headshot Image
>>
O elemento da imagem está aninhado dentro de um elemento de célula de tabela <td> e está centrado verticalmente na tabela usando valign="middle" para o atributo e valor do elemento de célula de tabela. Eu também adicionei o atributo vertical-align: middle e valor no próprio elemento da imagem para uma boa medida.
A fonte da imagem está contida dentro do meu próprio Google Drive pessoal onde a imagem tem configurações de compartilhamento que permitem a qualquer pessoa ver a imagem. Como nota, tive de alterar o link de partilha fornecido pelo Google para incluir uc?id= no início do pedido de GET na URL. Isto permite um download direto do Google Drive e garante que a imagem aparece corretamente na assinatura do e-mail.
Para conseguir o efeito de imagem arredondada, adicionei border-radius: 100% como o CSS no elemento da imagem.
Ícones e links sociais
Os ícones das mídias sociais usados na assinatura são todos compostos por um elemento de imagem envolvido com um elemento de âncora contendo o link para a página apropriada das mídias sociais. A largura e a altura são atributos especificados nos elementos da imagem (25 pixels é uma boa largura/altura para usar IMO). O atributo de origem contém um link para um ficheiro de ícone no meu próprio Google Drive, tal como a imagem do headshot. Lembre-se de incluir uc?id= na sua URL de origem quando criar um link para uma imagem no Google Drive.
Os ícones sociais são todos itens de lista dentro de uma lista não ordenada para ajudar na acessibilidade (obrigado Scott Vinkle por esta sugestão). O CSS aplicado no ul remove pontos de bala e espaço extra ao redor de toda a lista não-ordenada. O elemento display: inline-block na lista permite que cada ícone seja exibido lado a lado.