Email template not responsive

Report · Oct 11, 2021

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.

Report · Oct 11, 2021

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

Report · Oct 11, 2021

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

Report · Oct 11, 2021

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.

Report · Oct 11, 2021

Thank you Ben, I was pasting from Chrome to Mail (not directly from DW) which looked fine if only a desktop version was wanted, but I do know what you're saying, the email app is removing/overwriting the responsive CSS in the <head>. Time to pursuade them to get a MailChimp account!

Report · Oct 11, 2021

Time to pursuade them to get a MailChimp account!

By @andyn7783422

Either that or just mail it out using php from your own or their server, depends if the host is open to mailing out volumes. Small volumes would be ok but large volumes should probably go through a dedicated email server or a company like Mailchimp.

Not sure what your clients objection to Mailchmp is as it provides useful add ons.

Report · Oct 11, 2021

Actually I just found this https://directmailmac.com/ which works perfectly (for Mac). I just imported my HTML file and sent out a test and fully responsive :). And you can pay per occasional mailing which is ideal.

Report · Oct 11, 2021

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

https://youtu.be/0FJC8qM35HY

and

https://youtu.be/3gx3m58h7sM

Wappler, the only real Dreamweaver alternative.

Adobe Community

Email template not responsive

1 Correct answer