The secret of our responsive email templates

[suhashini25]

One of the main services that our clients demand today is the responsive layout of their emails . As we never tire of repeating, 2015 was the year in which responsive design finally entered the email marketing sector with force and today, it is something that cannot be ignored for the success of any email campaign. Without having to resort to market studies and analyses that show the overwhelming penetration of mobile use, no one has overlooked the need to adapt any digital communication to mobile devices. Therefore, the first thing that clients ask for when they walk through our door is the mobile adaptation of their commercial emails and newsletters. This adaptation is not always easy, due to the limitations of this channel and the difficulty in reaching meeting points between the imperatives of design and the needs of responsive layout for email . The most common at&t email list problems we usually encounter when creating templates are texts that have to be kept as images for branding purposes or superimposed images that cannot be reordered in the mobile version. We also have to continually adapt to the changes made by different email clients in the way they render some HTML/CSS elements. When we are the ones who apply the brand's look & feel to the emails, the difficulties are reduced, since we already plan the design taking into account all the limitations of the following layout phase, but in many cases when working with large brands, we find that they have their own design team that plans the visual part. However, despite all the obstacles, and thanks to various experiences with clients with different needs, we have reached a work system that allows us to respond easily to their requirements, obtaining flexible email templates adaptable to different devices and favoring the subsequent "in-house" adaptation of each client. Below we tell you what the secret is and why more and more clients trust our responsive email templates. 1. Pre-training the client and their design team on the limitations of email.
responsive_mockup_sketch



Whether the client designs the website internally or we do it ourselves, we train them beforehand on the specific limitations of the email marketing sector so that they can understand the specific needs of the layout. When the design is provided by the client, this training is more exhaustive, since designers, who are normally used to web requirements, are not usually aware of the problems we face in correctly displaying a design in the different email clients.
2. Fluid dialogue between the design team and the layout designers at Digital Response.
In order to build a consistent and flexible template, it is essential to maintain fluid communication with the team in charge of the design. The main reason is the one we mentioned in the previous point: the possibilities of web design are not comparable to those of email. It is well known that there is a lack of understanding between the limitless imagination of designers and the technical requirements of web programmers. Well, in the case of email, the requirements and limitations multiply exponentially, so we do not seek to limit, but to direct this creativity according to the needs of the email and find the meeting point between creativity and the functionality of the design. It is also important in this phase to correctly and exhaustively define the structural needs, in order to define the modules that we must layout.
3. Modular layout.
This is where the versatility of templates and the true secret of their reliability lies. Responsive email layout is very delicate, and subsequent editing by the client is especially dangerous. It is not enough to have knowledge of HTML/CSS layout, since templates are usually full of “hacks” that are difficult to understand for someone who does not layout emails. Tags and classes must be kept intact for correct operation. This may seem to conflict with the flexibility and versatility of templates, but to avoid this, we break down the designs to their most basic elements and create interchangeable modules according to the needs of each specific email. For example, we create modules like the following:

Full width image
Full width text
2 Columns on Desktop – 1 Column on Mobile
4 columns on desktop – 1 on mobile
3 columns on desktop – 1 on mobile
Desktop menu (hidden on mobile)
Mobile menu (hidden on desktop)
Etc.
We will apply the look and feel and graphic standards specified by the client to all of them.
4. Display tests.
Before any delivery to the client, we carry out display tests with Litmus and also with physical devices and different desktop and mobile applications. Once internally checked, we send tests to the client, in case they have different applications or software versions and are able to detect errors that we have not identified in the first phase. After a phase of corrections and repeated tests, we arrive at the final version of the template.
5. Delivery of responsive template + instructions for its adaptation.
Once the template has been configured and tested, we add identifiers to the modules within the CSS template and use these identifiers in the instructions document. We try to make it as exhaustive as possible, without assuming prior knowledge on the part of the template editor. A kind of “Responsive Email for Dummies ”, accessible to anyone who needs to edit the code, since in no case do we recommend editing the template through WYSIWYG editors , which in most cases add or remove elements of the code and end up breaking the template. 6. Monitoring the customer experience Once the template is delivered, we do not consider the job finished, but we make sure that the use of the templates is simple and we offer our support for any questions or problems they may encounter. The job ends when the client handles the template fluently and begins to carry out their responsive email campaigns completely autonomously.