Preparing a custom email design for use with FeedOtter
To ensure your custom HTML template can be setup quickly and error-free we recommend following the best-practices outlined below.
At FeedOtter, we are excited to help you turn your custom HTML email into an automated newsletter. Before our team can setup your custom HTML it is important that you follow the HTML email best practices outlined below. This ensures a timely, high quality automated newsletter.
Ask your email designer/coder to create or identify a clean, responsive HTML email.
- We recommend testing this HTML email with a tool such as Litmus to ensure that is it compatible with all major email clients.
- This email should have your logo, footer text, and other static resources coded in place.
- Areas where you would like blog posts and content to appear should be coded with placeholder text/images. (More on that in a moment)
Acceptable sources for your HTML code:
- HTML files exported from your ESP
- HTML direct from your email developer
What NOT to send us:
- EML files or files downloaded from email clients such as Gmail
- All images are visible when your html is viewed in a browser.
- All images that should be linked have anchor tags(links). Including article featured image placeholders.
- All text that should be linked has anchor tags(links). Including article placeholder text(titles, read more, etc...)
Ensuring theses bullets are met will ensure our team can provide you with a timely, high-quality, automated newsletter setup.
Our team will not accept emails that do not pass a basic Litmus check and/or are missing items outlined above.
If you have an HTML email file that meets these items you can start a new setup project with our team here:
Below you will find full description of what goes into a placeholder email. If you are building your emails from scratch this will be valuable read.
When creating the HTML code for your template here are key considerations to keep in mind.
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.
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.
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.
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:
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 a placeholder image here are several useful
- 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.
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; placeholder or otherwise in a custom HTML template is the most common reason for email setup projects to become delayed.
A high-quality automated newsletter is our goal. We will test all incoming HTML in Litmus. If it does not pass basic compatibility we will return it to you.
We do this for your benefit to ensure your automated newsletters are high-quality and compatible.
Before sending, follow this checklist and ensure your email template is completely ready for import.
- 1.Are all images and links (including images) linked to correct locations or set as placeholder links "#".
- 2.Compatible. Have you tested your HTML email code with a tool like Litmus? FeedOtter will not import incompatible HTML code.
- 3.Placeholder content. Is there a place for all your content in your email?
If yes to all these questions, you're finally ready to request a template import.
Before submitting your HTML code for setup please review the following essential tasks that should be completed before doing so.
- All images are visible and linked to an ACTUAL URL. No broken or missing images when the HTML file is viewed in a browser.
- Lorem Ipsum text is used and is linked where intended
- You are confident your HTML code is responsive and well-tested
When you are sure your template is compatible and there are no broken links (other than content-related ones) you can submit your template to the FeedOtter team.
A typical email setup project costs between $300 and $600 based on the complexity of the email. Once your email is received our team will provide a secure quote for you to pay with credit card. Email setups can also be pre-purchased with your yearly Enterprise license.
We aim for a turnaround time of 3 business days for Basic setups and 5-7 business days for Advanced setups
Ideally, no. Marketo templates have oodles of extra "Marketo code" that make them less than ideal for use as a template in any other system. If you must, you can test and send your HTML file over and our team will review it and make a recommendation moving forward. Here's an article on how to import your Marketo template for use in FeedOtter.
Absolutely! Pardot templates integrate well with FeedOtter for use. Check out this tutorial on exporting your Pardot email template.
Yes you can! If you are familiar with the template and token languages used by popular ESPs you may have what it takes to roll your own. Head over to Getting Started with FeedOtter's Email Template Language to learn more.
If you have any questions or concerns, feel free to reach out to our team at [email protected]. We're happy to help!
Last modified 13d ago