Quick Responsive Email Blast<img class="image" src="{{ Directory }}/{{ imgtest }}"> |
Start with this - ➕
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title> {{ Title }} </title>
<style type="text/css">
.image {width:{{ imgwidth }}%;height:auto;float:{{ float }};margin:8px;}
body {
margin: 0;
}
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: Merienda, 'Times New Roman', serif;
font-style: normal;
font-weight: 400;
}
button{
width:90%;
}
@media screen and (max-width:600px) {
/*styling for objects with screen size less than 600px; */
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: Merienda, 'Times New Roman', serif;
}
table {
/* All tables are 100% width */
width: 100%;
}
.footer {
/* Footer has 2 columns each of 48% width */
height: auto !important;
max-width: 58% !important;
width: 58% !important;
}
table.responsiveImage {
/* Container for images in catalog */
height: auto !important;
max-width: 30% !important;
width: 30% !important;
}
table.responsiveContent {
/* Content that accompanies the content in the catalog */
height: auto !important;
max-width: 66% !important;
width: 66% !important;
}
.top {
/* Each Columnar table in the header */
height: auto !important;
max-width: 48% !important;
width: 48% !important;
}
.catalog {
margin-left: 0%!important;
}
}
@media screen and (max-width:480px) {
.image{width:100%!important;}
/*styling for objects with screen size less than 480px; */
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: Merienda, 'Times New Roman', serif;
}
table {
/* All tables are 100% width */
width: 100% !important;
border-style: none !important;
}
.footer {
/* Each footer column in this case should occupy 96% width and 4% is allowed for email client padding*/
height: auto !important;
max-width: 96% !important;
width: 96% !important;
}
.table.responsiveImage {
/* Container for each image now specifying full width */
height: auto !important;
max-width: 96% !important;
width: 96% !important;
}
.table.responsiveContent {
/* Content in catalog occupying full width of cell */
height: auto !important;
max-width: 96% !important;
width: 96% !important;
}
.top {
/* Header columns occupying full width */
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
.catalog {
margin-left: 0%!important;
}
}
/* CHANGES */
.maintitle{
text-align:center;
font-size: 32px;
font-weight: 300;
line-height: 2.0em;
color: #929292;
font-family: Merienda, 'Times New Roman', serif, sans-serif;
}
.content_p{
font-size: 14px;
font-style: normal;
font-weight: 100;
color: #929292;
line-height: 1.6;
text-align:left;
padding:0px 10px 0px 10px;
font-family:Merienda, 'Times New Roman', serif, sans-serif;
}
.sidebar{
list-style-type: none;
}
.butts{
border-bottom-width: 1px;
border-bottom: 1px solid #777777;
border-top-width: 3px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #777777;
cursor: pointer;
display: block;
list-style-type: none;
margin: 0;
padding-left: 10px;
padding: 10px 0px;
text-decoration: none;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #777777;
color:#888;
text-transform: uppercase;
}
/* /CHANGES */
</style></head>
<body yahoo>
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="600" align="center" cellpadding="0" cellspacing="0" style="background-color: {{ bgcolor }};">
<tbody>
<tr>
<td>
<!-- Edit Below -->
<!-- Edit Below -->
<!-- Edit Below -->
<!-- Edit Above -->
<!-- Edit Above -->
<!-- Edit Above -->
</td>
</tr>
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>
Start with this
Big Graphics
<table align="left" cellpadding="0" cellspacing="0" >
<tr>
<td ><img src="{{ Directory }}/{{ HeaderGraphic }}" alt="" height="" width="100%" class="" /></td>
</tr>
</table>
<!-- /Header graphic that goes 100% -->
➕
</td></tr><tr><td>
<!-- Hero graphic that goes 100% -->
<table align="left" cellpadding="0" cellspacing="0" >
<tr>
<td ><img src="{{ Directory }}/{{ HeroGraphic }}" alt="" height="" width="100%" class="" /></td>
</tr>
</table>
<!-- /Hero graphic that goes 100% -->
Big Graphics
Horizontal Space - ➕
</td>
</tr>
<tr><td> </td></tr>
<tr bgcolor="transparent">
<td>
<!-- /HTML Spacer row -->
Horizontal Space
Wide Text - ➕
<table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<!-- Style Title Text -->
<td class="maintitle">{{ Title }}</td>
</tr>
<tr>
<!-- Style Paragraph Text -->
<td class="content_p">
<p class="content_p">This is the {{ Title }} page and you are looking at filler Text. It will be replaced when content is received. Duis {{ Text }}interdum egestas ante et imperdiet. Cras felis odio, pretium et ac, dapibus eu velit. Pellentesque vehicula porta scelerisque. Vivamus nec ligula est. Suspendisse Template ac consequat leo.</P>
</td>
</tr>
</table>
<!-- /Wide Text Area -->
Wide Text
Two Columns With Nav - ➕
<table bgcolor="transparent" width="48%" align="left" cellpadding="0" cellspacing="0" class="top content_p">
<tbody>
<tr>
<td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #929292; line-height: 1.4; text-align:justify; padding:0px 20px 0px 20px; font-family:Merienda, 'Times New Roman', serif, sans-serif;">
<h2>{{ Title }}</h2>
<p class="content_p">Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. The rset can be a toatl mses and you, can sitll raed it wouthit porbelm. Tihs is bcuseae we do not raed ervey lteter by itslef but the wrod as a wlohe.</p>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#eee" class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="line-height:14px;padding:10px 40px 10px 0px; text-align:left">
<tbody>
<tr>
<td style="font-size: 12px; color:#929292; text-align:left; font-family: Merienda, 'Times New Roman', serif, sans-serif;">
<!-- LINKS -->
<ul style="list-style-type: none;" class="sidebar">
<li><a class="butts"><strong> ➤ Visit Us on the Web </strong></a></li>
<li><a href="#" class="butts"> BUTTON A »</a></li>
<li><a href="#" class="butts"> BUTTON B »</a></li>
<li><a href="#" class="butts"> BUTTON C »</a></li>
<li><a href="#" class="butts"> BUTTON D »</a></li>
<li><a href="#" class="butts last"> BUTTON E »</a></li>
</ul>
<!-- /LINKS -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
</td></tr><tr><td>
<!-- /two column with Navbar -->
Two Columns With Nav
Two With Text - ➕
<table border=0 bgcolor="transparent" class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="line-height:14px;padding:10px 5px 10px 5px;float:left">
<tbody>
<tr>
<td align="left" class="content_p">
<h2>My Switch</h2>
<p class="content_p">Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. The rset can be a toatl mses and you, can sitll raed it wouthit porbelm. Tihs is bcuseae we do not raed ervey lteter by itslef but the wrod as a wlohe.</p>
</td>
</tr>
</tbody>
</table>
<table border=0 bgcolor="transparent" class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="line-height:14px;padding:10px 5px 10px 5px;;float:left">
<tbody>
<tr>
<td align="left" class="content_p">
<h2>My Switch2</h2>
<p class="content_p">Aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae. The rset can be a toatl mses and you, can sitll raed it wouthit porbelm. Tihs is bcuseae we do not raed ervey lteter by itslef but the wrod as a wlohe.</p>
</td>
</tr>
</tbody>
</table>
<!-- /two columns with text -->
Two With Text
Footer - ➕
<table width="96%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="content_p"> <p style="text-align:center"> Can't see this important message? Click <a style="text-decoration: none; color: #000066" href="{{ Directory }}/index.html">HERE</a>.</p> </td>
</tr>
</table>
</td></tr><tr><td>
<!-- /Footer -->
Footer
Clean Up
1. Dirty Markup - make sure your Code is good
2. Remove Extra Spaces
3. Remove Empty Lines
4. Mailchimp Inliner Tool