Developers Club geek daily blog

1 year, 8 months ago
In our blog we already repeatedly told about creation of email-mailings by means of CSS and HTML. Today it will be a question of the approach to imposition creation. The Italian designer Massimo Cassandro on the site SitePoint has described the development process of html-letters. In it there are some interesting moments so we have decided to make adapted translation of this note.

How-to: Process of creation of imposition of html-letters

Each specialist has the approach to web development: favourite editor, certain auxiliary tools, specific course of the project, etc. During the work with big and complex challenges it is very important to have clear vision of way from beginning to end, it allows to minimize errors and saves time.

By my experience, it is especially important at creation of HTML of mail letters. Email demands execution of large number repeating task which in itself are not so difficult, but mention huge number of different elements that can lead to errors. Here, as I try to avoid it.

Normal development approach of email-letters


Classical approach to creation of imposition of email-letters includes three steps:

  • Development (with small local tests);
  • CSS Inlayning;
  • Testing.

How-to: Process of creation of imposition of html-letters

Final testing (with inlayn-CSS) demands a lot of time as tests need to be banished many times. Moreover, steps "CSS inlayning" and "Testing" demand additional work and attention: first, it is necessary to save also the initial working imposition, in addition to the inlayn-version. Besides, final tests mean sending the inlayn-version of template for different postal addresses to check how everything is displayed in different mail programs.

Sending code through email not such simple occupation as usually clients do not allow to create the letter with the inserted HTML code (behind exception unless, Thunderbird). So it is necessary to execute every time many actions — to create the letter, to create inlayn-CSS, to insert code, etc.

How-to: Process of creation of imposition of html-letters

If you have accounting entry in any of the platforms allowing to test letters (Litmus, Campaign Monitor, Pechkin-mail), everything becomes simpler — it is possible to insert simply code, and to see how it will be displayed. However for more exact tests all the same it is necessary to execute sending letters manually. For automation of tasks by this it is possible to use scripts, but all the same completely it will not be possible to avoid routine.

As for CSS, it is necessary to work with two files: one for inlayning, and the second for embed (for the clients supporting media requests).

CSS need to be imposed so that the inlayn-code was added directly in the HTML file (it is possible to use specialized inlayner), and then "to zaembedit" the second CSS directly in the inlayn-file (about it even boringly to write not that to do).

Let's look on in more detail the detailed scheme:

How-to: Process of creation of imposition of html-letters

On the way to really productive process there are many obstacles, fortunately, it can be improved. We have preprocessors and task-ranner.

We add preprocessors of HTML and CSS


Preprocessors can be the extremely useful at email-imposition creation. They can simplify considerably code both for HTML, and for CSS.

For HTML Jade can use, and for CSS — Less. The first is especially useful during the work with redundant and complex code (for example, nested tables). Look at code sample of the three-level nested table:

<table width="100%" id="wrapper">
  <tbody>
    <tr>
      <td width="100%">
        <table align="center" class="header">
          <tbody>
            <tr>
              <td width="100%">
                <table width="100%">
                  <tbody>
                    <tr>
                      <td>cell 1</td>
                      <td>cell 2</td>
                      <td>cell 3</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

By means of Jade all can be simplified considerably:

table(width="100%" id="wrapper")
  tbody
    tr
      td(width="100%")
        table(class="header" align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

Now any problems with open tags and the code became much more readable. With the help of Jade it is possible to create difficult templates and to develop own library of snippets, reusing code in different projects. Too most it is possible to make and by means of Less or Sass.

For compilation of files Gulp can use or Grunt, and for receiving fast preview of the done work, Coda and CodeKit perfectly approach.

The stage of "local testing" in our development process allows to receive initial back coupling about the done work, plus it does not demand any additional actions.

CodeKit compiles the Jade and Less files when saving so it is possible to see display of the project in real time. Coda, in turn, allows to edit the file and right there to see the updated skomplirovanny option in special window:

How-to: Process of creation of imposition of html-letters

How-to: Process of creation of imposition of html-letters

All actions are completely automated that allows to be focused on development of design, but not to spend time for boring routine tasks.

So, we used Jade and Less for initial development and receiving preview of HTML and CSS code. On the following step it is necessary to bring everything together for final testing.

High-speed testing with Gulp


There are different scripts allowing to automate testing. For example, the quite good tool is npm, but the packet of Gulp Email Builder even is more convenient. This packet is part of more large-scale project, there is also its Grunt-version.

Email Builder allows to carry out inlayning or embedding of CSS files for implementation of tests through special platforms, or sendings test email-letters.

To use Email Builder it will be necessary to set Gulp. How to make it, it is possible to read here. And here it is possible to find one more quite good article about use of Gulp and Grunt.

In addition, we will sipolzovat Gulp-Replace packet so it will also need to be set.

As usual, for any problem of Gulp it is necessary to configure gulpfile.js:

var gulp = require('gulp'),
    emailBuilder = require('gulp-email-builder'),
    replace = require('gulp-replace');

var current_date = new Date().toString(),

    email_subject = 'Food Service',

    remote_imgs_basepath = 'http://mydomain.com/path/to/remote/imgs/',

    email_builder_options = {
        encodeSpecialChars: true,

        emailTest : {
            // Your Email
            email : 'my.test.email@gmail.com,' + 
                'my.test.email@yahoo.com,' +
                'my.test.email@oulook.com',

            // Your email Subject
            subject : email_subject + ' [' + current_date + ']',

            // Optional
            transport: {
                type: 'SMTP',
                options: {
                    service: 'gmail',
                    auth: {
                        user: 'my.gmail.account@gmail.com',
                        pass: 'my_password'
                    }
                }
            }
        },

        litmus : {
            username : 'Litmus_username',
            password : 'litmus_password',

            // Url to your Litmus account
            url : 'https://myaccount.litmus.com',

            // Optional, defaults to title of email or yyyy-mm-dd if <title> and options.subject not set
            subject : email_subject,

            // Email clients to test for. Find them at https://litmus.com/emails/clients.xml
            // and use the `application_code` field
            applications : ['androidgmailapp','gmailnew', 'iphone5s']
        }
    };

gulp.task('default', function() {
  gulp.src(['./explore_and_taste.html'])
    .pipe(replace(/src="imgs\//g, 'src="' + remote_imgs_basepath))
    .pipe(emailBuilder(email_builder_options))
    .pipe(gulp.dest('./ready_to_send'));
});

First of all, it is necessary to include all necessary packets and to configure four variables:

  • current_date — line which represents current date. We will use it for differentiation of test letters by that, so will easier find different versions;
  • email_subject;
  • remote_imgs_basepath — it is URL of the remote folder which contains the image. It can be used for carrying out local tests with installation of relative paths to pictures, final tests demand loading of images in the remote folder so it is necessary to change src-attributes of images on remote_imgs_basepath by means of Gulp-Replace;
  • email_builder_options — object for Email-builder configuration.

In this example object email_builder_options contains three elements. All available options are listed on this page.

The first element — encodeSpecialChars it is necessary to be convinced that all special characters are coded in numerical form.

Element emailTest it is used for testing setup, he also demands several parameters:

  • email — the postal addresses separated by commas to which it is necessary to send the test letter;
  • subject — letter subject (we have also added current_date in subject quickly to understand, with what version now there is work);
  • transport — service for sending.

If as transport Gmail is used, in settings of the account Google it is necessary to activate the option "Allow less secure apps", differently the task on sending will not be performed (for these purposes better not to use personal account):

How-to: Process of creation of imposition of html-letters

The third parameter allows to configure testing on the Litmus platform (so the account in this system is required). It is necessary to list accounting entry parameters, optional subject (it is required for group tests if they are carried out not once), and also the list of the tested postal addresses.

To add the client, it is necessary to use its testing application code. It is possible to recognize him from the https://litmus.com/emails/clients.xml file application_code field (to get to it access, it is necessary to be logged in in system).

In example the line is higher:

applications : [‘androidgmailapp’,’gmailnew’, ‘iphone5s’]

says to Litmus system that it is necessary to test the letter in the Gmail application for Anroid, Gmail (Explorer) and for iPhone 5s from iOS7.

How-to: Process of creation of imposition of html-letters

If it is necessary to carry out only email-tests, the Litmus parameter can be cleaned simply from email_builder_options.

Last lines gulpfile do all work:

  • At first we tell Gulp to use the file explore_and_taste.html (it is HTML created by CodeKit from the Jade-file which was used for the first preview);
  • By means of the replace module all local ways are replaced on deleted (replace(/src="imgs\//g, 'src="' + remote_imgs_basepath)).
  • At last, the task is carried out EmailBuilder, tests go to Litmus and on the selected postal addresses, the file, ready to be shipped, is created.

And what with CSS?

Email Builder simplifies this task. It is necessary to add attribute only data to tags link or style:

  • link and style- tags without attributes data will be used inlayn;
  • If they have attribute data-embed, CSS rules will be built in;
  • At last, data-embed-ignore allows to configure CSS rules only for problems of development (when processing they will be ignored).


Besides, Coda simplifies processing of Gulp by means of the internal terminal application:

How-to: Process of creation of imposition of html-letters

Conclusion


Now worker process has seriously changed and looks so:

How-to: Process of creation of imposition of html-letters

Each of steps, of course, can be customized under specific objectives, for example, to use other editor, to refuse CodeKit, or to apply Grunt instead of Gulp and Sass instead of Less. No matter, what technologies you use, similar approach to creation of imposition of email-letters considerably simplifies development.

This article is a translation of the original post at habrahabr.ru/post/268025/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus