We Decide on Media Queries. The Stripo Manifesto — Stripo.electronic mail


This document is our manifesto on the structure approach preferred by Stripo. We gave the good reasons for using this layout system, and our vision of this industry development, as well.

Story of the problem

This is about the adaptability of e-mails on cellular products. In the e-mail progress field, there are two approaches: just one of them is connected with working with CSS Media Queries, let’s contact it “Adaptive”, and the second one particular is — with out making use of Media Queries, which is named “Fluid-hybrid”.

The issue is there even now are cellular e-mail customers which do not aid electronic mail Adaptive structure. That is why in 2015 Nicole Merlin suggested the Fluid-hybrid approach which allows imitating adaptability in e mail consumers which do not help Media Queries. But, this process is not universal.

The Stripo Manifesto

When making technique concerning the editor generation, we surveyed and examined both format methods on various kinds of emails. Judging by the acquired outcomes and environment-tendency of product or service progress, we consciously chose the Adaptive process with Media Queries.

The truth of the matter is that in the progress business there were no crystal clear expectations, and owing to this fact builders have been permitted to interpret code the way they favored. Even the e-mail giant like Google experienced not supported Media Queries in its Gmail Application right until lately.

In November 2016, Google in its application started supporting a large selection of styles, which include Media queries! And in October 2017, Mail.ru Company notified about media queries guidance by its purposes.

In other words and phrases, the tendency is that really shortly the issue will be solved on its very own, and there will be no need to have the alt Fluid-hybrid technique.

Currently – in the middle of 2018 – adaptability is not supported by:

E-mail are displayed the way as on desktops – the internet-edition is downloaded.


We believe that Yandex will adhere to Google and Mail.ru’s example soon. At this time, net-variation is downloaded.


We consider that utilizing a smartphone e mail consumer is a scarce and odd case.


  • Old Android 5.1 and 6. Vanilla
  • &#13

There is a system in these variations of the software that imitates adaptability. This implies that emails will appear adaptive, nonetheless with some problematic problems.

For instance, in our Adaptive structure technique, the third or the fourth (the very last) block in composition will be usually proper-aligned. In the Fluid-hybrid technique, these blocks will be all 1-line-aligned, but even this point did not convince us to use this process.

As there is just one coming problem for both layout methods – content will hardly ever be comprehensive-display-width. The extra containers there are in the composition, the narrower they will be. And this means there will be “space” that can not be loaded in.

In the close, we can see shorter illegible textual content lines, modest visuals, and buttons which are tough to simply click on. Regretably, we have not managed to deal with it.

All the mentioned over challenges connected with the Adaptive layout technique do not appear to be essential to us – in any way, the email messages look wonderful, legible and deliver the principal plan to the audience.






Media Queries supported
Responsive blocks



Media Queries not supported

It appears that Fluid-hybrid technique has the cons that are equally critical for us, but in addition to every little thing, they simply cannot be fastened ultimately. Right here are some of them:

  • In order to established the margins in containers, Margin-left and Margin-right styles are utilized. They function effectively in general on most e mail consumers. They do not affect the containers’ adaptability nor the way they are exhibited if the containers’ width is less than the gadget screen width
  • &#13

In situation it is broader, we see the following effect: margin indents are included out of containers and are not regarded in normal width calculations, like Paddings.


  • If there is only textual content in containers, then in Outlook which is utilised by 7% mostly corporate clients, occurs a issue with the containers sizes. The issue is that block desk are not able to be modified to 100% width, and the textual content by itself are unable to widen the desk to the offered dimensions like an picture does. This is the cause why the indents concerning containers can be significantly less than specified kinds
  • &#13

This issue could be solved by placing a fixed width for the block table, but then another situation occurs for some e mail clients – email loses its adaptability. Hybrid-method requires fixed dimensions for the block desk.


  • Thanks to the font-dimensions: O, which is additional to 
     in containers, in buy to get rid of vacant spaces between the sells, it is expected to copy text styles into the guardian aspect. For example,  into a market of the Textual content block in a desk. Or else, textual content in Lotus Notus will be maximally little. (Scale 1:1)
  • &#13


This could be preset routinely, by location CSS models for the textual content in all blocks. But if a user manually can make changes to text in a person block, for occasion, this alter will not operate for Lotus Notes.

  • The fluid-hybrid method demands the use of equivalent indents all around all containers in buy to be vertically aligned on a mobile version. This signifies that on desktop variations there can be double indents.
  • &#13

For uncomplicated e-mails, this may be not critical, but for constructions with a huge number of containers and numerous indents, this gets to be a real issue.


The problems with the Adaptive layout approach will be solved on their have with eventual email customers updates. However, we will have to settle for the simple fact that problems with the Hybrid-fluid structure system will usually stay. We glance far in the upcoming and wager on Media Queries.

Of study course, if you have to have to create one particular or two simple messages, you can use the Fluid-hybrid strategy. But when it will come to the strategic advancement of our editor which is created for a long time, we pick out the Media Queries approach.

If you have tips, constructive criticism or approaches to fix the mentioned earlier mentioned issues, share this details with us on Facebook or email us at contact@stripo.email – we will be happy to choose it into thing to consider. We are open to discussion.

Leave a Reply

Your email address will not be published. Required fields are marked *