# HTML Email Best Practices

### **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](https://docs.feedotter.com/custom-template-guide/overview/use-an-esp-template) from your ESP (Marketo, Pardot, Eloqua, HubSpot, etc.)
* HTML direct from your email developer

{% hint style="danger" %}
❌ Do not send EML files or code copied from email clients such as Gmail.
{% endhint %}

### **Ensure Elements are Implemented Properly**

#### **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** such as *<https://my.emailtool.com/path/to/my/image.png>.* Relative paths such as */images/mylogo.jpg* should not be used.
* This applies to logos, featured article images, social icons, banners, and ads.
* If you need placeholders, use tools like [picsum.photos](https://picsum.photos/) or [placehold.co](https://placehold.co/).
* Do you want your images to be linked?  Ensure they are wrapped with placeholder links; *href="#"*

#### **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.**

{% hint style="warning" %}
Failing to properly link images, placeholders, or other elements is the most common cause of delays in email setup projects.
{% endhint %}

#### **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 <success@feedotter.com>.