31 August 2017

Editing HTML and CSS Codes in a Visual Block Editor Stripo.email

Dmitry Kudrenko
Dmitry Kudrenko Founder and CEO of Stripo
Table of contents
  1. Let’s talk about styles
  2. Own code markup
  3. Feedback from the developer
Let’s talk about styles

To help you create responsive email templates, typically, there are 2 types of editors: the code editor and the block editor. This is connected, in my opinion, with two reasons:

  • not any code can be adapted to the internal layout of the block editor;
  • if you allow the user to do more permissible editor, then he will certainly break everything, and the system will always be guilty and the support service will be raked.

BUT, these reasons are all of a technical nature, not a custom one. In this very often there is a desire to slightly change the generated code or insert your «snippet».

Interesting observation of the emails in eSsputnik: the developers of the emails open the code inspector, change it there and immediately look at the result as it is very convenient. Code inspector makes it possible to write safe HTML closing all unclosed tags, etc. But the main thing is a quick result. Any change in the email leads to a change in the code and vice versa. Another cool plus of using the code inspector is that it focuses only on the selected item, quickly finding that piece of code that you need.

Along with the syntax highlighting, these three features formed the basis of our editor:

  1. edit only the portion of the code we are working on;
  2. apply changes quickly in both directions;
  3. ensure the security of the entered code by closing the tags.

Identify the highlighted code is very easy. I already wrote that we have a hierarchy of content in the email: a stripe, a structure, a container, a block and an elementary element. Selecting the corresponding fragment in the code editor shows only the selected code and does not allow, on the one hand, to change the external code, and on the other hand, it focuses on the necessary code fragment.

There is one more principle that should be described separately: we decided to abandon pop-up windows. This is the topic of a separate post. In particular, this principle makes it easy to change HTML and monitor changes.

Let’s talk about styles

The emails still cannot fully use the external styles listed in the head or body style. It is recommended that some styles be inserted into the inline elements. But at the time of editing, it would be good to use common styles and be able to say that in the footer of an email, for example, all links should be unstressed.

In addition, in the body of the CSS email, the styles and code of the fragment are in different parts.

Therefore, we selected the styles in a separate tab editor (in principle, as in the code inspector for Chrome). Thus, an advanced user can add and rewrite it as desired, add media selectors and proprietary features. And at the time of exporting the email, we run an inline program that inserts the CSS as it should. An ordinary user can change all styles using the control unit: to design and save different topics of emails within the project. About this, too, there will be a separate post.

Own code markup

You can simply edit any block as the specialist deems necessary, and save it to the library for later use. Moreover, you can take and download there any arbitrary HTML and CSS. In this case, only the editor of pictures and links will be available from the entire block editor. Because these are the usual standard elements of writing that do not require special markup.

At the same time, there are such blocks as, for example, a menu, or a container, which have special service styles and enable you to understand what kind of block it is. During the editing, we make sure that they are not violated. But this functionality allows you to customize other people’s templates for the features of the Stripo editor. For example, mark a block as a container and it will acquire all the necessary properties and there it will be possible to add other blocks. How to configure the template I will describe in one of the individual posts. Also, I would like to make a separate «wizard» on adapting an arbitrary HTML to the eSputnik editor. But this is not a priority for the next month, so I do not write about it yet.

In plans, you must write a manual for the preparation of an arbitrary HTML by Stripo. It is so lacking in many systems. Here, for example, MailChimp has recommendations on how to use MC: Edit and this allows us to insert these attributes into Mailchimp during the export process and to be able to edit the text in Mailchimp not in the code, but in the interface.

Feedback from the developer

Recently we got a message from the developer of a European design studio for emails. We talked, phoned to tell about the plans and get more feedback. I asked if he saw the editor, and he said that the first thing he looked at was how to change the HTML, and after that he continued his acquaintance with great care, because he did not use it more conveniently. It’s nice, damn it. Although I also like criticism. So do not be shy to share your opinion on Facebook with us.

Was this article helpful?
Tell us your thoughts
Thanks for your feedback!