PSD to Email Development

The landing page is a page in which visitor arrives and is used to stream the traffic while the email templates are text only, which allow you to change the text and formatting of email sent by the users.

According to the best email designs-

• For a desktop layout, the width of the email template should be 600 pixels to 700 pixels and the height of the email template should be in between 1100 pixels to 1500 pixels.
• For a mobile layout, the width of an email template should be from 320 pixels to 550 pixels.

It is used to ensure maximum compatibility with as many email clients as possible. An email template marked up with tables is sure to be displayed correctly for all your customers.

Tne limitation with sending a resoponsive email in Outlook and Gmail is that both are email clients and not ESPs. There is -

• Unwanted spacing
• Underlined links
• Irregular line height

If you are planning to send out Email Template via Gmail/Outlook, it is recommended to follow a fixed layout.

It is used to ensure maximum compatibility with as many email clients as possible. An email template marked up with tables is sure to be displayed correctly for all your customers.

For both desktop and mobile layouts, the optimal length of the email template is 1200 pixel to 1500 pixel. If the length of the template is greater than that, there is template clipping and email breaks within Gmail and Outlook.

Apart from following the length dimension, make sure the size of the template is lesser than 100 kB. If the file size exceeds this limit, it may lead to higher loading time and email breakage.

Google fonts are not supported in many major email clients. You can use fallback fonts (typeface containing symbols) for that the email clients which do not support the Google fonts.

The Google Fonts work on the modern mobile operating systems- Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Also, they are compatible with the following browsers like:

• Google Chrome version 4.249.4+
• Apple Safari: version 3.1+,
• Opera: version 10.5+,
• Microsoft Internet Explorer: version 6+.

The emails with the images that come with the double resolution of the original image are known as Retina emails. Design of retina emails -

-Design the images with high resolution vectors and use them as objects with the canvas of 600 pixels so that it can be used in HTML for retina effect. You can also design it with 1200 pixels by keeping a resolution of 300 dpi.

Yes. But, the background image will not be visible if you are sending your email with Gmail or outlook,

The image will also not stretch if the content of your template is lengthy. Rather than using a background image, we recommend you to go for a plain colored background.

In case of email templates, table based coding is used to ensure that they are compatible with multiple clients, including the clients, which do not support CSS.

Here are the restrictions that you need to remember while email designing -

• The design of the email needs to be 600 pixels and resolution should be maintained with 72dpi.
• The fonts should be email safe and some clients are unable to read the designer fonts.
• You cannot use the background in your image as it is not visible with some clients. Also, it does not stretch if there is a lengthy content in your email.
• If you place one element over the other, both the elements would merge as one image.