Email Template Production FAQs – Mindful Teachings from the Part 1

You may have big goals to give your business a kick start with email marketing. But email template designing issues can actually pose as stumbling blocks on the way. The Uplers care about everything EMAIL and thus, they’re all enthusiastic about helping every soul in search of answers to email marketing problems.

Scouring through our live chat, we’ve put together the most commonly asked questions around email template production. Here’s some expert advice from the Uplers to help you attain email marketing success.

1. What is the difference between an email template and a landing page?

Email templates allow you to customize the formatting and text of emails sent by users who share your content. Templates can be text-only or HTML and text.
Landing Page is a standalone web page which is used to stream the traffic. It is a page on which a visitor can arrive or land on.

2. What is the ideal size of an email template?

According to Email design best practices. The Ideal width of the email should be 600-650 pixel and Height should 1100 pixel. Make sure the height is not more than 1500 Pixels. If height does exceed the limit, the template might get clipped by major email clients.

• 600px to 700px is considered to be the optimal width for an email template for Desktop Layout.
• 1100px to 1500px is considered to be the optimal height for an email template for Desktop Layout.
• 320px to 550px is considered to be the optimal width for an email template for Mobile Layout.

3. What are the problems associated with sending a responsive email in Gmail & Outlook?

Gmail can now read media queries and, hence, we can view the email template in responsive layout in Gmail mobile apps.

However, there is still one limitation with Outlook and Gmail – both are email clients and not ESPs and they both have few limitations of sending a responsive email template via email client. The limitations include:

• Unwanted spacing
• Underlined links
• Inconsistent line height

So, in case you are planning to send out Email Template via Gmail/Outlook, it is highly advised to send a fixed layout email template.

4. My email breaks and doesn’t show the whole length in Gmail & Outlook. Why is that?

As mentioned in point #2, ideal length of the email template is 1200 pixel to 1500 pixel. If the length of the template is greater than that, there are chances of the template clipping within Gmail and Outlook. But there are ways to beat the challenges of Gmail clipping.

Clipping typically depend not only on the length of the template but the characters used in template too.

Make sure the size of the template is lesser than 100 kB. If the file size exceeds this limit, it may lead to many issues like higher loading time and, of course, clipping in Gmail and Outlook.

5. Google fonts are not supported in Email Template. What can I do?

Google fonts are not supported in many major email clients, so as a workaround, we can use fallback fonts so that the email clients which do not support the Google fonts would read the fallback fonts and the email would render well.

The Google Fonts API is compatible with the following browsers: Google Chrome: version 4.249.4+, Mozilla Firefox: version: 3.5+, Apple Safari: version 3.1+, Opera: version 10.5+, Microsoft Internet Explorer: version 6+.

The Google Fonts API works reliably on majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

If you wish to dig deeper into the topic, this link might prove beneficial to you:

6. What is a retina email and how can I design one?

Retina emails are those emails which have images in double the resolution for better user experience in retina devices.

This is how you can design retina emails:
Design all images as vectors with high resolution and use them as objects in PSD created with canvas of 600px so that the high resolution vectors can be used in HTML to give Retina effect.

Alternatively, you can design the PSD in 1200px width or with resolution of 300dpi.

7. Can I add a background image in my email?

Yes, you can add a background image to your email template but it comes with some limitations.

• If you are sending your email template from any email client like Gmail or Outlook, the background image will not be visible.
• A background image can be edited only by editing HTML code of the template.
• If the content of the template is lengthy, the background image will not stretch to accommodate it. So, if you are looking for a flexible email template height, a background image can pose as a hurdle.

Ideally, you should go for a flat background color instead of a background image.

Get more insights in our blog: Background Images in Email

8. What is a VML Code?

VML stands for Vector Markup Language.
In case you really want to use a background image in your email, the VML code is your best bet. If the email template is coded in VML, it is only then that the background images will be visible in Outlook (Get more insights in link above).

Also, it depends upon the ESP if VML code will work or not; VML code does not work with ESPs like Marketo.

Moreover, if you are sending email via an email client, the VML code won’t work
So as mentioned earlier, it’s best to opt for a flat background color.

9. Why is table-based coding used in case of email templates?

Tables are used for email templates to ensure that they are compatible with multiple email clients. This includes even the smaller clients, which do not support CSS or cannot load images.
An email template that is marked up with tables will always render well across a larger number of email clients.

Get more insights in our blog: The Transition from Div to Table in Emails

10. Are there any restrictions in email designing? What are they?

Here’s a concise list of points to remember while designing a template:

1. Width of email design needs to be 600px and should be designed with 72 dpi.
2. Fonts must be email safe fonts, as email clients won’t render any premium/designer fonts using any technology like font embedding unlike web page.
3. When it comes to email, there is limited possibility of making use of CSS. Some of the following restrictions are established because of the same:

• The text that is laid over the patterned background is made as an image. The editable HTML text can only be laid over solid colour backgrounds. It is not possible to do the same with patterned backgrounds.
• When you place one element over the other, both the elements would be part of one image. For example, if a button is placed over the background, both of them would become one image.

Please refer to our infographic to get a holistic idea about Email/Newsletter design best practices. You can also refer to our Email/Newsletter design checklist to ensure that your email designs are best in class.

We hope we’ve helped to resolve many of your pertinent queries regarding email template designing that have been nagging you.
The Uplers will be back soon with answers to another set of frequently asked questions.

Keep watching this space…