Friday, January 2

Points to Consider while developing Responsive HTML emails

a)    The email should not exceed 600px in width. It should be developed in table-based layout and not div based layout.

b)    Preferable 1 column layout, but we can work with maximum 3 columns. Email with more than 3 columns would be very difficult to develop on mobile clients.

c)    Major email clients + email service providers to consider when testing your email.
•    Desktop clients: Lotus notes, Apple mail, Outlook, Thunderbird.
•    Mobile clients : Android email client, Android Gmail client (Limited responsive email support), IPhone, IPad, Blackberry (Limited responsive email support), Windows phone (Limited responsive email support)
•    Web based email clients : Yahoo mail, Gmail,, AOL (Test on various browsers but majorly on IE, Mozilla and Chrome)

d)    After developing HTML emails, make sure to use some service providers such as to send your emails. This will ensure that email does not break visually and your output is as expected on various clients. Most of the time it is noticed that after developing the emails, developers copy the HTML in an outlook client and then send it from there to test on various devices. This is not the correct way and it will not work. The design will break in mobile device and it would not render on Browsers. Before sending your test email, outlook deletes some of your original code and inserts ms-* specific code. So the best way to test emails is by sending it via mail chimp or campaign monitor. You could use to test your emails on numerous clients. Litmus creates a snapshot of your test email and displays it to you how it performs on various clients.

e)    Images should be uploaded to some server.

f)    A design cannot be 100% converted to an HTML email. Font-size may render different on different clients. Outlook/AOL/Lotus notes clients do not render background images. CSS3 properties such as rounded corners, gradients will not work on outlook.

g)    Emails should be viewed only on the mobile clients. If you view the email from browser of your mobile devices, it may or may not work (also not recommended).

h)    Major email clients that are HTML/CSS3 code friendly are iPhone and android. However Gmail App for Android is an exception.

Be the first one to Comment!!!

Post a Comment