{"id":12038,"date":"2024-07-24T12:23:00","date_gmt":"2024-07-24T06:53:00","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=12038"},"modified":"2024-10-17T12:50:49","modified_gmt":"2024-10-17T07:20:49","slug":"how-to-code-responsive-html-email-using-mjml","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/","title":{"rendered":"MJML Email: How to Code Responsive Emails Using MJML"},"content":{"rendered":"\n<p>Designing responsive emails is not easy.&nbsp;<\/p>\n\n\n\n<p>That\u2019s because email rendering is complex. By the time an email reaches the intended inbox, it has gone through a number of rendering layers. In fact, Litmus states that there are <a href=\"https:\/\/www.litmus.com\/blog\/understanding-responsive-and-hybrid-email-design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">potentially 300,000 renderings<\/a> for every email.&nbsp;<\/p>\n\n\n\n<p>But there\u2019s no getting out of responsive emails, is there?&nbsp;<\/p>\n\n\n\n<p>As a coder, you\u2019re used to writing complex media queries to adjust the email layout for different devices. It takes time.&nbsp;<\/p>\n\n\n\n<p>Not to mention the burden of code maintenance; as new devices and screen sizes emerge, you\u2019d have to update your media queries to maintain responsiveness.&nbsp;<\/p>\n\n\n\n<p>Slow coding, multiple iterations, delayed hand-offs, and all that jazz! We get you. We\u2019re familiar with the back-and-forth, the ping-and-pong, of <a href=\"https:\/\/email.uplers.com\/hire-dedicated-email-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\">email development<\/a>.&nbsp;<\/p>\n\n\n\n<p>But you can saunter out of that routine, hands in pocket, by turning to MJML.&nbsp;<\/p>\n\n\n\n<p>By the end of this post, you\u2019ll know what MJML emails are and how you can leverage the MJML framework to code responsive emails faster. From the top!<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#whatismjml\"><strong>What Is MJML?<br \/><\/strong><\/a><\/li><li><a href=\"#howtouse\"><strong>How to Use MJML for Email?<br \/><\/strong><\/a><\/li><li><a href=\"#MJMLvsHTML\"><strong>MJML vs. HTML: What\u2019s The Difference?<br \/><\/strong><\/a><\/li><li><a href=\"#Limitations\"><strong>Limitations of MJML<br \/><\/strong><\/a><\/li><li><a href=\"#dodonts\"><strong>The Do\u2019s &amp; Don\u2019ts of MJML<\/strong><\/a><\/li><\/ul>\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-25621 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/email-template-production-services\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/04\/Our-expert-developers-can-create-flawless-responsive-emails-for-your-brand.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/04\/Our-expert-developers-can-create-flawless-responsive-emails-for-your-brand.png 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/04\/Our-expert-developers-can-create-flawless-responsive-emails-for-your-brand-300x75.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/04\/Our-expert-developers-can-create-flawless-responsive-emails-for-your-brand-768x192.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/04\/Our-expert-developers-can-create-flawless-responsive-emails-for-your-brand-624x156.png 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"whatismjml\"><strong>What Is MJML?&nbsp;<\/strong><\/h2>\n\n\n\n<p>MJML, short for Mailjet Markup Language, is a framework designed to simplify coding responsive HTML emails. MJML builds responsiveness into the code, so you don\u2019t have to write complex codes to achieve email client-agnostic rendering.&nbsp;<\/p>\n\n\n\n<p>According to MJML\u2019s documentation, MJML is a transpiler.&nbsp;<\/p>\n\n\n\n<p>A transpiler is a program that converts the language of a code into another language. It acts as a translator, if you will, between <a href=\"https:\/\/email.uplers.com\/blog\/tools-to-manage-offshore-email-development-team\/\" target=\"_blank\" rel=\"noreferrer noopener\">programming languages<\/a>.&nbsp;<\/p>\n\n\n\n<p>MJML is also seen as an abstraction layer, which is a concept in computer science referring to something that hides system complexity from the user.&nbsp;<\/p>\n\n\n\n<p>Here are a few advantages of MJML:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The semantic syntax allows email developers to code easily and straightforwardly, boosting their productivity.<br \/><\/li><li>Its extensive library of standard components lightens the email codebase and speeds up the development process.<br \/><\/li><li>MJML\u2019s open-source engine enables the <a href=\"https:\/\/email.uplers.com\/blog\/create-html-email\/\" target=\"_blank\" rel=\"noreferrer noopener\">creation of outstanding HTML emails<\/a>.<br \/><\/li><li>As an open-source framework, MJML benefits from a large community of contributors who continually improve the framework and provide support, documentation, and resources for developers.<br \/><\/li><li>By using MJML, you can avoid the complex nesting of HTML tables and the need for email client-specific CSS.<br \/><\/li><li>MJML handles many of the quirks and inconsistencies of different email clients, providing a more consistent rendering experience and reducing the need for client-specific CSS hacks.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"375\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image4-5.png\" alt=\"\" class=\"wp-image-40261\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image4-5.png 1000w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image4-5-300x113.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image4-5-768x288.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image4-5-624x234.png 624w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"howtouse\"><strong>How to Use MJML for Email?<\/strong><\/h2>\n\n\n\n<p>Follow these steps to code an MJML email:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>You start with the <code>&lt;mjml&gt;<\/code> tag. The <code>&lt;mjml&gt;<\/code> tag acts as the foundation of your MJML document. It includes all the content that will be used to build your email.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Next, you add the <code>&lt;mj-head&gt;<\/code> tag which, similar to the <code>&lt;head&gt;<\/code> tag in HTML, will contain all the information of the head section.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Coming to the email body, the <code>&lt;mj-section&gt;<\/code> tag breaks it down into sections containing columns (<code>&lt;mj-column&gt;<\/code>) and text (<code>&lt;mj-text&gt;<\/code>).&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Add relevant tags for buttons, images, and tables by using <code>&lt;mj-button&gt;, &lt;mj-image&gt;<\/code>, and <code>&lt;mj-table&gt;<\/code>, respectively.<br \/><\/li><li>Go on adding the relevant MJML tags for your navigation bar, social media sharing, hero banners, accordions, carousels, etc. You can also build custom MJML components.&nbsp;<\/li><\/ul>\n\n\n\n<p>Here is an example of a simple welcome email designed using MJML.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1531\" height=\"316\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image5-5.png\" alt=\"email designed using MJML\" class=\"wp-image-40262\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image5-5.png 1531w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image5-5-300x62.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image5-5-1024x211.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image5-5-768x159.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image5-5-624x129.png 624w\" sizes=\"auto, (max-width: 1531px) 100vw, 1531px\" \/><\/figure><\/div>\n\n\n\n<p>And here\u2019s how the welcome email looks.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1152\" height=\"346\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image3-8.png\" alt=\"MJML welcome email\" class=\"wp-image-40263\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image3-8.png 1152w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image3-8-300x90.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image3-8-1024x308.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image3-8-768x231.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image3-8-624x187.png 624w\" sizes=\"auto, (max-width: 1152px) 100vw, 1152px\" \/><\/figure><\/div>\n\n\n\n<p>After completing the coding, navigate to the MJML online editor. Click the &#8220;Render&#8221; button at the bottom left, then click on the &#8220;HTML&#8221; option at the top left. Once the HTML is generated, you can send the email through your <a href=\"https:\/\/email.uplers.com\/email-service-provider-esp-integration\/\">preferr<\/a><a href=\"https:\/\/email.uplers.com\/email-service-provider-esp-integration\/\" target=\"_blank\" rel=\"noreferrer noopener\">e<\/a><a href=\"https:\/\/email.uplers.com\/email-service-provider-esp-integration\/\">d ESP<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"MJMLvsHTML\"><strong>MJML vs. HTML: What\u2019s The Difference?<\/strong><\/h2>\n\n\n\n<p>Conceptually, the main difference between the two is that HTML is the standard markup language for structuring content on websites, mobile apps, and emails, whereas MJML is specifically built for <a href=\"https:\/\/email.uplers.com\/email-template-production-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">creating responsive emails<\/a>.<\/p>\n\n\n\n<p>Unlike HTML, which is not essentially render-friendly, MJML simplifies coding and email rendering across major email clients.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s consider another simple welcome email. Below is a comparison of the email written using HTML and MJML. Notice the complexity and length in either case.&nbsp;<\/p>\n\n\n\n<p><strong>1. MJML Code<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image6-6-1024x408.png\" alt=\" MJML code\n\" class=\"wp-image-40265\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image6-6-1024x408.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image6-6-300x119.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image6-6-768x306.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image6-6-624x249.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image6-6.png 1263w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p><strong>2. HTML Code<\/strong><\/p>\n\n\n\n<div class=\"dm-code-snippet dark dm-normal-version no-background no-background-mobile\" snippet-height=\"\" style=\"background-color:#abb8c3\"><div class=\"control-language\"><div class=\"dm-buttons\"><div class=\"dm-buttons-left\"><div class=\"dm-button-snippet red-button\"><\/div><div class=\"dm-button-snippet orange-button\"><\/div><div class=\"dm-button-snippet green-button\"><\/div><\/div><div class=\"dm-buttons-right\"><a id=\"dm-copy-raw-code\"><span class=\"dm-copy-text\">Copy Code<\/span><span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span><span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a><\/div><\/div><pre class=\" line-numbers\"><code id=\"dm-code-raw\" class=\" no-wrap language-markup\">&lt;!doctype html>\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n\n&lt;head>\n&lt;title> &lt;\/title>\n&lt;!--[if !mso]>&lt;!-- -->\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n&lt;!--&lt;![endif]-->\n&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n&lt;style type=\"text\/css\">\n#outlook a {\npadding: 0;\n}\n\n.ReadMsgBody {\nwidth: 100%;\n}\n\n.ExternalClass {\nwidth: 100%;\n}\n\n.ExternalClass * {\nline-height: 100%;\n}\n\nbody {\nmargin: 0;\npadding: 0;\n-webkit-text-size-adjust: 100%;\n-ms-text-size-adjust: 100%;\n}\n\ntable,\ntd {\nborder-collapse: collapse;\nmso-table-lspace: 0pt;\nmso-table-rspace: 0pt;\n}\n\nimg {\nborder: 0;\nheight: auto;\nline-height: 100%;\noutline: none;\ntext-decoration: none;\n-ms-interpolation-mode: bicubic;\n}\n\np {\ndisplay: block;\nmargin: 13px 0;\n}\n&lt;\/style>\n&lt;!--[if !mso]>&lt;!-->\n&lt;style type=\"text\/css\">\n@media only screen and (max-width:480px) {\n@-ms-viewport {\nwidth: 320px;\n}\n@viewport {\nwidth: 320px;\n}\n}\n&lt;\/style>\n&lt;!--&lt;![endif]-->\n&lt;!--[if mso]>\n&lt;xml>\n&lt;o:OfficeDocumentSettings>\n&lt;o:AllowPNG\/>\n&lt;o:PixelsPerInch>96&lt;\/o:PixelsPerInch>\n&lt;\/o:OfficeDocumentSettings>\n&lt;\/xml>\n&lt;![endif]-->\n&lt;!--[if lte mso 11]>\n&lt;style type=\"text\/css\">\n.outlook-group-fix { width:100% !important; }\n&lt;\/style>\n&lt;![endif]-->\n&lt;style type=\"text\/css\">\n@media only screen and (min-width:480px) {\n.mj-column-per-100 {\nwidth: 100% !important;\nmax-width: 100%;\n}\n}\n&lt;\/style>\n&lt;style type=\"text\/css\">\n@media only screen and (max-width:480px) {\ntable.full-width-mobile {\nwidth: 100% !important;\n}\ntd.full-width-mobile {\nwidth: auto !important;\n}\n}\n&lt;\/style>\n&lt;\/head>\n\n&lt;body>\n&lt;div style=\"\">\n&lt;!--[if mso | IE]>\n&lt;table\nalign=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\"\n>\n&lt;tr>\n&lt;td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\">\n&lt;![endif]-->\n&lt;div style=\"Margin:0px auto;max-width:600px;\">\n&lt;table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n&lt;tbody>\n&lt;tr>\n&lt;td style=\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;\">\n&lt;!--[if mso | IE]>\n&lt;table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n\n&lt;tr>\n\n&lt;td\nclass=\"\" style=\"vertical-align:top;width:600px;\"\n>\n&lt;![endif]-->\n&lt;div class=\"mj-column-per-100 outlook-group-fix\" style=\"font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\">\n&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"vertical-align:top;\" width=\"100%\">\n&lt;tr>\n&lt;td align=\"center\" style=\"font-size:0px;padding:10px 25px;word-break:break-word;\">\n&lt;table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"border-collapse:collapse;border-spacing:0px;\">\n&lt;tbody>\n&lt;tr>\n&lt;td style=\"width:100px;\"> &lt;img height=\"auto\" src=\"\/assets\/img\/logo-small.png\" style=\"border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;\" width=\"100\" \/> &lt;\/td>\n&lt;\/tr>\n&lt;\/tbody>\n&lt;\/table>\n&lt;\/td>\n&lt;\/tr>\n&lt;tr>\n&lt;td style=\"font-size:0px;padding:10px 25px;word-break:break-word;\">\n&lt;p style=\"border-top:solid 4px #F45E43;font-size:1;margin:0px auto;width:100%;\"> &lt;\/p>\n&lt;!--[if mso | IE]>\n&lt;table\nalign=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-top:solid 4px #F45E43;font-size:1;margin:0px auto;width:550px;\" role=\"presentation\" width=\"550px\"\n>\n&lt;tr>\n&lt;td style=\"height:0;line-height:0;\">\n&nbsp;\n&lt;\/td>\n&lt;\/tr>\n&lt;\/table>\n&lt;![endif]-->\n&lt;\/td>\n&lt;\/tr>\n&lt;tr>\n&lt;td align=\"left\" style=\"font-size:0px;padding:10px 25px;word-break:break-word;\">\n&lt;div style=\"font-family:helvetica;font-size:20px;line-height:1;text-align:left;color:#F45E43;\"> Hello World &lt;\/div>\n&lt;\/td>\n&lt;\/tr>\n&lt;\/table>\n&lt;\/div>\n&lt;!--[if mso | IE]>\n&lt;\/td>\n\n&lt;\/tr>\n\n&lt;\/table>\n&lt;![endif]-->\n&lt;\/td>\n&lt;\/tr>\n&lt;\/tbody>\n&lt;\/table>\n&lt;\/div>\n&lt;!--[if mso | IE]>\n&lt;\/td>\n&lt;\/tr>\n&lt;\/table>\n&lt;![endif]-->\n&lt;\/div>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre><\/div><\/div>\n\n\n\n<p>This is how the email will look like.<\/p>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1076\" height=\"255\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image1-8.png\" alt=\"HTML code\n\" class=\"wp-image-40266\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image1-8.png 1076w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image1-8-300x71.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image1-8-1024x243.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image1-8-768x182.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image1-8-624x148.png 624w\" sizes=\"auto, (max-width: 1076px) 100vw, 1076px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Limitations\"><strong>Limitations of MJML&nbsp;<\/strong><\/h2>\n\n\n\n<p>You might face the following problems when using MJML for creating emails:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Background images may not render properly on certain email clients.<br \/><\/li><li>Outlook doesn\u2019t always correctly interpret CSS classes, which MJML adds by default, leading to compromised mobile layouts.<br \/><\/li><li>The converted HTML code may be complex and contain errors.<br \/><\/li><li>The converted HTML code is typically long. So you\u2019ll want to \u201cminify\u201d the code. The MJML online editor does feature the option to minify code.<br \/><\/li><li>MJML&#8217;s automatic conversion might not always produce the desired results in less popular or older email clients, necessitating additional testing and tweaking to ensure compatibility across email clients.<br \/><\/li><li>While MJML offers a variety of pre-built components, the framework can be less flexible for highly customized email designs, potentially requiring a fallback to traditional HTML and CSS thus limiting the customization options.<br \/><\/li><li>The abstraction layer in MJML can sometimes lead to bloated HTML output, which can affect email load times and impact performance on slower connections or devices.<br \/><\/li><li>MJML&#8217;s debugging tools are not as extensive as those available for pure HTML and CSS, which can make troubleshooting more <a href=\"https:\/\/email.uplers.com\/blog\/responsive-emails-design-challenges-opportunities\/\" target=\"_blank\" rel=\"noreferrer noopener\">challenging for complex email designs<\/a>.<\/li><\/ul>\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-40234 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/hire-dedicated-email-developer\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"376\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-04-100.jpg\" class=\"attachment-full size-full\" alt=\"responsive HTML email developers\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-04-100.jpg 1001w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-04-100-300x113.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-04-100-768x288.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/Banner-04-100-624x234.jpg 624w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dodonts\"><strong>The Do\u2019s &amp; Don\u2019ts of MJML<\/strong><\/h2>\n\n\n\n<p>Let\u2019s quickly consider the do\u2019s and don\u2019ts of leveraging MJML. First off, the do\u2019s:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Use the MJML Online Editor: <\/strong>Utilize the MJML online editor for quick testing and rendering of your MJML code. It provides a live preview and can help you spot issues early.<br \/><\/li><li><strong>Leverage Pre-built Components: <\/strong>Take advantage of MJML&#8217;s extensive library of pre-built components to speed up your development process and ensure consistency in your designs.<br \/><\/li><li><strong>Validate and Optimize Output: <\/strong>Always validate and optimize the HTML output generated by MJML. Use tools to minify and clean up the code to ensure better performance and deliverability.<br \/><\/li><li><strong>Regularly Update MJML: <\/strong>Keep your MJML framework up to date with the latest version to benefit from new features, improvements, and bug fixes.<br \/><\/li><li><strong>Test Across Multiple Clients: <\/strong>Even though MJML aims to provide cross-client compatibility, always <a href=\"https:\/\/email.uplers.com\/blog\/best-email-verification-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">test your emails<\/a> in multiple email clients and devices to ensure they render as expected.<\/li><\/ul>\n\n\n\n<p>Finally, the don\u2019ts:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Don&#8217;t Rely Solely on MJML Defaults: <\/strong>While MJML provides good defaults, don&#8217;t rely solely on them. Customize your styles and layouts as needed to match your brand and design requirements.<br \/><\/li><li><strong>Avoid Overcomplicating Designs: <\/strong>Don\u2019t overcomplicate your email designs with excessive nesting and complex layouts. Simpler designs are more likely to render consistently across different clients.<br \/><\/li><li><strong>Don&#8217;t Ignore Email Client Limitations: <\/strong>Be aware of the specific limitations and quirks of various email clients. For example, Outlook might not handle certain CSS properties well, even if MJML handles them in other clients.<br \/><\/li><li><strong>Don&#8217;t Skip Documentation: <\/strong>Avoid skipping the MJML documentation and resources. They provide valuable insights and best practices that can help you make the most out of the framework.<br \/><\/li><li><strong>Don&#8217;t Neglect Accessibility: <\/strong>Don&#8217;t overlook email accessibility. Ensure your MJML emails are accessible to users with disabilities by using semantic HTML tags and providing appropriate <a href=\"https:\/\/email.uplers.com\/blog\/alt-text-boost-email-engagement\/\" target=\"_blank\" rel=\"noreferrer noopener\">alt text for images<\/a>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image2-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"467\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image2-8.png\" alt=\"\" class=\"wp-image-40267\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image2-8.png 1001w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image2-8-300x140.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image2-8-768x358.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/07\/image2-8-624x291.png 624w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Code Responsive, Responsibly!<\/strong><\/h2>\n\n\n\n<p>MJML is one of the most popular, handy alternatives to complex coding.&nbsp;<\/p>\n\n\n\n<p>That being said, there\u2019s no final alternative to expertise. Email is complex and email clients unpredictable. While Gmail and other clients are beginning to support better renderability, email still lacks universally accepted coding standards due to its open platform nature. As a result, <a href=\"https:\/\/email.uplers.com\/custom-email-templates-design-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">responsible email coding<\/a> is as important as responsive coding.&nbsp;<\/p>\n\n\n\n<p>Our post covered just the basics of MJML email. This should give you a head start. But if you want to explore further, head over to <a href=\"https:\/\/documentation.mjml.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MJML\u2019s documentation<\/a>.&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating truly responsive emails is no piece of cake. But you can simplify coding and streamline email rendering using MJML. Catch the deets!<\/p>\n","protected":false},"author":78,"featured_media":40269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382],"tags":[870,871],"class_list":["post-12038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding","tag-mjml-coding","tag-responsive-emails-with-mjml-coding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create and code responsive emails using MJML coding<\/title>\n<meta name=\"description\" content=\"Take your email development skills to the next level with MJML Coding. Discover how this framework empowers you to create stunning, responsive emails effortlessly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create and code responsive emails using MJML coding\" \/>\n<meta property=\"og:description\" content=\"Take your email development skills to the next level with MJML Coding. Discover how this framework empowers you to create stunning, responsive emails effortlessly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-24T06:53:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-17T07:20:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language-540x282.png\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Susmit Panda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Susmit Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/\",\"name\":\"How to create and code responsive emails using MJML coding\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language.png\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3\"},\"description\":\"Take your email development skills to the next level with MJML Coding. Discover how this framework empowers you to create stunning, responsive emails effortlessly.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language.png\",\"width\":1170,\"height\":470,\"caption\":\"Code Responsive Emails Using MJML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MJML Email: How to Code Responsive Emails Using MJML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3\",\"name\":\"Susmit Panda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png\",\"caption\":\"Susmit Panda\"},\"description\":\"A realist at heart and an idealist at head, Susmit is a content writer at Email Uplers. He has been in the digital marketing industry for half a decade. When not writing, he can be seen squinting at his Kindle, awestruck.\",\"sameAs\":[\"https:\/\/email.uplers.com\/\",\"https:\/\/www.linkedin.com\/in\/susmit-panda-965a1214a\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create and code responsive emails using MJML coding","description":"Take your email development skills to the next level with MJML Coding. Discover how this framework empowers you to create stunning, responsive emails effortlessly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/","og_locale":"en_US","og_type":"article","og_title":"How to create and code responsive emails using MJML coding","og_description":"Take your email development skills to the next level with MJML Coding. Discover how this framework empowers you to create stunning, responsive emails effortlessly.","og_url":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2024-07-24T06:53:00+00:00","article_modified_time":"2024-10-17T07:20:49+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language-540x282.png","type":"image\/png"}],"author":"Susmit Panda","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Susmit Panda","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/","url":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/","name":"How to create and code responsive emails using MJML coding","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language.png","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3"},"description":"Take your email development skills to the next level with MJML Coding. Discover how this framework empowers you to create stunning, responsive emails effortlessly.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/10\/Mitigate-The-Pain-Of-Coding-Responsive-Emails-With-MJML-Markup-Language.png","width":1170,"height":470,"caption":"Code Responsive Emails Using MJML"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/how-to-code-responsive-html-email-using-mjml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"MJML Email: How to Code Responsive Emails Using MJML"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/24f62735fffd154f82f33d19d2eaacb3","name":"Susmit Panda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/07\/Susmit-96x96.png","caption":"Susmit Panda"},"description":"A realist at heart and an idealist at head, Susmit is a content writer at Email Uplers. He has been in the digital marketing industry for half a decade. When not writing, he can be seen squinting at his Kindle, awestruck.","sameAs":["https:\/\/email.uplers.com\/","https:\/\/www.linkedin.com\/in\/susmit-panda-965a1214a\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/12038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=12038"}],"version-history":[{"count":22,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/12038\/revisions"}],"predecessor-version":[{"id":41157,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/12038\/revisions\/41157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/40269"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=12038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=12038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=12038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}