October 27, 2017 at 12:47Adaptive emails without pain and suffering
- Tutorial
Hello, Habr! Everyone who has ever encountered the layout of emails knows that this is tedious, tiring and sometimes very annoying. In most cases, this is due to the fact that email clients are not able to support a lot of what we use in the layout of the simplest web pages. Therefore, the design of the letter is made simple or not done at all, and the lion's share of the time is spent on checking and fixing bugs in numerous mailers.
In this article we want to share with you recipes for typesetting beautiful, in our opinion, and adaptive writing, which will adapt to the screen of your phone even in Gmail. And also talk about the nuances, problems and subtleties that we encountered in the process of its creation.
When composing email letters, table layout and a very limited set of css properties are usually used . Tabular layout implies a sufficiently large nesting, and editing an already finished template can be a real headache. After making the decision to switch to adaptive letters, the question arose of how to make these letters. Our choice fell on the rather popular Foundation framework , or rather on its underestimated younger brother Foundation for Emails .
Foundation for Emails out of the box can do a lot of what you might need in the process of typesetting letters:
Installation is quite simple and consists of only a few steps:
1. Install foundation-cli , you may need to use sudo
2. Go to the project directory and execute the command
The CLI will ask you the name of the future project, after which the project template will be downloaded and the necessary dependencies installed. The whole process takes no more than a minute. To start, just run the command
Foundation for Emails takes on most of the challenges you face. As in Foundation for sites, it uses a 12-column grid, on the basis of which you can build responsive letters in which a media query for mobile devices is already provided in advance. You can control the number of columns using the .large-n and .small-n classes . By default, if you do not specify the column width in the mobile client, it will occupy 100% of the container.
To correctly display your letter, you have to use tables with a fairly large nesting. Using the Inky templating engine simplifies the markup of emails and makes the code simpler and easier to read.
Sample code using Inky:
But do not get involved in too much nesting, because you may encounter a problem that we had at the very beginning of using this framework. Gmail does not like large letters and cuts off part of the message when the content becomes more than 102 kB (but in fact it starts to crop after 98 kB).
I think we all understand what percentage of users clicks "show whole".
For more information on Foundation for Email documentation, click here .
The process of layout of the first adaptive letters took us quite a long time, so we want to share with you the difficulties and subtleties that we had to face:
1. Implementing adaptability in letters is a rather complicated and tedious task, so we recommend that you shift this process onto the shoulders of the above Foundation for Emails. He will do the main work, and you just have to tell him how many columns you want to see on mobile devices and play a little with the font sizes. Of course, this is a slight understatement, but it really will greatly simplify your work.
This is how our letter looks in the desktop and mobile client.
Foundation for Emails has only one 596 pixel breakpoint in its arsenal small = “x”, but no one bothers you to add your own or redefine the global ones, if you really need it. In the _settings.scss file you will find everything you need.
2. If you are planning a newsletter in which there will be one template, and only the content will change, or you have the same footer everywhere, and the header and content area are different, we recommend that you use Partials .
Your template will look something like this:
In general, Foundation for Emails makes it possible to use a fairly large set of functions in the Handlebars template language.
3. In the first version of the letter, we drew attention to its rather large size. On closer examination it turned out that all styles are in
duplicated, in addition duplicated tags
4. We also recommend that you use Custom Data for template mailings .This is user data that can be added to the page, and then generated into your HTML via Handlebars. That will allow you to get rid of the need to edit HTML.
5. Instead of vertical indentation, use a table with a cell whose height attribute is set, this is guaranteed to give you the indentation you need in all email clients. Especially with Inky, this is done in one line.
6. If you decide to use spacer to set the height, but it seems too large for mobile clients, you can always hide it by adding a class to your markup
7. If you make a button, do it the same way with the help of a table, otherwise you risk getting text filled with color. Inky has a ready-made button component, the main thing is to remember to specify the href attribute , otherwise you'll have to wonder why you have plain text instead of the button.
8. Not all mail clients support background-image , but since our main header and body of the letter just had such a design, we chose the graceful degradation approach , in which the main mailers use a background picture, and in mail clients that do not have this support, color fill is used. Thus, we do not lose the readability of the text.
9. If you need to make an element whose main purpose is “embellishment”, also use the graceful degradation approach .
In our example, the corner is made using the: before pseudo-element. It is not supported in Gmail and Outlook and will not be displayed, but this will not greatly affect the overall appearance of the message, and if you make it a picture and place it in the table, then it is likely that it will "live" separately from its block, or even break email you.
10. During the development process, we need to check the resulting result of our layout. We use Putsmail from Litmus . Conveniently enough, when you have the opportunity to quickly test part of the letter or the entire letter, just insert the HTML code and specify your real mailboxes. Please note that upon first use you will receive a confirmation letter for each mailbox, and only then the letter itself. You can also use the plugin for Grunt . He essentially does the same.
We hope that acquaintance with Foundation for Emails will be useful to you and your next letters will be made in the company of this very convenient framework.
→ Demo letters
→ Sources letters
We give free access for three months of learning English using our online courses. To do this, simply follow the link until December 31, 2017.
We will be glad to see you in the individual classes of the English for IT Professionals course.
Take a free introductory lesson and get comprehensive feedback on your level of knowledge, then choose a teacher and a training program to your liking!
In this article we want to share with you recipes for typesetting beautiful, in our opinion, and adaptive writing, which will adapt to the screen of your phone even in Gmail. And also talk about the nuances, problems and subtleties that we encountered in the process of its creation.
Layout responsive emails with Foundation for Emails
When composing email letters, table layout and a very limited set of css properties are usually used . Tabular layout implies a sufficiently large nesting, and editing an already finished template can be a real headache. After making the decision to switch to adaptive letters, the question arose of how to make these letters. Our choice fell on the rather popular Foundation framework , or rather on its underestimated younger brother Foundation for Emails .
Foundation for Emails out of the box can do a lot of what you might need in the process of typesetting letters:
- Gulp: development automation
- Inky template engine: converts custom markup to HTML code
- Sass: CSS Preprocessor
- Handlebars: Generates HTML from JSON data (JavaScript template engine)
- Paninin: a file compiler that supports the Inky prototyping template.
- Inliner: translates from stylesheets to inline styles
- BrowserSync: reloading the page after changing the source files
- Image Compression: Image Compression During Compilation
Installation is quite simple and consists of only a few steps:
1. Install foundation-cli , you may need to use sudo
npm install --global foundation-cli2. Go to the project directory and execute the command
foundation new --framework emailsThe CLI will ask you the name of the future project, after which the project template will be downloaded and the necessary dependencies installed. The whole process takes no more than a minute. To start, just run the command
npm start, after which the default web address (usually http: // localhost: 3000 ) with the default template will open in your browser . The command npm run build starts compilation, during which the Inky markup is compiled into HTML markup, the styles are converted to inline styles, all spaces are removed and the images are optimized. The output is one HTML file and optimized images.Foundation for Emails takes on most of the challenges you face. As in Foundation for sites, it uses a 12-column grid, on the basis of which you can build responsive letters in which a media query for mobile devices is already provided in advance. You can control the number of columns using the .large-n and .small-n classes . By default, if you do not specify the column width in the mobile client, it will occupy 100% of the container.
To correctly display your letter, you have to use tables with a fairly large nesting. Using the Inky templating engine simplifies the markup of emails and makes the code simpler and easier to read.
Sample code using Inky:
Put content in me!
HTML output:
Put content in me!
But do not get involved in too much nesting, because you may encounter a problem that we had at the very beginning of using this framework. Gmail does not like large letters and cuts off part of the message when the content becomes more than 102 kB (but in fact it starts to crop after 98 kB).
I think we all understand what percentage of users clicks "show whole".
For more information on Foundation for Email documentation, click here .
Subtleties and difficulties
The process of layout of the first adaptive letters took us quite a long time, so we want to share with you the difficulties and subtleties that we had to face:
1. Implementing adaptability in letters is a rather complicated and tedious task, so we recommend that you shift this process onto the shoulders of the above Foundation for Emails. He will do the main work, and you just have to tell him how many columns you want to see on mobile devices and play a little with the font sizes. Of course, this is a slight understatement, but it really will greatly simplify your work.
This is how our letter looks in the desktop and mobile client.
Foundation for Emails has only one 596 pixel breakpoint in its arsenal small = “x”, but no one bothers you to add your own or redefine the global ones, if you really need it. In the _settings.scss file you will find everything you need.
@media only screen and (max-width: #{$global-breakpoint})2. If you are planning a newsletter in which there will be one template, and only the content will change, or you have the same footer everywhere, and the header and content area are different, we recommend that you use Partials .
Your template will look something like this:
Definitely STILL an Email!
{{> header}}
{{> body}}
{{> footer}}
In general, Foundation for Emails makes it possible to use a fairly large set of functions in the Handlebars template language.
3. In the first version of the letter, we drew attention to its rather large size. On closer examination it turned out that all styles are in
head, duplicated, in addition duplicated tags
headand bodyhow open or closed. After looking through the documentation in more detail, it was possible to identify the problem. It consisted in the fact that the Foundation itself creates headand bodywith everything necessary, and you can only make up the letter itself. 4. We also recommend that you use Custom Data for template mailings .This is user data that can be added to the page, and then generated into your HTML via Handlebars. That will allow you to get rid of the need to edit HTML.
---
title: Page Title
description: Lorem ipsum.
---
{{ title }}
5. Instead of vertical indentation, use a table with a cell whose height attribute is set, this is guaranteed to give you the indentation you need in all email clients. Especially with Inky, this is done in one line.
Stuff on top
Stuff on bottom
HTML output:
Stuff on top
Stuff on bottom
6. If you decide to use spacer to set the height, but it seems too large for mobile clients, you can always hide it by adding a class to your markup
.show-for-large and adding an indent to the block in your media request using CSS, mobile clients with this do better. We also want to draw your attention to the class .hide-for-large. We do not recommend using this class, as It is not supported in Gmail and Yahoo. 7. If you make a button, do it the same way with the help of a table, otherwise you risk getting text filled with color. Inky has a ready-made button component, the main thing is to remember to specify the href attribute , otherwise you'll have to wonder why you have plain text instead of the button.
HTML output:
8. Not all mail clients support background-image , but since our main header and body of the letter just had such a design, we chose the graceful degradation approach , in which the main mailers use a background picture, and in mail clients that do not have this support, color fill is used. Thus, we do not lose the readability of the text.
9. If you need to make an element whose main purpose is “embellishment”, also use the graceful degradation approach .
In our example, the corner is made using the: before pseudo-element. It is not supported in Gmail and Outlook and will not be displayed, but this will not greatly affect the overall appearance of the message, and if you make it a picture and place it in the table, then it is likely that it will "live" separately from its block, or even break email you.
Another similar example
10. During the development process, we need to check the resulting result of our layout. We use Putsmail from Litmus . Conveniently enough, when you have the opportunity to quickly test part of the letter or the entire letter, just insert the HTML code and specify your real mailboxes. Please note that upon first use you will receive a confirmation letter for each mailbox, and only then the letter itself. You can also use the plugin for Grunt . He essentially does the same.
We hope that acquaintance with Foundation for Emails will be useful to you and your next letters will be made in the company of this very convenient framework.
→ Demo letters
→ Sources letters
Reader Bonuses
Online Courses
We give free access for three months of learning English using our online courses. To do this, simply follow the link until December 31, 2017.
Individually by Skype
We will be glad to see you in the individual classes of the English for IT Professionals course.
Take a free introductory lesson and get comprehensive feedback on your level of knowledge, then choose a teacher and a training program to your liking!