HTML Template Creation Guidelines
Design guidelines
Follow the below guidelines when creating your HTML templates, to reduce problems with compatibility and improve user experience.
Subject
- The email subject cannot exceed 18 characters.
- Keep the subject simple and highlight the main topic to achieve higher click-through rates.
Text
- Keep the text-to-HTML ratio between 30% and 70%, with a higher ratio being preferable.
- Avoid using symbols such as "——", "!", "…", and other special characters.
- Avoid using sensitive or promotional terms such as "free", "discount", "special offer", "low price", "cheap", "video", "make money", "bulk email", "get rich", "income", "friendship", "payment", "business opportunity", "secret", "confidential", "classified", "mystery", "secret recipe", as they increase the likelihood of emails being filtered to the spam folder. If such words must be used, convert them into an image.
- All URLs in the template must use absolute paths.
- URLs cannot exceed 255 characters and must not contain spaces or Chinese characters, as this may cause the URL to become untraceable.
Images
- Ensure that all images have an
<img alt>attribute. - Combine and compress images to reduce the number of requests and speed up image loading.
- Small and important images can be embedded in HTML using Base64 encoding.
- Use images sparingly, as some email clients do not load images by default, and excessive images may fail to load.
- Limit the number of images on a page to 8 and ensure the total image size does not exceed 1MB, reducing the risk of being marked as spam.
- The image filename must not contain the word "ad", as this may cause the image to be labeled as an advertisement.
- Do not use tags for image links, as they may be classified as spam.
Layout
- Take advantage of the table element, as it is compatible with most email clients.
- It is recommended to set the page width between 600px and 800px to reduce email stretching and layout misalignment.
- Avoid using complex layouts.
- Avoid using
<div>elements outside of tables. - Do not use complex interactions, and avoid using animations
Size
- The HTML file size should ideally be under 50KB.
- For Gmail, the message will be truncated if the HTML content exceeds 102KB, and the size limit of the entire email is 25MB.
Basic HTML template
For users new to building HTML templates, we recommend starting with a basic scaffold:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html title</title>
<style type="text/css">
body {
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
style="background:#fff;width:100%;margin:0 auto;max-width:800px">
<tbody>
<tr>
<td align="center">
<h2>An example of text</h2>
SmartLink is an advanced CRM tailored for the gaming sector. Unlike traditional CRMs that offer
generic solutions, SmartLink is built from the ground up to address the unique needs of game
developers and publishers. It provides a comprehensive suite of tools that integrate seamlessly
with
gaming environments, enabling companies to manage and analyze player data effectively.
</td>
</tr>
<tr>
<td align="center">
<h2>An example of image</h2>
</td>
</tr>
<tr>
<td align="center">
<a href="https://smartlink.intlgame.com/">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<img src="https://sg-smartlink-prod-1300342648.cos.ap-singapore.myqcloud.com/29162/4a55107bde0043669403780cabd6d3dc.jpg"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;"
height="auto" alt="Welcome Image">
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="center">
<h2>Mock the image not loaded</h2>
</td>
</tr>
<tr>
<td align="center">
<!-- image details -->
<a href="https://smartlink.intlgame.com/">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<img src="your image link"
alt="Click here if you can't view images"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;"
height="auto">
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="center">
<h2>You should provide subscribe or preferences options.</h2>
Upload to SmartLink after finish the email template. You can config the footnote in SmartLink
directly
</td>
</tr>
</tbody>
</table>
</body>
</html>
Unsupported HTML elements
// JavaScript相关标签
<script>
<noscript>
// 多媒体相关标签
<audio>
<video>
<embed>
<object>
<iframe>
<applet>
// 表单相关标签
<form>
<input>
<button>
<select>
<textarea>
<fieldset>
<label>
// 交互性标签
<details>
<dialog>
<menu>
<menuitem>
// 其他标签
<base>
<link> // 主要用于引用外部CSS或资源
<meta>
<style> // 内嵌样式表会被剥离，但内联样式仍然有效
<frame>
<frameset>
<noframes>
<iframe>
<param>
<canvas>
<map>
<area>
<svg>
Unsupported attributes
// animation
animation
transition
keyframes
// advanced layout
flex
grid
position: fixed
position: sticky
// some selectors
:hover
:focus
:active
::before
::after
// font
@font-face
Common HTML code snippets
Add support for Arabic language
Unlike most common languages, Arabic is written from right to left, and therefore requires additional support for proper display.
<!-- ensure the charset -->
<meta charset="UTF-8">
<!-- set the direction and text align -->
<tr>
<td align="center" style="direction: rtl; text-align: right;">
هذا نص باللغة العربية.
</td>
</tr>
Add redirect links
For scenarios where the email client does not download images, the <img alt> attribute can be used effectively to include a link to a webpage to display the images.
<a href="https://smartlink.intlgame.com/">
<img src="your image link"
alt="Click here if you can't view images" />
</a>
Restrict horizontal scrolling for images
Place the image inside a table to avoid horizontal scrolling.
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
style="background:#fff;width:100%;margin:0 auto;max-width:800px">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<img src="your image link"
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:12px;max-width:800px"
height="auto" alt="Welcome Image">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Add compatibility for mobile devices
@media only screen and (max-width:650px) {
.font-auto {
padding-left: 30px !important;
padding-right: 30px !important;
}
.font-size-auto {
font-size: 80px !important;
line-height: 120px !important;
}
}
Set background color
Background attributes are not well-supported in most email clients.
<!-- QQ Client don't support this -->
<body style="background:red"></body>
<!-- Outlook Client don't support Image background -->
Useful external tools
Litmus：Check for mobile compatibility
Email on Acid：Check for template issues
Mail-tester：Comprehensive evaluation score