Argyle frequently works with well designed, perfectly branded newsletters. However, email clients like Gmail, Outlook (ooooohhhhh Outlook….) and Apple Mail all render emails differently. What are we to do then to display nice fonts? Consistent padding? Background images?
Our simple solution – make it all images stacked right up on top of each other! Below are some videos explaining how to create image based emails in a variety of clients. If an Email Service Provider is not listed below, don’t worry. These steps should be fairly consistent between each platform!
How to create an image based email in MailChimp #
This video guide walks you through how to create an image based email in MailChimp, so that a well designed and perfectly branded email campaign renders consistently across all email clients.
NEW: Watch the tutorial
- 00:00– 0:12 — Intro
- 00:12– 2:04 — The Email Briefing
- 02:04– 4:14 — Uploading and Setup in Mailchimp
- 04:14– 5:46 — Create/Replicate Campaign
- 05:46– 7:52 — The Problem with Mailchimp Image Blocks
- 07:52– 9:37 — Relinking Images Solution Explained
- 09:37– 14:17 — Relinking Images and Alt Text Example
- 14:17– 15:42 — Sending Test Email for Approval
- 15:42– 18:20 — Scheduling Email
- 18:20– 19:55 — Conclusion
Please take a look at specific marketing specs and requirements for available clients here as needed!
https://argyleinteractive.com/docs-category/client-documentation
Code blocks to use in MailChimp #
The below is an HTML code block for a single column in MailChimp’s email builder. Please note the differences between the New and Old builder (essentially, 660px width vs 600px width)
Single Column layout #
NEW BUILDER
<a href="ADD LINK HERE"><img class="mcnImage" border="0" alt="ADD ALT TEXT HERE" src="ADD IMAGE SOURCE URL" style="max-width: 660px;padding-bottom: 0;display: block !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"></a>OLD BUILDER
<a href="ADD LINK HERE"><img class="mcnImage" border="0" alt="ADD ALT TEXT HERE" src="ADD IMAGE SOURCE URL" style="max-width: 600px;padding-bottom: 0;display: block !important;vertical-align: bottom;border: 0;height: auto;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"></a>Split Column layout #
The below is an HTML code block for a split column in MailChimp’s email builder. Please note the differences between the New and Old builder (essentially, 660px width vs 600px width)
NEW BUILDER
<div width="100%">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><a href="ADD LINK HERE" target="_blank"><img alt="ADD ALT TEXT HERE" width="330" style="border:0px; display: block; padding:0px; margin:0px;" src="ADD IMAGE SOURCE URL"></a></td>
<td><a href="ADD LINK HERE" target="_blank"><img alt="ADD ALT TEXT HERE" width="330" style="border:0px; display: block; padding:0px; margin:0px;" src="ADD IMAGE SOURCE URL"></a></td>
</tr>
</tbody>
</table>
</div>OLD BUILDER
<div width="100%">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><a href="ADD LINK HERE" target="_blank"><img alt="ADD ALT TEXT HERE" width="300" style="border:0px; display: block; padding:0px; margin:0px;" src="ADD IMAGE SOURCE URL"></a></td>
<td><a href="ADD LINK HERE" target="_blank"><img alt="ADD ALT TEXT HERE" width="300" style="border:0px; display: block; padding:0px; margin:0px;" src="ADD IMAGE SOURCE URL"></a></td>
</tr>
</tbody>
</table>
</div>