# 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](/custom-template-guide/overview/use-an-esp-template.md) 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>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feedotter.com/custom-template-guide/html-email-best-practices.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.