Description of an emailing template
An emailing template is a compressed file (in zip format) having like extension .htmlzip.
...
an HTML file,
image files (optional).
The file tree is free.
HTML file structure
To be used in the Wedia editor, the HTML file structure of the template must be valid. In order to guarantee the readability of the e-mails in the different e-mail programs, it is important to respect the rules prescribed by the supplier through which the mails will be send to the users.
There is a very useful site to validate and correct templates emails or at least alert you to bad practices and who you are will limit the problems to exploitation: http://premailer.dialect.ca/
Use of CSS in the HTML file of the template
Although very [.label-danger]# strongly discouraged#, the use of CSS style sheets is nevertheless possible under certain conditions. Make sure that your email provider will be able to manage them and eventually retranscribe them for HTML readers that do not manage CSS.
...
It is strongly discouraged to bind external sheets. Prefer the inclusion of CSS class definitions in a <style> tag in the <head> element of the HTML template to ensure a better compatibility.
Note
Since version 10.5.0 WEDIA WXM no longer transforms CSS styles in inline styles in the export files in order to avoid the modifying of the email behavior. It is therefore important to inquire with the email broker in order to know what it recommends in the case of CSS use and whether it realizes itself this transformation at the time of sending emails.
More generally, it is important to know good practices and rules of use for style sheets according to customers targeted email, there are excellent articles on blogs and support pages:
litmus and mailchimp just to name a few, to get some ideas of the state of the art on the subject.
Templates responsive design
The responsive design templates rely on CSS support in emails. To use them it is therefore necessary to be sure that the end user who will read the email is able to read it correctly. To date many email readers do not support CSS or only partially; so these readers will not display a responsive email from in the correct way. At the mobile phone level only a few support officially responsive design emails:
...
Source: https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic)
Definition of an editing area
In a template it is possible to edit the content in several ways:
...
The attribute data-wxm-editor-zone allows to declare to the WXM engine that the element can receive edition information either for the live user, or automatic (made by the engine). The edition information is described by the other attributes detailed below.
Text editing
To offer users the ability to edit text via the email editor it will be advisable to add the attribute data-wxm-editor-zone-editable="true" on HTML elements that you want to make editable.
...
The attribute can be placed on any element HTML DIV, TD, P, SPAN, H2, etc… However, it is recommended to place this attribute on an HTML block element such as DIV or TD; indeed these elements are likely to receive in their breasts any other HTML elements that could be added by the user, which cannot be done in a P or SPAN element for example.
Define styles for editing
It is possible to define lists of styles that can be proposed users when editing content via the WYSIWYG editor. The list of styles must be defined in the data-wxm-editor-zone-styles attribute according to the styles present in the email.
...
| Info |
|---|
As far as possible, always prefer the declaration of the element in the styles declaration in order to best control the HTML generated by the publisher. Note: before the 10.5.0 version of the engine, style names cannot contain capital letters. |
Drag and Drop content
By default all output fields with the attribute data-wxm-editor-zone-editable="true" can be candidates to receive content from the Content Management tabs by drag and drop.
...
When dragging and dropping the editor will attach the HTML element to the dropped content on the latter. So if the content is subsequently modified outside the editor the email will be updated with the new values of this content.
Drag and Drop structured content
It is possible to upload structured content that updates several HTML elements in a single removal. For example, we can update with a single gesture the title, one or more images, one or more texts in depositing content directly in its reception area.
...
| Code Block |
|---|
<div>
<h3 data-wxm-editor-zone data-wxm-editor-zone-editable="true" data-wxm-editor-zone-group="article1" data-wxm-editor-zone-refkey="wxm-gc-articles-article-title">Title of the content</h3>
<img data-wxm-editor-zone data-wxm-editor-zone-editable="true" data-wxm-editor-zone-group="article1" data-wxm-editor-zone-refkey="wxm-gc-articles-article-image" src="/image/..." />
<p data-wxm-editor-zone data-wxm-editor-zone-editable="true" data-wxm-editor-zone-group="article1" data-wxm-editor-zone-refkey="wxm-gc-articles-article-intro">Article introduction</p>
<div data-wxm-editor-zone data-wxm-editor-zone-editable="true" data-wxm-editor-zone-group="article1" data-wxm-editor-zone-refkey="wxm-gc-articles-article-html">
Text of the article
</div>
</div> |
Association of HTML elements to contents in the system
When WXM content is dropped on an email the WXM application links the HTML element to a property of that content object. In the case of structured content the relationship is given through the key in the content repository, if not by the nature of the object and the receptacle (image or text).
...
| Note |
|---|
These attributes are automatically set by the application. To ensure the proper functioning of the functionality they must not be altered. |
Important notes regarding the placement editing areas
The editing areas can be placed on almost any HTML element. However, there are still a few exceptions and you will not be able to define an editing area on the following HTML tags:
...
| Warning |
|---|
Be careful not to nest editable areas between them! |
Attribute editing
From version 10.5.1 it is possible to modify the attributes HTML elements located outside the standard output fields. The attribute editing allows for example to leave the possibility to the user to change the URL of a link.
In order to activate this feature it is necessary to set an attribute on the element (data-wxm-editor-zone) and list the attributes in a data-wxm-editor-zone-editable-atts attribute the attributes one wants to make it editable by the end user.
...
If more than one HTML element has this attribute output information are nested and the user clicks on the lowest element (in the DOM) then the edit window will allow him to edit all the attributes of all elements by placing each different HTML element in an editing tab.
Definition of structural change fields
It is possible to define zones that will allow users to duplicate/delete content blocks or move them between them.
Repeatable blocks
Repeatable blocks allow the user to duplicate areas of or delete them. To do this there is an attribute that allows to declare the blocks as repeatable, these are the attribute data-wxm-editor-repeatable.
If it is true then when the user selects the block with the appropriate tool a menu will allow him to duplicate or delete this block.
...
In case of duplication the copy of the block will be inserted just after the copied block in the DOM. If there are editing fields in the copy and they are linked to a content then they will be detached from these contents (the data-wxm-binder-objtype, data-wxm-binder-objid attributes and data-wxm-binder-path will be emptied).
Movable blocks
Movable blocks allow the user to reschedule content areas between them. To do this there is an attribute that allows to declare the blocks as movable, it is a question of the data-wxm-editor-movable attribute.
If it is true then when the user "grabs" with his mouse the block after selecting the moving tool in the menu it will be able to move the block before or after its direct brother elements.
| Code Block |
|---|
<table border="0" width="100%" data-wxm-editor-zone data-wxm-editor-zone-movable="true">...</table> |
Important note
Analysis functions for email opening, clicked link analysis and hosting of embedded resources are dependent on the mail router. The router has an action to rewrite links and path to resources to allow a follow-up of the actions of the recipients and the distribution of the images, specific to its technology. The WEDIA CrossMedia platform does not provide no default transformation of links and resources.
Similarly, email customization actions for example to insert the name of the recipient or to condition the display of a block of content in of the recipient’s segment in the body of the email are also the same functions provided by the mail router. The exploitation of these functionalities directly in the newsletter editor is not expected at this stage.
Image size management
When drag/drop image type content within an email the editor will replace the src attribute of the corresponding HTML image element with the new image source.
...
by defining automatic resizing rules
by letting the user define himself the sizes to use
by creating an image variation respecting the constraints given in the email
Definition of automatic resizing rules
To allow the email reader to intelligently resize the image without distorting it one will proscribe in the model of email the use of the attributes width and height on img elements (as well as in the style).
...
| Code Block |
|---|
<img src="/'xxx.jpg'" style='max-width:200px;max-height:200px' /> |
Leave the user modify the width/height attributes
In order to allow the user to set the width and height so that it can adapt them to the image it is enough to make these attributes can be modified via the editor.
...
In our case it will be enough to set the value of the height attribute to 150px so that the image is no longer distorted.
Modify the image so that it respects the constraints of the model
| Note |
|---|
This method requires the rendition tool to be enabled on the WXM image content object (default galleryelement). |
...