¶ PVYmailr | Create and manage your mail templates
¶ Introduction
The main characteristic of any niceley done Mail-Template shall fullfill following points:
- Responsive by design
- Renders its content on all mail clients correctly and does not break the design (especially on the old fashioned Microsoft Outlook Client)
- Support the Users Dark or Light Theme Setup, so mail shall look nice if system is set to dark mode as well if set to light mode
- Publisher can quicky create a new campaign out of it
- Doesn’t stuck in any Spam Content Filter
¶ Features of the Template Manager
The Template Manager looks pretty simple and is reduced to the minimum. Content for the Template has to be created in HTML and you can classify it for in use for:
- Campaigns
- Transactional
- Archives
¶ Example Newsletter Templates
The example shows a successfully made email campaign for the Brand “Bluett” who is techology-wise and market- wise the Nr. 1 Brand for Power Stations world wide.
The Template itself looks in a raw html code like this:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<base target="_blank">
<style rel="stylesheet" type="text/css">
body {
background-color: #eef0f6;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
font-size: 15px;
line-height: 26px;
margin: 0;
color: #444;
}
pre {
background: #f4f4f4;
padding: 2px;
}
hr {
margin: 13px 0 13px 0;
border: 0;
border-top: 1px solid #efefef;
height: 0px;
}
hr.color {
border-top: 1px solid #0060ac;
}
p {
margin: 0 0 13px 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 26px 0 10px 0;
line-height: 26px;
}
h1 {
font-size: 22px;
color: #0060ac;
}
h2 {
font-size: 20px;
}
h2.p1 {
margin-top: 38px;
}
h3 {
font-size: 18px
}
h4, h5, h6 {
margin: 13px 0 5px 0;
font-size: 15px;
}
.blue {
color: #0060ac;
}
table {
width: 100%;
border: 1px solid #ddd;
}
table td {
border-color: #ddd;
padding: 5px;
}
.wrap {
background-color: #fff;
padding: 30px;
max-width: 525px;
margin: 0 auto;
border-radius: 5px;
}
.wrap img {
border-radius: 5px
}
.wrap a {
color: #0060ac;
text-decoration: none;
}
.wrap a:hover {
color: #5688b9;
text-decoration: underline;
}
.button {
background: #0060ac;
border-radius: 8px !important;
text-decoration: none !important;
color: #fff !important;
font-weight: bold;
padding: 6px 26px;
display: inline-block;
border: 2px solid #0060ac;
}
.button:hover {
background: #ffffff;
color: #0060ac !important;
}
.note {
border: 2px solid #0060ac;
border-radius: 8px !important;
padding: 8px;
background: #d2e9f8;
}
.adress {
background-color: #0060ac;
padding: 30px;
color: #fff;
}
.footer {
text-align: center;
font-size: 12px;
color: #888;
}
.footer a {
color: #888;
text-decoration: underline;
}
.footer a:hover {
color: #1b1b1b;
}
.gutter {
padding: 30px;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #0060ac;
text-decoration: none;
}
a:hover {
color: #5688b9;
text-decoration: underline;
}
ul {
padding: 0;
}
ul ul {
padding-left: 15px;
}
li {
margin-left: 15px;
}
.container {
width:100%;
display:inline-block;
}
.spalte {
width:100%;
padding: 5px;
display:inline-block;
vertical-align: top;
}
@media screen and (max-width: 600px) {
.wrap {
max-width: auto;
}
.
.gutter {
padding: 15px !important;
}
.gutter.mobile {
display: none;
}
body {
background-color: #fff !important;
}
}
@media only screen and (max-width: 480px){
.logo {
max-width: 100% !important;
}
.spalte {
width:100%;
}
.spalte img {
max-with:100%;
}
}
@media only screen and (min-width: 481px){
br.mobile {
display: none;
}
}
</style>
</head>
<body style="background-color: #eef0f6;font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;font-size: 15px;line-height: 26px;margin: 0;color: #444;">
<div class="gutter mobile" style="padding: 15px;"> </div>
<div class="wrap" style="background-color: #fff;padding: 30px;max-width: 525px;margin: 0 auto;border-top-left-radius: 5px;border-top-right-radius: 5px;text-align:right;">
<a href="https://www.bluettipower.ch@TrackLink" title="Besuchen Sie unsere Website"><img class="logo" src="data:image/jpeg;base64,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" alt="Bluetti" width="200" height="50"></a>
</div>
<div class="wrap gutter" style="background-color: #fff;padding: 30px;max-width: 525px;margin: 0 auto;">
{{ template "content" . }}
</div>
<div class="wrap" style="background-color: #fff;padding: 30px;max-width: 525px;margin: 0 auto;;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;">
<hr />
<p style="text-align: left; font-size: 13px;line-height:15px;margin:0;"><strong>Bluetti Schweiz</strong><br class="mobile" /> | Stanserstrasse 109 | 6064 Kerns
<br><a href="tel:+41586000000" title="Rufen Sie uns gerne an" style="color:#2f2f2f;">+41 58 600 00 00 | <a href="https://www.bluettipower.ch@TrackLink" title="Besuchen Sie unsere Website" style="color:#2f2f2f;">bluettipower.ch</a></p>
</div>
<div class="footer" style="text-align: center;font-size: 12px;color: #888;">
<p>
{{ L.T "email.unsubHelp" }}
<a href="{{ UnsubscribeURL }}" style="color: #888;">{{ L.T "email.unsub" }}</a>
</p>
<p>Powered by <a href="https://www.pvy.swiss@TrackLink" target="_blank" style="color: #888;">PVYmailr</a></p>
</div>
<div class="gutter" style="padding: 30px;"> {{ TrackView }}</div>
</body>
</html>
and when you start to use the Template empty for new newsletter it looks like an empty canvas/editor to add your content:
¶ Transactional Template
The difference between Newsletter Template and transactional mail templates relays in the nature of purpose. Transactional can be used with external variables, such as shipping / delivery and tracking informations for orders, without the need that the Customer is part of any List within the system.
It can be further used, in combination with a newsletter campaign, which leads the contact to targeted landing page or existing website, where he filles a request for a white paper for example, and being then feeded with the transactional mail as follow up.
It is also possible, to trigger a transaction mail within a link interaction in the sent out newsletter itself. However, sending to much transactional mails to your audience can also lead to receive more often a unsubscribe. But there are nice and use full examples, widely accepted by receivers such as:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<base target="_blank">
<style>
body {
background-color: #F0F1F3;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
font-size: 15px;
line-height: 26px;
margin: 0;
color: #444;
}
pre {
background: #f4f4f4f4;
padding: 2px;
}
table {
width: 100%;
border: 1px solid #ddd;
}
table td {
border-color: #ddd;
padding: 5px;
}
.wrap {
background-color: #fff;
padding: 30px;
max-width: 525px;
margin: 0 auto;
border-radius: 5px;
}
.button {
background: #0055d4;
border-radius: 3px;
text-decoration: none !important;
color: #fff !important;
font-weight: bold;
padding: 10px 30px;
display: inline-block;
}
.button:hover {
background: #111;
}
.footer {
text-align: center;
font-size: 12px;
color: #888;
}
.footer a {
color: #888;
margin-right: 5px;
}
.gutter {
padding: 30px;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #0055d4;
}
a:hover {
color: #111;
}
@media screen and (max-width: 600px) {
.wrap {
max-width: auto;
}
.gutter {
padding: 10px;
}
}
</style>
</head>
<body style="background-color: #F0F1F3;font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;font-size: 15px;line-height: 26px;margin: 0;color: #444;">
<div class="gutter" style="padding: 30px;"> </div>
<div class="wrap" style="background-color: #fff;padding: 30px;max-width: 525px;margin: 0 auto;border-radius: 5px;">
<p>Hello {{ .Subscriber.Name }}</p>
<p>
<strong>Order number: </strong> {{ .Tx.Data.order_id }}<br />
<strong>Shipping date: </strong> {{ .Tx.Data.shipping_date }}<br />
</p>
<br />
<p>
Transactional templates supports arbitrary parameters.
Render them using <code>.Tx.Data.YourParamName</code>. For more information,
see the transactional mailing <a href="https://docs.pvy.swiss/quickstart/overview/pvymailr/transactional">documentation</a>.
</p>
</div>
<div class="footer" style="text-align: center;font-size: 12px;color: #888;">
<p>{{ L.T "public.poweredBy" }} <a href="https://pvy.swiss" target="_blank" rel="noreferrer" style="color: #888;">PVYmailr</a></p>
</div>
</body>
</html>
Which looks then:
¶ One example, using arbitrary data
- Newsletter offers free consulting on certain topic
- Link leads to a certain area of a web page, target downloads a white paper
- Transactional email follows up, send him the PVYcal link of a consultant where he straight can book an appointment based on availability.
¶ Format (Raw HTML)
Templates supports only raw html with css references. For a good reason. Only if you code the templates, you want to use on a regulary frequency within your audience, ensures, that they look exactly the same on all fancy email clients and webmail inboxes.
All these Drag & Drop Editors, where you can place certain elements, creates not only unnessesary divs, they cause also inconsisty, and being rendered different on several tested clients. And we tested a lot by our self, all the usual suspects available on the market. All failed.
The Number One Problem Client out there, and anybody who is familiar with email-marketing and templating, will confirm that, is Microsoft Outlook 2013 - 2022.
One tech guy once stated, using Microsoft Products nowadays is like if you want to drive with a Ford one from 1927 from Dallas to Denver. You probably reach, but question is how… However the facts are, it is unfortunally still be used on wide spread, so we have to take that in consideration and always build some extras in code, to feed the render engine from Microsoft Outlook properly.
Once the template works, on campaign design editor you have the following options to create your content, as body:
- Rich text (most commonly used)
- Raw HTML (may used from external Design tool)
- MarkDown
- PlainText
with a rich WYSIWYG Editor, which allows you to insert all kind of stuff.
¶ Spam Score Testing
To pass all Content Filter on ISP Level, and also Spam Filters on Mailserver itself, there are certain rules and criterias to match.
One of the most common thing nowadays in Europe and Switzerland, is to bei DSGVO/GDPR Compliant. Not primary for the user data itself in this case, but modern systems on ISP Level monitor Opt-In Request, and if an Opt-in Request is missing for a particular sender you get blocked to all email addresses to this Provider. And of course, its possible to unblock, but its hard work.
¶ The Easy Way
There are certain free and excellent Mailbox / Newsletter Content available, where you can send, and you should to that before you go on “Air” with a campaign, to get a score, and recommendations, what has to be changed in content, to reach a high delivery rate into the Inbox Folder of your Subscribers, rather than to the Spam Folder itself.
Before you head over to test your first templates in a small audience tester-list on PVY, please ensure you have also set DMARC proper in your DNS, according to manual.
¶ MX Toolbox
MXTOOLBOX in general, offers various great tools to test and inspect things.
One thing you should consider is, to analyze the email header itself:
https://mxtoolbox.com/EmailHeaders.aspx
¶ Mail Tester
Reachable under https://mail-tester.com, you get a destination inbox email adress, which you add (and change on each new Test) to your PVYmailr Testlist. After you sent it, you will get a nice summary overview and also instructions, what, if anything should be improved.
So, even we receive in the test the best possible Score, 10 out of 10, we get some recommendation to improve the content of the message.
The most commonly made mistakes is, that if you inser a Link or an Image in Content, you forgotten to add an “Alt” Description" for it, which is mandatory in a ideal and professional world.
When everything is green, you are good to go.
¶ Pay attention to the mail subject
There are different content filter and spam filters from different vendors and each treats the scoring of mail a bit different. Mail subject shall be meaningful, without any special characters and not to long.