100 Web To Email A Complete Walkthrough

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