Newsletter Layout:
The Newsletter Layout is the foundation of your custom newsletter design. It defines the static parts of your newsletter that do not change from one edition to another, including the overall CSS styling and the layout's header and footer. This is crucial for maintaining a consistent look and feel across all your newsletters.
There are 3 sections to the newsletter layout
CSS Override - Do not include style tags or other HTML.
This CSS will control the overall appearance of your newsletters, including fonts, colors, and spacing. Use this as a general blanket styling of the newsletter as inline CSS is still recommended.
Layout Header - Do not include <head>, <html>, or <body> tags.
This is where you add any consistent elements that appear at the top of every newsletter, such as your company logo or a navigation bar.Layout Footer - Do not include <head>, <html>, or <body> tags.
Similar to the header, the footer provides a space for adding items like contact information, copyright notices, and unsubscribe links that will appear at the bottom of every newsletter.
The newsletter layout will wrap all Newsletter code so please account for that when coding the Header and Footer.
*Important*
If the layout is set to the "default" layout - the layout will wrap all Peoplevine system emails so it must be compatible with our default newsletters.
For example, the Verify Email newsletter is a Peoplevine system email that cannot be edited or overridden - this is an example code snippet that all Peoplevine system emails follow to use during your development and testing.
<table align="center" border="0" cellpadding="0" style="margin: 0 auto;max-width: 600px;table-layout: fixed;border-collapse: collapse;word-break: break-word;">
<tbody>
<tr>
<td align="center" style="padding-left: 20px; padding-right: 20px;">
<table align="center" border="0" cellpadding="0" style="margin: 0 auto; max-width: 600px; table-layout:fixed;border-collapse: collapse;word-break: break-word;">
<tr>
<td valign="top" height="20" align="left" style="height:20px;"></td>
</tr>
<tr>
<td valign="top">
<h2>Example Title</h2>
<p style="margin: 20px auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</td>
</tr>
<tr>√
<td valign="top" align="center">
<a href="#" style="border-radius: 4px; margin: 20px auto; display: inline-block; font-weight: bold; text-align: center; text-decoration: none !important; color: #fff; background-color: #202123; font-family: sans-serif; font-size: 14px; line-height: 24px; padding: 12px 35px"
target="_blank">CTA</a>
</td>
</tr>
<tr>
<td valign="top" align="left">
<p style="margin: 20px auto; font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
<tr>
<td valign="top" height="20" align="left" style="height:20px;"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Creating a Newsletter
Once you have created a newsletter, you're ready to create the newsletter. Make sure the newsletter you are creating is using the Newsletter Layout you created first.
There are 2 sections to the newsletter code
Newsletter HTML
Simply copy and paste the HTML provided by your designer to use your own newsletter. Note that the newsletter layout chosen will wrap this HTML code.
Newsletter CSS
This will automatically include the CSS as part of the rendered e-mail. This will work in conjunction with the CSS set on the newsletter layout.
Best Practices: Design
There are a few things to keep in mind when designing HTML email campaigns.
Emails should be 600-800 pixels maximum width.
Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
Don’t design an email that’s essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.
Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
Best Practices: Development
Much like with design, there are best practices to follow when coding HTML email.
Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
Inline all CSS before sending.
Use only absolute links for images, and host those images on a reliable server.
Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
Test, test, test. Create email accounts across various services, and send emails to yourself.
Want Peoplevine to custom-code your newsletter design?
Peoplevine can custom-build your newsletter design pending availability.
We ask that all designs be submitted as a Figma design and follow the above best practices. In the design, please clearly mark the elements: images, text, buttons, etc.
Our developers will review the design and provide any feedback about any limitations the design may pose.
If you would like to see an example design file, please view it here or see the screenshot below.
FAQ
Can I use my custom font?
Yes, however, it is not recommended as most email clients do not support custom fonts. It is recommended that you pick an email/web-safe font
Arial
Courier New
Georgia
Lucida Sans Unicode
Tahoma
Times New Roman
Trebuchet MS
Verdana
Why does my email look different/broken on a particular email provider?
This is because all email clients render code differently. We recommend you thoroughly test the popular email providers and across devices
Gmail
Outlook
Apple Mail
IOS/Windows
Why does my external link not work?
Peoplevine has a spam filter on newsletters to avoid any spam links. If you are linking to an external page, please make sure it is the simplest URL that can work meaning if there is a URL query string to remove it if possible