HomepageDocumentationGet FeedOtter

Building Templates in Your ESP: Essential Layout Considerations

There are a few things to consider if your or someone on your team is building your template within your ESP.

When designing your HTML email templates, it's critical to go beyond “pixel-perfect” designs and consider how real content — not placeholder text — will behave inside your layout. Below are common pitfalls and best practices to keep your template functional, flexible, and production-ready.

1. Design for Realistic Title and Body Lengths

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

Problem example:

Title are typically much longer than four words.

Why it matters: Long headlines can wrap awkwardly, cause text overflow, or result in uneven columns when side-by-side. Design your template with a realistic headline length in mind.

Recommendations:

  • Test with long sample titles (e.g. 2–3 lines of text).

  • Avoid fixed-height containers that assume short content.

  • Use consistent margins/padding across sections.

2. Write for Real Descriptions

Problem: Placeholder descriptions are often 2–3 short sentences, but real content tends to be longer and may span 3–5 lines or more.

Why it matters: You'll want your layout to remain visually balanced, even with differing text lengths between items.

Recommendations:

  • Use flexible vertical layouts rather than constrained boxes.

  • Consider truncating long blurbs with “Read More” if uniformity is wanted.

  • Match spacing across items.

3. Design for Flexible, Repeating Content

Problem: Many templates are built assuming you’ll always have the same number of items, like exactly 3 articles. But in real life, you might want to show 1, 4, or even 10 articles depending on what you’re sending.

Why it matters: If your layout is too rigid, it can break or look awkward (like uneven spacing or gaps) when the number of items changes.

Recommendations:

  • Build your template in a way that works with any number of items — not just the demo version.

  • Make sure spacing between items still looks good, whether you show 2 or 10.

Test Checklist:

We encourage users to use production-style placeholder content when designing.

Last updated