Exporting to Email (HTML/CSS)

New Here ,
Jan 19, 2021 Jan 19, 2021

Copy link to clipboard

Copied

Hi

I am attempting to achieve an export of an artboard, into html/css that can be used in an email.

Currently i've tried the plugin Web Export, which can export to web with html/css/js.

However while the exported document works well in a browser it doesn't work well when the html/css markup is used in an email. In my debugging i used mailchimp tool for converting css styles that are not inline in the document to be inline on the element, as i've understood alot of email clients doesnt support <style> tag, and therefore css needs to be inline.

This still does not work, it seems as if the CSS styling is only partially applied. Some text, fonts etc have the right sizes, fonts, boldness etc. But alot of margin's, padding's and such are not working. It is also my understanding through reasearch that the inline CSS is interpreted differently by the different email clients (i am used outlook to test). 

 

So I am trying to find a solution to this problem. Does anyone else know or have experience with - if its possible to export in a way that works with emails (essentially as an email template), or any workarounds that can be performed to achieve this goal?

TOPICS
How to, Import and export, Missing feature, Plug-ins

Views

291

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 Employee , Jan 27, 2021 Jan 27, 2021
Hi there, Sorry for the delay in response. As of now, we can use the plugin to export to web with HTML/CSS. However, you can always share your ideas and suggestions here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests Please upvote pr post a new request. This is the best way of sharing your ideas and suggestions with the Engineering team. Regards Rishabh

Likes

Translate

Translate
New Here ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

Adding a bit more information. I've tried to recreate the layout manually in html/css compared to the XD export. I discovered that in Outlook <div> does work, neither does margin and some other things. Does an option exist to make XD's code export create everything in tables and with padding instead of margin to achieve the same results?

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 Employee ,
Jan 27, 2021 Jan 27, 2021

Copy link to clipboard

Copied

LATEST

Hi there,

 

Sorry for the delay in response. As of now, we can use the plugin to export to web with HTML/CSS. However, you can always share your ideas and suggestions here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests

 

Please upvote pr post a new request. This is the best way of sharing your ideas and suggestions with the Engineering team.

 

Regards

Rishabh

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