How to make a graphic email ? HTML and visual guidelines for emailing

We are talking about making an html file according to a graphic design (often developed by the client in a Word file).
Such a file is used for emails, e.g. as a bulk B2B offer to general email addresses (secretariat@, info@, office@ etc.).

First and foremost, it is necessary to ensure its responsiveness, i.e. to ensure readability on different screens, especially the so-called „mobile phone”

And stay below the general SPAM bar. The following rules will help with this – there are more, but these are the most important.

TECHNICAL EMAIL GUIDELINES (HTML, CSS)

• maximum width 600 pixels
• total weight of the email up to 400 KB (text+photos+graphics)
• graphics and photos only in jpg, png and gif formats (as all systems accept them)
• Avoid large images (weight – more than 100 KB). A large image can be divided into several horizontal strips, smaller ones
• use ALTs, i.e. suitable image names (displayed if the image is not loaded)
• Fonts – it is best to use so-called „safe fonts”, which display correctly on all devices. These include Arial, Helvetica, Tahoma, Times New Roman and Georgia
• total ostling should be done within a single html file, in the body and/or head. By the way, it is worth mentioning that Gmail (i.e. the most popular mail system) reads styling in the head vide: https://developers.google.com/gmail/design/css

VISUAL / CONTENT GUIDELINES FOR THE E-MAIL

• a sender by name increases the credibility of the email
• a short subject of the email has better effectiveness
• it is worthwhile to summarise the email in the first sentence or to present its greatest benefit, as some email systems, e.g. Gmail, show this alongside the sender and subject of the email
• a logo in the header,
• a single-column layout, exceptionally a two-column layout (if the second column is small in content)
• a large, clear CTA (Call to Action – that is, a key to click through to a page or elsewhere). Of course, the CTA key can be repeated
• in advertising writing, including mailings – the active side is usually better than the passive one
• it is a good idea to include a link to the preview of the message on the server, because even though the above requirements are met, some mail systems can still „spoof” the e-mail

Questions ? We create graphic e-mailings, so we are happy to answer – tel. 501 469 329

Autor:
Tomasz Kita [bio]
Studio72 / Katowice
e-mail: tomek@studio72.net
tel. 501 469 329

Wspieraj moją twórczość - https://buycoffee.to/tomasz-kita-studio72