I believe this tutorial will help some web developers/designers who are familiar with modern design trends but haven’t ventured into the field of email designs. It will most likely require a couple of hours of practice before you can nail down a solid coding technique. But in many ways building a newsletter can be easier than building an entire HTML5/CSS3 webpage.
HTML Newsletter Basics
HTML Newsletter Basics
- We need to build the entire HTML template with CSS styles all included inside one file.
- People will be reading your newsletter in e-mail clients such as Microsoft Outlook, Yahoo Mail, Gmail, AOL, Apple Mail, Hotmail and thats why we cant use HTML 5. Because each of these titles run a different rendering engine in some regards.
- Thats why we want to keep our style inline with our HTML elements.
- Since every browser and e-mail software has their own rendering engine, we should definitely use the common elements while building our newsletter, for examples TABLE instead DIV.
HTML Newsletter Design
HTML & CSS Codes
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Newsletter Structure</title>
</head>
<body bgcolor="#99CC33" style="margin:0; padding:0; width:100%; background-color:#99CC33">
<!--Main Table Wrapper-->
<table id="wrapper" width="100%" border="0" cellspacing="0" cellpadding="0" style="height:auto;">
<tr>
<td>
<!--top head links-->
<table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="550" align="center" valign="middle" >
<p style="font-size:11px;color:#fff;font-family:Arial,Tahoma,sans-serif;">We have you currently subscribed to receive our monthly site newsletter.<br>
Is this message too small? <a href="#" target="_blank" style="text-decoration:none"> <span style="color:pink;">Open a copy in your web browser.</span></a><br>
Sick of getting these updates? <a href="#" target="_blank" style="text-decoration:none;"> <span style="color:pink">Unsubscribe now.</span></a>
</p>
</td>
</tr>
</table>
<!--logo and default heading-->
<table width="550" height="96" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><a href="#"><img src="images/gmlogo.png" width="91" height="96" alt="Gokhan Morkoc Logo" title="Gokhan Morkoc Logo"/></a></td>
<td width="380" align="right"><p style="color:pink; font-style:italic; font-size:13px;">The latest articles from Gokhan MORKOC Blog delivered right to your <br>inbox</p></td>
</tr>
</table>
<!--newsletter content area-->
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fff" style="background-color:#fff">
<tr>
<td align="center">
<h1 style="font-size:22px;font-style:italic;font-weight:normal;font-family:Georgia,Times,serif;color:#636363;margin-bottom:2px;">GokhanMorkoc.com Newsletter Sample</h1>
<p style="font-size:12px;line-height:17px;color:#343434;font-family:Georgia,Times,serif;padding:2px 10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.including versions of Lorem Ipsum. <a href="#" target="_blank" style="text-decoration:none"> <span style="color:pink">website homepage</span> </a> to find more recent articles.</p>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="280" height="125" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#CCCCCC">
<tr>
<td width="280" height="125" valign="middle" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="280" height="125" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#CCCCCC">
<tr>
<td width="280" height="125" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--footer-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="550">
<tbody>
<tr>
<td align="center" valign="middle">
<p style="font-size:11px;color:#fff;font-family:Arial,Tahoma,sans-serif;">
Is this message too small? <a href="#" style="text-decoration:none;" target="_blank"><span style="color:#728fd9;">Open a copy in your web browser.</span></a>
<br />
Sick of getting these updates? <a href="#" style="text-decoration:none;" target="_blank"><span style="color:#728fd9;">Unsubscribe now.</span></a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Newsletter Structure</title>
</head>
<body bgcolor="#99CC33" style="margin:0; padding:0; width:100%; background-color:#99CC33">
<!--Main Table Wrapper-->
<table id="wrapper" width="100%" border="0" cellspacing="0" cellpadding="0" style="height:auto;">
<tr>
<td>
<!--top head links-->
<table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="550" align="center" valign="middle" >
<p style="font-size:11px;color:#fff;font-family:Arial,Tahoma,sans-serif;">We have you currently subscribed to receive our monthly site newsletter.<br>
Is this message too small? <a href="#" target="_blank" style="text-decoration:none"> <span style="color:pink;">Open a copy in your web browser.</span></a><br>
Sick of getting these updates? <a href="#" target="_blank" style="text-decoration:none;"> <span style="color:pink">Unsubscribe now.</span></a>
</p>
</td>
</tr>
</table>
<!--logo and default heading-->
<table width="550" height="96" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><a href="#"><img src="images/gmlogo.png" width="91" height="96" alt="Gokhan Morkoc Logo" title="Gokhan Morkoc Logo"/></a></td>
<td width="380" align="right"><p style="color:pink; font-style:italic; font-size:13px;">The latest articles from Gokhan MORKOC Blog delivered right to your <br>inbox</p></td>
</tr>
</table>
<!--newsletter content area-->
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fff" style="background-color:#fff">
<tr>
<td align="center">
<h1 style="font-size:22px;font-style:italic;font-weight:normal;font-family:Georgia,Times,serif;color:#636363;margin-bottom:2px;">GokhanMorkoc.com Newsletter Sample</h1>
<p style="font-size:12px;line-height:17px;color:#343434;font-family:Georgia,Times,serif;padding:2px 10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.including versions of Lorem Ipsum. <a href="#" target="_blank" style="text-decoration:none"> <span style="color:pink">website homepage</span> </a> to find more recent articles.</p>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="280" height="125" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#CCCCCC">
<tr>
<td width="280" height="125" valign="middle" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="280" height="125" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="550" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#CCCCCC">
<tr>
<td width="280" height="125" align="center"><img src="images/photography-logos-showcase.png" width="280" height="120" alt="image 1"/></td>
<td width="240" height="125" style="text-align:center;padding-right:8px;">
<h3 style="font-size:15px;color:#64686e;font-family:'Lucida Grande',sans-serif;font-weight:bold;">Gokhan Morkoc Photograpy</h3>
<p style="font-size:11px;color:#666;font-family:Arial,Tahoma,sans-serif;padding:0 12px;margin-bottom:0;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's</p>
<p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://vandelaydesign.com/blog/galleries/photography-logos/" style="color:#5977c3;" target="_blank">Read Online →</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--footer-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="550">
<tbody>
<tr>
<td align="center" valign="middle">
<p style="font-size:11px;color:#fff;font-family:Arial,Tahoma,sans-serif;">
Is this message too small? <a href="#" style="text-decoration:none;" target="_blank"><span style="color:#728fd9;">Open a copy in your web browser.</span></a>
<br />
Sick of getting these updates? <a href="#" style="text-decoration:none;" target="_blank"><span style="color:#728fd9;">Unsubscribe now.</span></a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi Gokhan. I was trying to create my first newsletter and didn't know how to. Your tutorial is great. I appreciate it.
ReplyDelete