HTML Email Coding Standards

HTMLPanda will

• design layout within a nested table for persistent delivery across multiple platforms.

• use a single column layout to make design look elegant on mobile devices. This approach makes the content easy to scan.

• ensure to set email's width to 600px as the default width so as to it will fit nicely on the web as well as desktops. However, our acceptable email dimensions are between 600px - 680 px width compatible.

• keep the email file size under 100kb as some email clients do not load full template if size more than 100kb. We also prevent Gmail from ‘clipping’ email and make it pass through more spam filters by staying light by keeping it under 100kb.

• embrace mobile-first email design by keeping mobile users primarily in mind and then make sure it looks good on desktop as well.

• make ourselves comfortable with media queries to control font sizes, image sizes, and to make some tables become 100% width so that they will fill a mobile screen.

• use HTML attributes to define the dimensions and look of the table (width, align and padding).

• use compatible font size, spaces, alignment in desktop as per mobile.

• only use the grid system in desktop for best compatibility as some email clients do not support responsive media queries Ex: - Gmail App, iOS, and Android old version.

• use email-safe fonts to ensure design still looks good without custom web fonts. A good fallback font is important to have for email design.

• work on making email dimensions acceptable by setting the size to the width under 600 pixels.

• utilize white space by emphasizing tags and cut out any unnecessary white space that is created.

• include preheader text that displays after the email subject line. Coding preheader text can make a huge difference in open rates.

• use basic, cross-platform fonts namely Arial, Verdana, Georgia, and Times New Roman across various email platforms.

• only use system fonts or Google fonts. However, some email clients do not support google fonts, so for best compatibility, we use system fonts only.

• use a simple responsive email template to support media queries, fluid layouts, and fluid images.

• optimize the email template for mobile devices to give a better experience of the same on mobile.

• send multi-part emails with an HTML version and a text version to avoid emails appearing as unintelligible lines of codes.

• encode special characters to make the special characters (like ©) appear in the correct format.

• make sure to include comments in the code to make editing templates easier, it can also be helpful to note why adding a particular style or element is essential.

• add an unsubscribe link so as to uninterested people can choose not to read emails on their own.

• make the right use of alt tag by adding a descriptive alt tag to every image in email so as to the recipient do not get confused if the image is blocked.

• make email images retina ready to make sure the images appear extra crisp. Having retina-ready images means that the devices have more physical pixels than their CSS dimensions would otherwise indicate.

• inline all CSS of HTML separately to avoid the email look disorganized when it is displayed to a client.

• use background colors instead of images and for background images, we use VML (Vector Markup Language).

• use absolute addresses for images to make sure the images will display in recipients' inboxes. To do this, we need to write the full domain address, directory, filename, and extension.

• use cell padding for spacing, use single-column design and use tables whenever and wherever possible.

• compress large images before adding them to the email code to make them retina-ready and avoid the inflation in the size of the email.

• use GIFs and videos to make email engaging enough for the audience and campaign.