Preparing the template
As for print template, Wedia will work as close as possible with the original document template.
In this case, preparing the HTML of the holiday e-cards was just a matter of adding some specific HTML markup to restrict the editing zones and the movable / repeatable zone.
Specific HTML markup
By adding specific HTML attributes, the designer will precisely set up how the emailing editor will react to user inputs.
...
Figure 1. Setting a table cell as editable
Creating a ZIP file for upload
Once set up, the HTML files and image files are zipped and ready to upload.
Creating a Wedia email template
The process for creating a Wedia template is similar to creating a print template.
...
Figure 2. Creating a new email template
...
Figure 3. Uploading the ZIP file of the email template
Once uploaded, the ZIP file is immediately rendered.
An “Analyze” button will help template designers carry out a series of tests to validate the HTML and catch any technical errors.
...
Figure 4. Analyze button
...
Figure 5. Template list
As with print templates, the email template can go through validation workflows.
Working with the holiday e-card
Starting an email will go through the same screens and processes as for print document creation. We’ve designed this workflow to ease user onboarding.
The user will select an email template, based on a preview automatically generated by the system.
...
Figure 6. Selecting an email template
The use will then set the name of the email and the target language.
...
Figure 7. Naming the email and setting the language
Once this first step is completed, the user is guided into the email editor. We developed this email editor to match as closely as possible the print editor.
...
Figure 8. The email editor
Text editing
...
Figure 9. Editing text
The text editing can be done “in place”: just by clicking on the editable zones, the user can directly enter the text.
Formatting options can be set using an advanced editor, with formatting options and advanced functions (such as importing and placing images).
...
Figure 10. Add the signature
...
Figure 11. Email with signature
Removing blocks
If the email designer has properly tagged the template, a click on a removable block will launch a popup window giving options to copy or delete the clicked block.
...
Figure 12. Removing a block
Edit social media link
Wedia integrates a link editor that allows the editing of social media target destinations.
...
Figure 13. Editing link for social media destinations
Previewing the email
The email menu provides a “Preview” option that will show the email in various sizes, helping to test the responsive design behaviors included in the design.
...
Figure 14. Preview the email
...
Figure 15. Previewing on an iPad
Connection with an Email Service Provider (ESP)
Wedia is preparing for the summer 2018 a Wedia version with an integrated ESP. It is currently necessary to connect to an external ESP to send the email campaign. Connecting with an ESP is mostly a matter of technical integration with the ESP APIs. Without any development, Wedia will generate a package that will be directly loaded in most ESPs.
...
Figure 16. Export option for email
In the ESP (the same as we’re using at Wedia, SmartFocus), we can load the exported package.
...
Figure 17. ESP main window
The package is a ZIP file that contains the HTML and the images, converted into an email-friendly format and size.
...
Figure 18. ESP upload message dialog box
...
Figure 19. Message from Wedia ready to be sent