Email template not responsive

Forum|Forum|4 years ago
October 11, 2021
2 replies
1274 views

I'm happy using MailChimp and Klaviyo for other clients but this particular client want's their emails built in HTML/CSS (I'm using Dreamweaver here) and not an email marketing website.

If I build an email newletter in Dreamweaver it's responsive in the app, then also responsive when uploaded to a website and viewed in Chrome. It pastes from Chrome into my email clients ie Outlook, Mail, Airmail but here it only appears there as the desktop version and sends the same.

The HTML/CSS is inlined and I've checked the media queries are there. Anyone know why it's losing responsiveness. I've also checked using one of the templates without touching it to see if it's something I'm messing up.

Code

This topic has been closed for replies.

Correct answer Ben M

You cannot paste code from DW into Outlook or Mail. HTML email doesn't work that way. Code you develop needs to be deployed from an ESP. This is especially true for Outlook. The reason is that part of your responsive code lives in the header, and what you are doing is pasting HTML headers into the HTML body becuase the editor has its own header that is being included.

I would tell the client if they want HTML emails they need an ESP or server to process HTML email for them because you cannot do it from mail/outlook/etc. The most you can do within those email clients themselves is to modify their signature for them.

BenPleysier

Community Expert

Grab a trial copy of Wappler and follow the instructions in the videos:

https://youtu.be/0FJC8qM35HY

and

https://youtu.be/3gx3m58h7sM

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

B i r n o u

Community Expert

it's complicate to answer without seing your code, but...

generally DW produce media queries based on screen and width... and the email HTML doesn't fit in this type of display.

plus email are not rendering content as browsers do

if you want to produce email being responsive, you have to adapt your approach.

I just google now and found a tuplus that can be intersting,

https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

A

andyn7783422Author

Participating Frequently

Thanks Birnou, it seems that any reponsive email template pasted into Mail/Outlook loses its responsiveness so probably not the code. Here's a quick test of the Tuts example you sent: https://eventbinspired.com/emails/tuts-example-inline.html. If you paste from Chrome to Mail, again just a desktop version.

Here's my original that does the same: https://eventbinspired.com/emails/inlined-css-versions/beyond-nicotine-email.html

Andy

B

Ben MCorrect answer

Community Expert

You cannot paste code from DW into Outlook or Mail. HTML email doesn't work that way. Code you develop needs to be deployed from an ESP. This is especially true for Outlook. The reason is that part of your responsive code lives in the header, and what you are doing is pasting HTML headers into the HTML body becuase the editor has its own header that is being included.

I would tell the client if they want HTML emails they need an ESP or server to process HTML email for them because you cannot do it from mail/outlook/etc. The most you can do within those email clients themselves is to modify their signature for them.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded