Email template not responsive

New Here ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

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.

TOPICS
Code

Views

152

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Oct 11, 2021 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 cann

...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

quote

 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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 11, 2021 Oct 11, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines