---
title: Creating Adaptive/Responsive HTML Emails with MJML
description: A how-to guide on making HTML emails more adaptive and responsive using MJML.
image: https://blog.avenuecode.com/hubfs/bram-naus-200967.jpg
---
[AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact)
[](https://blog.avenuecode.com/?hsLang=en-us) *menu*
- Technology
[Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us)
[Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us)
- [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us)
- [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us)
- [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us)
- [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us)
- [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us)
- [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us)
- [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us)
- [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us)
- [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us)
- [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us)
- [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us)
- [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us)
- [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us)
- [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us)
- [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us)
- [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us)
- [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us)
# [Creating Adaptive/Responsive HTML Emails with MJML](https://blog.avenuecode.com/creating-adaptive-responsive-html-emails-with-mjml)
- [Tweet](https://twitter.com/share)
*perm\_identity* [Mark Carlson](https://blog.avenuecode.com/creating-adaptive-responsive-html-emails-with-mjml/author/mark-carlson?hsLang=en-us)
*schedule* 10/17/17 5:00 PM
Creating HTML emails is hard — much more difficult than creating a web page in HTML. [Bootstrap](http://www.getbootstrap.com/) and [Foundation](http://foundation.zurb.com/) spoil front-end developers. Slap a couple classes in your code and you can have a beautiful, or at least beautifully rendered, adaptive/responsive site in nearly every browser. Not so with email. Many email clients strip external CSS, leaving only inline styles. Some email clients render only a small subset of CSS. And of course, JavaScript is out of the question.
*This article was originally published on [MarkCarlson.io](http://markcarlson.io/creating-adaptiveresponsive-html-email-with-mjml/) and is republished here with permission from the author. *
Fortunately, there is a tool which makes creating HTML email pretty easy. Plus, the email renders nicely in both desktop and mobile. It’s called [MJML](https://mjmlio.github.io/mjml-app/).
## HTML Email: Before and After
### Before
Let's take a regular old HTML email and look at it in a desktop mail application:
This is a plain old HTML email. It has a masthead image, different font sizes, font weights, centered text, etc. Let’s take a look at this same email in a mobile device:
Even with a retina screen, users will have to use their fingers to zoom & scroll to read the content.
### After
With MJML, you compose the email using MJML markup. If you are familiar with HTML, it’s not hard at all to learn. Peruse the docs and you can be composing adaptive/responsive HTML emails in an hour or so. As we work in the app, we compose the MJML on the left and view the resulting rendered HTML in real time on the right:
A closer look at the code on the left and you can see how the top of this email is created:
Unlike HTML in email, we can even use a class structure for our styling. For example, we could refactor the above markup using HTML-like classes:
When it comes to converting this to HTML, MJML does all the heavy lifting for you to insure your email looks good in all kinds of email clients. The HTML it generates looks like this:
Yuck! Aren’t you glad you have a tool that will do this for you? But how does it look? You be the judge. Here’s the desktop view:
And now, that same email on a mobile device:
“Look, mom! No pinching & zooming!”
Try [MJML](https://mjml.io/). Spend a little time looking at the features and [gallery of samples](https://mjml.io/templates). For HTML email, you’ll wonder how you ever lived without it!
---
[](https://www.linkedin.com/in/markmtbrider)
### Author
# Mark Carlson
Mark Carlson is a Senior UI Developer at Avenue Code. Once a radio station personality and programmer, Mark built an online music research system to help determine song rotations. That project turned into a business of its own, taking Mark out of the on-air studio. Now, Mark is sharing his web development experience with Avenue Code clients in the SF Bay Area.
---
### Related Posts
### What are CSS Custom Properties
[READ MORE](https://blog.avenuecode.com/what-are-css-custom-properties?hsLang=en-us)
### How to Build Your Own Facial Recognition Web App
[READ MORE](https://blog.avenuecode.com/how-to-build-your-own-facial-recognition-web-app?hsLang=en-us)
### 4 Ways to Make Your Angular App Sustainable and Scalable
[READ MORE](https://blog.avenuecode.com/8-design-tips-to-make-your-angular-app-sustainable-and-scalable?hsLang=en-us)
### How to Build a Custom Component in VueJS
[READ MORE](https://blog.avenuecode.com/how-to-build-a-custom-component-in-vuejs?hsLang=en-us)
### Leave a Comment!
### Avenue Code Social
[](https://www.facebook.com/avenuecode)
[](https://twitter.com/AvenueCode)
[](https://www.linkedin.com/company/avenue-code)
### Newsletter
Want to stay on top of all tips and news from Avenue Code?
### Popular Snippets
### About Us
- [Who We Are](https://www.avenuecode.com/who-we-are)
- [What We Do](https://www.avenuecode.com/what-we-do)
- [Portfolio](https://www.avenuecode.com/portfolio)
- [Partners](https://www.avenuecode.com/partners)
- [News](https://www.avenuecode.com/news)
- [Events](https://www.avenuecode.com/events)
- [Blog](https://blog.avenuecode.com/)
- [Contact](https://www.avenuecode.com/contact)
### Our Offices
San Francisco
[+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com)
Belo Horizonte
[+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com)
São Paulo
[+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com)
### We're Hiring!
- [Belo Horizonte](https://www.avenuecode.com/who-we-are)
- [New York](https://www.avenuecode.com/what-we-do)
- [San Francisco](https://www.avenuecode.com/portfolio)
- [São Paulo](https://www.avenuecode.com/partners)
---
©2015 - 2017 Avenue Code
[](https://www.facebook.com/avenuecode) [](https://twitter.com/AvenueCode) [](https://www.linkedin.com/company/avenue-code) [](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [](https://www.youtube.com/user/AvenueCodePlay)
Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript)-->
© 2026 Avenue Code
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Mark Carlson",
"url" : "https://blog.avenuecode.com/author/mark-carlson"
},
"datePublished" : "2017-10-17T19:00:00.000Z",
"headline" : "Creating Adaptive/Responsive HTML Emails with MJML",
"image" : [ "https://blog.avenuecode.com/hubfs/bram-naus-200967.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://blog.avenuecode.com/creating-adaptive-responsive-html-emails-with-mjml",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png"
},
"name" : "Avenue Code"
}
}
```