Hey folks,
UPDATE: Maizzle is a standalone framework now, it no longer uses Jigsaw. It has been rewritten in Node.js and relaunched April 1st, 2019 - find it on NPM.
Many things have changed since I posted here 2 years ago, so I thought I should update my answer.
In August 2018, I launched the Maizzle Email Framework, and this is what I have been using since.
It's powered by the Tailwind CSS framework and the Jigsaw static site generator. It has many features, most of which are either things I wish existed in an email framework, or that have been suggested by others in the community. It's quite a long list, so I'm not going to add it here - just check the website linked above.
I guess the biggest difference when compared to the two most established options is that there's no custom markup/tags that you need to learn - you do need to write your own HTML.
On the flip side, this approach means you're in full control, as there's no code hidden behind custom tags; so you can choose to code one email hybrid, and another responsive - totally up to you. It's also faster to pick-up, since it's just HTML that you already know.
Perhaps the feature that I am most fond of is that you can use Tailwind CSS as a design system for your emails, and not have to write CSS for most of the time. Coupled with the BrowserSync live preview, you can prototype emails really, really fast (I've been lately doing redesign experiments with Maizzle on popular brands' emails, and it usually takes me under one hour for a layout).
Maizzle is open source on GitHub - if you have feedback, issues, or would like to contribute and make it better, I would love to hear from you 😊
Thanks Bettina,
I should note that yes, the meta tag fixes the zoomed-out issue on a real device. The problem we're facing is test screenshots are nudged vertically (both up and down, randomly).
And, at least in my case in EoA (maybe it's the same in Litmus?), the meta tag has no effect when testing (also randomly). But again, this is only in render tests, it does work fine on a real device. It's just that if you need those screenshots in your approval flow, it can be a pain... :)
Edit: as Kevin pointed out, this issue revolves around table display, i.e. it doesn't affect div layouts.
While using Kevin's nice solution, I found it has one side-effect: on Gmail Android, it pushes the layout a bit to the right:
The div in u ~ div {min-width: 100vw;} is your <body> tag transformed into a div by Gmail. Apparently, Gmail Android doesn't like it when you use vw to force it to full width, and goes a bit off screen.
But if you change that CSS to target your main wrapper table, it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
@media only screen and (max-width: 599px) {
u ~ div .wrapper {min-width: 100vw;}
}
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;">
<table class="wrapper" bgcolor="#EEEEEE" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
I've seen this happen in EoA as well, and the meta tag for disabling message reformatting doesn't help with the vertical nudging - I have to reprocess the test A LOT of times before it correctly displays it.
I think this is an issue with taking screenshots on iOS 11 actually, as both of the two big names in email testing are experiencing it.
Does it work fine on iPhone iOS 10 for you?
Old discussion, but hey, I just got it in my Litmus Community email today, so thought I might chime in.
I see most people recommending Outlook-specific commented styles. I find that an unnecessary extra piece of code - you can do it much cleaner, without always resorting to Outlook comments...
1. Base typography reset
In your embedded CSS, reset the typography first. Using a Bootstrap 4-inspired system font stack here, but use whatever system fonts you like. Also keep in mind that some clients won't support tag selectors - that's why I included a class, which you can use on your cells, for example.
.column, th, td, div, p {-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px;}
I've tested this and it works across the board, including all Outlook clients and Windows 10 Mail.
2. Webfonts import
Instead of inlining the webfont family (which triggers Times New Roman in Outlook), apply the webfont in a media query. All clients that support webfonts will support this:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@media only screen {
.column, td, div, p {font-family: 'Open Sans', sans-serif !important;}
}
What's cool about this is that you can import multiple fonts and assign them to classes that you add to your cells/paragraphs/headings. So you can have a certain font for headings while using a different one for the body copy:
Here's an example of what I usually do:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700');
@media only screen {
.serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
.sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
}
Of course, if you want the webfonts to fallback to that same system fonts stack, you must include it in the media query as well, as it uses !important to override the reset above. I just used sans-serif to keep it short.
Hope this helps :)
Old discussion, but hey, I just got it in my Litmus Community email today, so thought I might chime in.
I see most people recommending Outlook-specific commented styles. I find that an unnecessary extra piece of code - you can do it much cleaner, without always resorting to Outlook comments...
1. Base typography reset
In your embedded CSS, reset the typography first. Using a Bootstrap 4-inspired system font stack here, but use whatever system fonts you like. Also keep in mind that some clients won't support tag selectors - that's why I included a class, which you can use on your cells, for example.
.column, th, td, div, p {-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px;}
I've tested this and it works across the board, including all Outlook clients and Windows 10 Mail.
2. Webfonts import
Instead of inlining the webfont family (which triggers Times New Roman in Outlook), apply the webfont in a media query. All clients that support webfonts will support this:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@media only screen {
.column, td, div, p {font-family: 'Open Sans', sans-serif !important;}
}
What's cool about this is that you can import multiple fonts and assign them to classes that you add to your cells/paragraphs/headings. So you can have a certain font for headings while using a different one for the body copy:
Here's an example of what I usually do:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700');
@media only screen {
.serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
.sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
}
Of course, if you want the webfonts to fallback to that same system fonts stack, you must include it in the media query as well, as it uses !important to override the reset above. I just used sans-serif to keep it short.
Hope this helps :)
Old discussion, but hey, I just got it in my Litmus Community email today, so thought I might chime in.
I see most people recommending Outlook-specific commented styles. I find that an unnecessary extra piece of code - you can do it much cleaner, without always resorting to Outlook comments...
1. Base typography reset
In your embedded CSS, reset the typography first. Using a Bootstrap 4-inspired system font stack here, but use whatever system fonts you like. Also keep in mind that some clients won't support tag selectors - that's why I included a class, which you can use on your cells, for example.
.column, th, td, div, p {-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px;}
I've tested this and it works across the board, including all Outlook clients and Windows 10 Mail.
2. Webfonts import
Instead of inlining the webfont family (which triggers Times New Roman in Outlook), apply the webfont in a media query. All clients that support webfonts will support this:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@media only screen {
.column, td, div, p {font-family: 'Open Sans', sans-serif !important;}
}
What's cool about this is that you can import multiple fonts and assign them to classes that you add to your cells/paragraphs/headings. So you can have a certain font for headings while using a different one for the body copy:
Here's an example of what I usually do:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700');
@media only screen {
.serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
.sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
}
Of course, if you want the webfonts to fallback to that same system fonts stack, you must include it in the media query as well, as it uses !important to override the reset above. I just used sans-serif to keep it short.
Hope this helps :)
This is what I use, works great across the board.
<img src="https://picsum.photos/600/600" width="300" style="width: 100%; max-width: 300px;">