How to Craft HTML Emails and Where to Find Email Templates

How to create an HTML email without coding

• Use a block-based email builder. The easiest way to create an HTML email is to use the built-in visual editor in an email marketing service. Almost every email marketing platform offers drag-and-drop email builder functionality. With a block-based editor, assembling an email is simple: drag and drop pre-designed blocks (text areas, images, buttons, dividers, etc.) and fill them with your content. The email template can be customized to your brand: usually, replacing the sample text and images with your own is enough to create a ready-made email. An email can be crafted in just a few minutes without the need to learn HTML or CSS. For example, Altcraft provides a convenient HTML email builder that makes it easy to create and edit a template, save your custom blocks and reuse them later.

• Use a ready-made email template. Another option to create a beautiful HTML email without special skills is to find a ready-made template and edit it to suit your needs. Many ESPs (email service providers) offer template libraries where you can choose an appropriate design for your campaign. On top of that, third-party catalogs and tools are also available.

• Use a visual HTML editor. If block builders seem too limited for your tasks, you can craft emails using dedicated HTML editors or by writing code. Some services offer an "HTML code" mode where you can directly paste ready-made email code or edit the markup manually. This approach provides maximum flexibility since you are not limited to standard blocks and can implement unique designs or interactive elements.

How to send an HTML email

There are two main approaches here: sending an email through a specialized email service provider (ESP) or sending it manually using an email client.

Sending via ESP

The easiest and most reliable way to send an HTML email is to use a specialized service. For this, you need to design the email or upload a ready-made template, select the recipient list, and the system will automatically send the emails to each address.

For example, the Altcraft Platform can send emails to tens of millions of addresses, monitor opens and clicks, track conversions, and automatically log spam complaints and bounces.

Before launching a mass email campaign, send a test message to yourself: check how the email looks on different devices and whether every link works as intended.

Sending manually via an email client

This method is only suitable for individual emails. Cons: there is no personalization or statistics, it is easy to end up in spam, and when sending in bulk using "CC" or "BCC," you may accidentally reveal recipients' addresses. For large campaigns, it is necessary to use specialized services.

HTML email requirements

Email structure

Every email includes five main components: subject line, preheader, header, body, and footer.

• Subject line is a short text in the email headline that the recipient sees after the email lands in the inbox.
• Preheader is a short text that comes after the subject line.

• Header is the top part of the email that may contain logo, greeting, navigation links, and more.

• Body is the main content of an email: text, images, offers, and buttons.

• Footer is the bottom part of an email that includes contacts, legal information, unsubscribe link, "View in Browser" option, etc.

The "Unsubscribe" link is mandatory in promotional emails. It is also useful to add a "View in Browser" link: it can be helpful in case the email displays incorrectly.

Place the most important elements and the CTA button "above the fold", at the top of the screen. Keep an eye on the email size: Gmail truncates messages larger than ~102 KB, so make sure to remove unnecessary code and compress images.

Background and colors

Choose a simple solid background: it is less likely to cause unpleasant surprises when the email is rendered in different email clients. Complex gradients and patterns are better reserved for banners and tested separately. Also, remember about the dark mode compatibility: check the contrast to ensure that the text does not turn into "dark on dark" (or "light on light") and prepare logos/icons that look good in both light and dark modes.

Fonts and typography

It is not possible to use any fonts from external resources in HTML emails since email clients block such files. Use web-safe fonts that are almost universally available: Arial, Helvetica, Times New Roman, Verdana, Georgia, Tahoma, Trebuchet, etc. If your brand has its own font, set a sequence of fallbacks: first the brand font, then the standard ones, e.g., font-family: "CorporateFont", Arial, sans-serif.

Do not get carried away with rare fonts. If you want a distinctive style, design headlines as images but use web-safe fonts for the main text so that the email displays correctly for everyone. As for the sizes, to ensure readability, make body text at least 14 px, and headings at least 20 px or above.

Mobile adaptation

Most people read emails on their phones. Therefore, a mobile version is a must-have. Ensure that the email is readable on narrow screens: the font is not too small, buttons are easy to tap, and blocks do not overlap. Test the email not only in a browser, but also on an actual phone: what looks good on a desktop may render unreadable on a mobile device.

Images in email

Email clients often block images by default. Therefore, each one should have a clear alt tag so people understand the message even if the image does not load. Do not include any important text within images: if a banner does not load, the email becomes meaningless. Duplicate the key message using plain text. As for the formats, JPG, PNG and GIF are displayed everywhere, while SVG and WEBP may not be supported. Compress files: images larger than ~200 KB are a bad idea; people won't wait for images to load and will simply close the email.

Testing before sending

Every HTML email should be tested before sending:

Next, a manual test. Send the test message to yourself and open the email in at least two or three email clients, on a phone and a PC, in different browsers. Click through every link and button, ensure that personalization (name, promo code, etc.) is inserted correctly. 15 minutes of tests can save hours on editing and prevent unpleasant surprises in mass mailings.

Conclusion

HTML emails are the standard in email marketing. The marketer's task is to be able to assemble a template for the campaign's goal and know the basic design rules: readable typography, neat layout, adaptability, correct links, and the "Unsubscribe" option.

A good newsletter creates a clear dialogue with the client and increases ROI. Follow the simple recommendations above, and your emails will look neat, be consistently delivered to email addresses, and yield results.