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:
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:
Example 1: https://picsum.photos/200/300
Example 2: https://picsum.photos/200
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?
Last updated