What an HTML signature is
There are three kinds of email signature. A plain-text one is words only: it works everywhere and carries no photo, no colour and no links beyond the ones a mail app finds on its own. An image signature is a picture of a signature, which fails whenever pictures do not load. An HTML signature sits between them: your name, title and details are real text, each line can be a link, and the photo, the logo and the icons are small pictures placed among them.HTML and image signatures, compared.
Why tables
A web page is laid out by a browser. Classic Outlook for Windows does not use one: since Outlook 2007 it has displayed HTML email with Word's rendering engine, and Microsoft's own reference for that engine lists which parts of HTML and CSS it supports, a fraction of what a browser handles. What it, and every other mail client, lays out the same way is the table: rows and cells, nested inside each other, with their widths written on them.
So an email signature is a table of tables, built the way web pages were built before browsers had anything better. It looks archaic in a code editor, and it is the reason the signature is the same shape in Outlook as in Gmail.
Why the styles are inline
A web page keeps its styles together in a style block and refers to them by name. An email cannot count on that: Can I email records that Gmail does not support a style block inside the body of an email, and a signature always sits inside the body. So every colour, size and font is written on the element it applies to, in its own style attribute.
That makes the HTML long and repetitive. It also means nothing about how the signature looks depends on a part of the email the mail client might strip.
Pictures: hosted, sized, doubled
The photo, the logo and the icons are pictures, and each is hosted: the email carries its address, and the reader's mail app downloads it when the email is shown. Each has its width written on it, so the layout holds its shape before the picture arrives, and each is made at twice that width, so it is sharp on a phone's dense screen.
An attached picture travels inside every email instead, and some mail clients then list a signature's logo and icons as attachments on every message.
Links that each do one job
Each link in a signature has a kind: https for a website or a booking page, mailto for an email address, and tel for a phone number, so a phone dials it when it is tapped. A signature goes to everyone you write to, so a value typed into it should never be able to become anything else. Animated Signature checks every link against a short list of allowed kinds and escapes every value it writes into the HTML.
Installing one
Most mail clients have a formatted signature editor, with buttons for bold, italics and links. Copy the signature as formatted content and paste it there. A few, such as Thunderbird, take HTML source instead: copy the code and paste that. The two do not mix. Code pasted into a formatted editor shows up as code in your emails, and formatted content pasted into a plain-text box loses everything but the words.
The steps for each client are in the install guides:Gmail, Outlook,Apple Mail andevery other client.
What ours looks like inside
Every signature Animated Signature makes is nested tables, with a width of 320 written on the outer table and on the card inside it. Every style is inline, every picture is hosted and given its size, and every design with a phone line links it with tel. There is no style block, no script and no tracking pixel, and a whole signature, with a banner and tracked links, stays under about 7,500 characters, where Gmail's limit is 10,000.