Overview
In today’s world email plays a vital role in any business. Starting from a welcome email to subscription email and others. All these emails are made from email templates which can be easily available or self made.
Email templates either have a simple layout or columnar layout or combination of both. Let’s look at how to make one.
Simple layout
Here is the simple example with responsive
Code:-
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td style="font-size: 24px; line-height: 31px; color:#fff; font-weight: 700; text-align: center; font-family: 'Open Sans', sans-serif;">Explore responsive email templates</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="font-size: 18px; line-height: 25px; color:#fff; font-weight: 300; text-align: center; font-family: 'Open Sans', sans-serif;">Available on GitHub and CodePen</td>
</tr>
<tr><td height="24"></td></tr>
<tr>
<td>
<img style="width: 100%; max-width: 100%;" src="http://webprojects.cloud/email/email-imgs/konsav-hero-img.png" alt="banner image">
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td>
<p style="font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 27px; color: #fff; font-weight: 300; text-align: center;">More than 50% of total email opens occurred on a mobile device — a mobile-friendly design is a must for email campaigns.</p>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td align="center">
<a href="#" style="padding: 12px 24px; border-radius: 4px; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 20px; font-weight: 500; color: #fff; background-color: #0B5073;">Explore templates</a>
</td>
</tr>
<tr><td height="35"></td></tr>
</table>Output:-
2 column layout
Here is the example of 2 column section with responsive
Code:-
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tr><td height="35"></td></tr>
<tr>
<td align="center" valign="top" style="font-size:0;">
<!-- Listing Section Start -->
<div style="padding:20px; box-sizing: border-box; display:inline-block; width:50%; max-width:600px; vertical-align:top;" class="wrapper">
<img src="http://webprojects.cloud/email/email-imgs/konsav-grid-item.png" width="100%" style="display: block;" alt="Fluid images" border="0" />
<a href="#" target="_blank" style="margin-top: 10px; display: block; font-size: 17px; line-height: 27px; color: #0B5073; font-weight: 700; font-family: 'Open Sans', sans-serif;">General template</a>
<p style="margin: 0px; font-size: 17px; line-height: 27px; color: #000000; font-weight: 400; font-family: 'Open Sans', sans-serif;">The perfect choice for any purpose of a message.</p>
</div>
<div style="padding:20px; box-sizing: border-box; display:inline-block; width:50%; max-width:600px; vertical-align:top;" class="wrapper">
<img src="http://webprojects.cloud/email/email-imgs/konsav-grid-item.png" width="100%" style="display: block;" alt="Fluid images" border="0" />
<a href="#" target="_blank" style="margin-top: 10px; display: block; font-size: 17px; line-height: 27px; color: #0B5073; font-weight: 700; font-family: 'Open Sans', sans-serif;">General template</a>
<p style="margin: 0px; font-size: 17px; line-height: 27px; color: #000000; font-weight: 400; font-family: 'Open Sans', sans-serif;">The perfect choice for any purpose of a message.</p>
</div>
</td>
</tr>
<tr><td height="30"></td></tr>
<tr>
<td align="center">
<a href="#" style="padding: 12px 24px; border-radius: 4px; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 20px; font-weight: 500; color: #fff; background-color: #127DB3;">Explore templates</a>
</td>
</tr>
<tr><td height="35"></td></tr>
</table>Output:-
The above screenshot of Desktop View
The above screenshot of Desktop View
This is for mobile responsive which wrap the section
@media screen and (max-width: 525px){
.wrapper { display: block !important; width: 100% !important; text-align: center !important; }
.table-responsive { display: block !important; width: 100% !important; }
}
Internal vs inline css
Many mail editors do not accept internal css, so that’s the reason we prefer to apply inline css so that most mail client(s) will support & will look perfect. The below one is the best example of it.
Supporting style which allows all browsers here’s some reference will be useful to us,
https://www.caniemail.com/
https://www.campaignmonitor.com/css/
Conditions use for Microsoft outlook
Windows Outlook 2003 and higher uses Microsoft Word as a rendering engine, which can lead to some strange rendering problems. Outlook conditional comments allow us to add bits of HTML that can only be read by Word-based versions of Outlook.
Why Condition?
– Condition for outlook is for using mail exact view as compared to other mails which shows the simliar view of real view. Outlook does not support many of css property and that is the reason why MSO Code (Microsoft Office) help to look like that view
Here is the code to apply after
Target Outlook 2007 and up
<! — [if mso]>
<style type=”text/css”>
/*Your styles here*/</style>
<![endif] -->
Target Outlook 2000, 2002, & 2003
<! — [if IE]>
<style type=”text/css”>
/*Your styles here*/</style>
<![endif] -->Target all Outlook versions
<! — [if (gte mso 9) | (IE)]>
<style type=”text/css”>
/*Your styles here*/</style>
<![endif] -->Other versions
<! — [if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
[endif] -->Here is some references to test your mail template to check out their view,
https://www.litmus.com/
https://outlook.live.com/owa/
Full email template sample example
Conclusion
I hope that this blog might be useful to write new mail templates in your code. In the future we will write more blogs on new email templates.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
