In-Depth HTML Email Guidelines

A comprehensive description of what constitutes a placeholder email.

Creating A Great Placeholder Template

When creating the HTML code for your template, here are key considerations to keep in mind.

Header and Footer

Your logo, and header images should be coded into the email and any links (to homepage etc...) coded in place. In your footer you should place any text, disclaimers, and links to your unsubscribe / email preference center pages here. All links should be accurate and final. We will not touch this code so it needs to be 100% what you want on the final email.

Blog, Article Content, and Repeating Regions

These areas are the core zones that the FeedOtter team will modify during setup. Our team will add a variety of data-tokens and programmatic loops that display the featured image, title, description and details from your feeds in an email.

Review the topics below to learn exactly what we look for.

Article Spacing

If you wish to show more than 1-2 articles of content in your newsletter it is important to include multiple rows so that the spacing between articles is apparent and can be maintained when our team sets things up.

Text

As with any HTML email, it is important to designate text areas throughout your email.

For article titles and descriptions it is very important to design your HTML email considering the length of your texts as this text will be supplied dynamically by FeedOtter.

• If your article has a long title will it wrap onto a new line?

• Should content be truncated at a certain number of characters?

• Make sure any CTA buttons and images are also linked. You can simply link to google.com or "#". Our team will update these during import.

Here is a great placeholder text generation tool:

• https://loremipsum.io/

Images

All images in your email must have a valid SRC that points to an actual image URL before the handoff to FeedOtter.

This includes but is not limited to

• featured images for your articles and content

This also goes for:

• logo images

• social icons

• banner images

• ad images

If you need placeholder images, here are several useful resources:

• https://picsum.photos/

  • Example 1: https://picsum.photos/200/300

  • Example 2: https://picsum.photos/200

• https://placehold.co/

  • Example 1: https://placehold.co/600x400

  • Example 2: https://placehold.co/600

Relative image SRCs such as <img src="/images/myserver/myimage.jpg"> are not allowed.

Links

Ensuring your HTML email has proper anchor tags and links is essential to any HTML email. This is also true for a great automated newsletter.

• If you want featured images to be linked, ensure they are wrapped in the appropriate <a> tag.

• This includes placeholder images that are to be replaced with article images.

• If you do not know the link destination, set the link href="#". Our team will update this to point to your article.

• Text that you wish to be linked such as your article title, read more etc.. MUST be linked with anchor tags. As before, use href="#" as a placeholder for your actual article link.

Anchor tags (links) affect the style of text and images, so we cannot add these for you. They must be added by your team and tested to ensure proper formatting prior to handoff.

Failing to properly link images, placeholders, or other elements in a custom HTML template is the most common cause of delays in email setup projects.

Testing

Our goal is to deliver a high-quality automated newsletter. We will test all incoming HTML in Litmus, and if it doesn’t meet basic compatibility standards, we will send it back to you.

This process is done to ensure that your automated newsletters are of the highest quality and fully compatible.

Recap: Steps for a Successful Template Import

Before sending, follow this checklist to ensure your email template is fully prepared for import:

• Are all images and links (including images) correctly linked to their locations or set as placeholder links "#"

• Compatibility: Have you tested your HTML email code with a tool like Litmus? FeedOtter will not import incompatible HTML code.

• Placeholder content: Is there space for all your content in the email?

If you answered "yes" to all of these questions, you’re ready to request a template import.