Building a responsive email is super easy with the MJML markup language. You can use a free online MJML editor. Here is a link to the editor : https://mjml.io/try-it-live
Paste your own MJML code into the editor and build a responsive email from scratch or copy the code in an existing template and modify it. Here is the code that I used for my email template. Copy the code and paste it into the editor to see how it works :
<mjml>
<mj-head>
<mj-attributes>
<mj-all padding="0px"></mj-all>
<mj-text font-family="Arial, sans-serif" padding="0 25px" font-size="13px"></mj-text>
<mj-section background-color="#ffffff"></mj-section>
<mj-class name="preheader" color="#ffffff" font-size="11px"></mj-class>
</mj-attributes>
</mj-head>
<mj-body background-color="#ffffff">
<mj-section background-color="#ffffff">
<mj-column>
<mj-text font-style="italic" font-size="20px" color="#626262" padding-top="50px"> </mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#eaeaea" >
<mj-column width="100%">
<mj-image src="https://steinarv.design/banner02" padding-top="0px"></mj-image>
<mj-image src="https://steinarv.design/image02" padding-top="12px"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#eaeaea" padding-bottom="20px" padding-top="10px">
<mj-column>
<mj-text align="center" padding="10px 25px" font-size="20px" color="#512d0b"><strong>Hey !</strong></mj-text>
<mj-text align="center" font-size="18px" font-family="Arial">I am a freelance Motion Designer living in Stavanger, Norway
<br/> and I want to introduce myself. <br/>
</mj-text>
<mj-text align="center" color="#489BDA" font-size="20px" font-family="Arial, sans-serif" font-weight="bold" line-height="25px"
padding-top="20px">Please don’t hesitate to ask me anything <br/> about my work or process.
</mj-text>
<mj-text align="center" color="#489BDA" font-size="18px" font-family="Arial, sans-serif" font-weight="bold" line-height="25px"
padding-top="15px">Animation is my speciality, and if you’re so inclined, <br/> you can see my motion reel 2019<br/>and portfolio here :
</mj-text>
<mj-button background-color="#F44E3C" color="#fff" border-radius="24px" href=https://steinarv.design/motion-reel-2019
font-family="Arial, sans-serif" padding="20px 0 0 0" font-weight="bold" font-size="16px">Motion reel 2019
</mj-button>
<mj-button background-color="#F44E3C" color="#fff" border-radius="24px" href=https://steinarv.design
font-family="Arial, sans-serif" padding="20px 0 0 0" font-weight="bold" font-size="16px">Recent work
</mj-button>
<mj-text align="center" color="#000000" font-size="14px" font-family="Arial, sans-serif"
padding-top="25px">Best wishes <br /> SteinarV.design telephone +47 901 56 446
<p></p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff">
<mj-column>
<mj-text font-style="italic" font-size="20px" color="#626262" padding-top="50px"> </mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>Click on the mobile and desktop icons in the upper right corner of the editor to see how the email adapts to mobile and desktop :
Click on "View HTML" and copy the HTML code. Open Gmail in Google Chrome.
Click on "Compose" in Gmail to open a "New Message" :
Type in 8 stars in the "New Message" :
High-light the 8 stars, right-click and select "Inspect" Ctr + Shift + I :
This will open the Inspector column on the right-hand side of your browser window in Google Chrome. Right-click in the high-lighted area in the Inspector column, and select "Edit as HTML" :
Find the 8 stars in the Inspector column, high-light them, right-click on the high-lighted 8 stars and select "Paste", Ctrl + V, to paste in the HTML code of your email template that you copied earlier :
Tadaaa! The responsive HTML-rich email template is ready to send with Gmail :
Type in Recipient, Subject and click Send. That’s it, we’re done.