HTML Email Best Practices

Follow these best practices for a quick, error-free custom HTML template setup.

Acquire a Clean HTML File

Work with your designer or developer to create a clean, responsive HTML email. Acceptable sources include:

• HTML files exported correctly from your ESP (Marketo, Pardot, Eloqua, HubSpot, etc.)

• HTML direct from your email developer

❌ Do not send EML files or code copied from email clients such as Gmail.

Required Elements

Header & Footer

• Your logo and header images should be coded in place.

• All links (homepage, disclaimers, unsubscribe, preference center) must be accurate and final.

• FeedOtter will not edit these areas, so the code must be exactly what you want in your final email.

Images

• All images must have a valid absolute SRC URL. Relative paths (e.g. /images/mylogo.jpg) are not allowed.

• This applies to logos, featured article images, social icons, banners, and ads.

• If you need placeholders, use tools like picsum.photos or placehold.co.

Text & Links

• Any text that should be linked (article titles, “Read More,” etc.) must have anchor <a> tags.

• Any images that should be clickable must also be wrapped in <a> tags.

• If you don’t know the final link destination, use href="#" as a placeholder.

• Anchor tags must be added by your team; FeedOtter cannot add them after handoff.

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

Placeholder Content

• Use placeholder text and images where blog posts or dynamic content will appear.

• Include multiple article rows if you plan to show more than 1–2 articles, so spacing is clear.

• CTA buttons should also be linked (use # if final URLs are not ready)

Design Considerations

Titles

Article titles are often much longer than placeholder text.

• Issue: Designers often build with short placeholders like Lorem ipsum odor amet, but production article titles are often much longer (60–90+ characters).

• Best Practice: Test with long sample titles and allow wrapping with consistent spacing.

Descriptions

Real blurbs may span 3–5+ lines, not just a couple of sentences.

• Issue: Uneven content lengths can make columns look unbalanced.

• Best Practice: Use flexible vertical layouts and consider truncation with a “Read More” link if uniformity is needed.

Repeating Content

You won’t always send the same number of articles.

• Issue: Rigid designs built for “exactly 3 items” can look broken when you show 1 or 10.

• Best Practice: Create repeating blocks that maintain proper spacing with any number of items.

CTA Buttons

Calls-to-action aren’t always short (“Read More”).

• Issue: Longer text may wrap and distort button styling.

• Best Practice: Test with multi-word CTAs and ensure buttons remain legible and properly padded.

Test Before Handoff

Your HTML email must be tested before sending it to our team:

• Use a tool like Litmus or Email on Acid to ensure compatibility across all major clients.

• Emails that fail a basic Litmus check will be returned.

• Meeting these requirements ensures we can provide a timely, high-quality setup.

Final Checklist Before Sending

• All images have valid SRC URLs and are visible in a browser

• All images and text that should be linked have anchor <a> tags (or # placeholders)

• Header, footer, disclaimers, and preference center links are final and accurate

• Placeholder content is in place for articles and dynamic sections

• Template spacing accounts for multiple article rows

• Tested in Litmus (or equivalent) and passes across major clients

• Layout handles long titles, long descriptions, and multiple articles

Once your template meets these requirements, send the exported HTML to our team. We’ll add the FeedOtter-specific tokens and set everything up for automation.

💬 Have questions? Contact us at [email protected].