Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Anchor
Preparing the template
Preparing the template
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.


Anchor
Specific HTML markup
Specific HTML markup
100 Web To Email A Complete Walkthrough

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

Anchor
Creating a ZIP file for upload
Creating a ZIP file for upload
100 Web To Email A Complete Walkthrough

Once set up, the HTML files and image files are zipped and ready to upload.


Anchor
Creating a Wedia email template
Creating a Wedia email template
100 Web To Email A Complete Walkthrough

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.


Anchor
Working with the holiday e-card
Working with the holiday e-card
100 Web To Email A Complete Walkthrough

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

Anchor
Text editing
Text editing
100 Web To Email A Complete Walkthrough

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

Anchor
Removing blocks
Removing blocks
100 Web To Email A Complete Walkthrough

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

Wedia integrates a link editor that allows the editing of social media target destinations.

Figure 13. Editing link for social media destinations

Anchor
Previewing the email
Previewing the email
100 Web To Email A Complete Walkthrough

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

Anchor
Connection with an Email Service Provider (ESP)
Connection with an Email Service Provider (ESP)
100 Web To Email A Complete Walkthrough

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