Skip to content

Mail guideline

Jump to bottom
Grenvals edited this page Mar 25, 2021 · 1 revision

Review

Mail markup guideline

Review

Rules

📗Introduction

The layout of letters is unusual. We cannot use most of the properties that are available in a web layout. We should also use the outdated HTML4, CSS2 and table layout standards.

  • Use table layout
  • HTML4, CSS2
  • Use inline style and atributes

🌎Resources

Please check all properties and attributes for compatibility before use.
These services will help you with this.

🧶Rules

  • Use table layout. We can limited use block layout, but try to avoid it because outlook not supported some parts.

    <table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>Hello World!</td>
  </tr>
</table>
```

  • Use HTML4 and CSS2 standarts.

  • Use inline style

    <td style="padding-bottom: 10px; line-height: 10px;"></td>

  • Use attributes instead of styles if it possible

    <table
  border="0"
  cellpadding="0"
  cellspacing="0"
  align="center"
  width="100%"
  height="1px"
>
  <tbody>
    <tr>
      <td bgcolor="#000000"></td>
    </tr>
  </tbody>
</table>

  • Don't forget reset style in table: border, cellpadding, cellspacing.

    <table border="0" cellpadding="0" cellspacing="0"></table>

  • Don't forget reset style for image: width, height, border, outline, text-decoration, display.

    <img src="" alt="name" width="300" style="border:0; outline:none; text-decoration:none; display:block;">
</img>

//If height less than 19px add line height (for outlook)
<td style=”line-height: 19px;” >
  <img src=”img/img1.png” width=”300” height=”19” alt=”image” border=”0” style=”display: block” >
</td>

  • Don't use margin!

  • Use padding to create margin between blocks.

    // Table
<table
  class="module"
  border="0"
  cellpadding="0"
  cellspacing="0"
  width="100%"
  style="table-layout: fixed;"
>
  <tbody>
    <tr>
      <td style="padding-bottom: 8px;"></td>
    </tr>
  </tbody>
</table>

// Block
<div style="padding-bottom: 8px; line-height: 8px"></div>
// line-height - It's hack for outlook

  • Don't use short properties.

    // Bad
.block {
  padding: 0px 0px 5px 0px;
  color: #fff;
  background: #000;
}

// Good
.block {
  padding-bottom: 5px;
  color: #ffffff;
  background-color: #000000;
}

  • Line-height. Set only in px! Don't use % or em, rem.

  • Background-image - don't support. But you can set background-color.

  • Position property - don't support.

  • Set the width for container to 600px. Some desktop and web email clients has set the standard for email width to 600px. They simply won’t display wider email templates properly. Due to these restrictions, 600px width has remained the standard.

  • You can add additional layout and style for outlook

    <!—[if mso]>
Outlook, based on Microsoft Word.
<![endif]—>

  • Use responsive layout if it possible.

    .container {
  max-width: 600px;
  width: 100%;
}

  • Always add target="blank" for links, use https. Don't add many links(get into spam)

    <a href="https://www.google.com" target="blank">Unsubscribe</a>

  • You can use hide preheader for gmail. But it increases the risk of getting into spam.

    <!--[if !mso]><!-->
<div
  class="”preheader”"
  style="”font-size:0px;font-color:#fffffff;"
  opacity:0;”
>
  Text for preview
</div>
<!--<![endif]-->

  • 102kb Gmail file size. Emails exceeding a file size of 102KB will not be fully displayed on the first open. Gmail will display the first 102KB along with the the message [Message clipped] View entire message. When a user clicks to view the entire message, the email will be displayed in a new window. To reduce the file size of your email, remove any white spaces and compress your HTML. Additionally, you may need to remove some content or merge content to further reduce the file size of your email.

  • Don't use custom fonts! Web fonts are not widely supported in email, so in most cases you’ll need a fallback. To circumvent the general lack of support available for handling these issues, stick with web-safe fonts like Arial, Helvetica, Tahoma, Times Roman, and Georgia.

Clone this wiki locally