Basic Responsive Email Template
A nice clean email template in basic white and grey with blue button.
Copy and paste this into your email editor. Look at this article discussing how to configure XMS Systems Email
<title>XMS Systems Email Template</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width">
<style type="text/css">/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
/* MOBILE STYLES */
@media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"]{
width:100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
td[class="logo"]{
text-align: left;
padding: 10px 0 10px 0 !important;
}
td[class="logo"] img{
margin:0 auto!important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"]{
display:none;}
img[class="mobile-hide"]{
display: none !important;
}
img[class="img-max"]{
max-width: 100% !important;
height:auto !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"]{
width:100%!important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="padding"]{
padding: 10px 5% 15px 5% !important;
}
td[class="padding-copy"]{
padding: 10px 5% 10px 5% !important;
text-align: left;
}
td[class="padding-meta"]{
padding: 10px 5% 0px 5% !important;
text-align: left;
}
td[class="no-pad"]{
padding: 0 0 20px 0 !important;
}
td[class="no-padding"]{
padding: 0 !important;
}
td[class="section-padding"]{
padding: 10px 5px 10px 5px !important;
}
td[class="section-padding-bottom-image"]{
padding: 10px 5px 0 5px !important;
}
/* ADJUST BUTTONS ON MOBILE */
td[class="mobile-wrapper"]{
padding: 10px 5% 15px 5% !important;
}
table[class="mobile-button-container"]{
margin:0 auto;
width:100% !important;
}
a[class="mobile-button"]{
width:80% !important;
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
}
}
</style>
<!-- HEADER --><!-- ONE COLUMN SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" class="section-padding" style="padding: 30px 5px 30px 5px;">
<table border="0" cellpadding="0" cellspacing="0" class="responsive-table" width="660">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><!-- Company IMAGE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="padding-copy">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img alt="{c_company}" class="img-max" src="http://vanilla.xms-systems.co.uk/news_letter/files/xms_mail_logo.png" style="display: block; padding: 0px; color: rgb(102, 102, 102); text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; border-width: 0px; border-style: solid; width: 660px; height: 93px;" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><!-- COPY -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="padding-copy" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;">Welcome to our Community</td>
</tr>
<tr>
<td align="left" class="padding-copy" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;">
<p>You received this message because you registered to our website. Welcome to our community.</p>
<p>Your login information is:<br />
Username: <strong>{kt_login_user}</strong><br />
Password: <strong>{kt_login_password}</strong></p>
<p>To log in to our website, click on the following link:<br />
<a href="{kt_login_page}" target="_blank">{kt_login_page}</a></p>
<p>{Company Contact}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><!-- BULLETPROOF BUTTON -->
<table border="0" cellpadding="0" cellspacing="0" class="mobile-button-container" width="100%">
<tbody>
<tr>
<td align="center" class="padding-copy" style="padding: 25px 0 0 0;">
<table border="0" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td align="center"><a class="mobile-button" href="{kt_login_page}" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Login to our Website ⇨</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding: 20px 0px 20px 0px;"><!-- UNSUBSCRIBE COPY -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="responsive-table" width="500">
<tbody>
<tr>
<td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;" valign="middle">{Company Name | Website address}<br />
You are receiving this email because you are a current subscriber<br />
or have bought from us in the past.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>