QA Checklist

QA checklist for Mailviews components and templates.

Code

Attributes order

Use a consistent HTML attributes order for all elements.

• <td align?="" class="" style?=""></td>
• <a href="" class="" style?=""></a>
• <img src="" width="" class="">

The following attributes are automatically added by Maizzle:

• For tables: cellpadding="0", cellspacing="0", role="none"
• For images: alt=""

Class order

Always write the desktop/to-be-inlined class first, followed by its responsive variants.

Example:

<div class="hidden sm:block w-[600px] sm:w-full text-base/6 text-right text-gray-600 bg-white rounded-lg shadow-2xl"></div>

Styles > Attributes

Prefer utility classes to HTML attributes. CSS pixel values scale better on high-density screens.

- <table width="64">
+ <table class="w-16">

For larger or one-off values, use arbitrary values as they are clearer:

- <table class="w-150">
+ <table class="w-[600px]">

Exception: width/height on images, for Outlook compatibility:

- <img src="" class="w-6">
+ <img src="" width="24">

Utilities > Configuration

Prefer arbitrary utility classes or inline CSS to registering new utilities in tailwind.config.js.

For example, when adding a background image, it's obvious right away what file is used:

- <td class="bg-image-hero">
+ <td class="bg-[url(hero.jpg)]">

Inline CSS should be used where values need to be dynamic:

- <td class="bg-[url(hero.jpg)]">
+ <td style="background-image: url('{{ page.image }}')">

Accessibility

alt attributes

• ensure alt attributes on all images
• decorative images should use an empty alt attribute
• images containing text should be avoided by all means

Optional: styled alt text, where applicable.

aria roles

Make sure aria roles are properly set.

Note: <hr> elements do not need a role="separator", they are already semantically correct.

Spacers

Div:

<div class="leading-8" role="separator">&zwj;</div>

Table:

<table class="w-full" role="separator">
  <tr>
    <td class="leading-4">&zwj;</td>
  </tr>
</table>

Table row:

<tr role="separator">
  <td class="leading-4">&zwj;</td>
</tr>

Dividers

<table class="w-full" role="separator">
  <tr>
    <td class="py-6">
      <div class="h-px leading-px bg-gray-200">&zwj;</div>
    </td>
  </tr>
</table>

title and preheader

Provide a unique <title> for each Template.

This can be used for the preheader too, but they can also be different.

Text

• ensure viewport zoom is not disabled
• use a legible font size (ideally min. 16px)
• decent line height (i.e. 24px)
• good contrast
• ensure text links are recognizable as links

Semantic code

• <h2> - <h4> for headings
• <p> for paragraphs
• <em>, not <i>
• <strong>, not <b>
• ul and ol for lists
• <span class="text-sm">, not <small>
• Link buttons (no VML)

Other

• there should be no title attributes
• animation must respect prefers-reduced-motion

Render Testing

At the very minimum, the Component or Template needs to render well in these email clients.

This covers over 95% of the email client market share.

Mobile

• iPad
• iPhone
• Gmail iOS
• Gmail Android
• Outlook iOS
• Outlook Android

Desktop

• Apple Mail
• Outlook 2019
• Outlook 2019 (120 DPI)
• Thunderbird

Webmail

• Gmail
• Office 365
• Outlook.com
• Yahoo!/AOL