Custom Cable view live demo

Custom Cable is a London based company selling specialist HiFi Cables, HiFi headphones and DACs. After a complete re-design of their website, they needed a matching HTML email that would complement the fresh look. Both the design and the code was done by me and after the first successful email, three additional newsletters were ordered and delivered.

HTML Code

						
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Custom Cable - Re-launch Notice</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	
	<style type="text/css">
		/* Based on The MailChimp Reset */  
		#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
		body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 
		/* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/ 
		.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
		.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:120%;}
		/* Forces Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */ 
		#backgroundTable {margin:0; padding:0; width:100% !important; line-height:100% !important;}
		/* End reset */

		/* Some sensible defaults */
		a {color:#1aa1d9;}
		img {outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;} 
		a img {border:none;} 

		/* Yahoo paragraph fix */
		p {margin:1em 0;}

		/* Hotmail header color reset */
		h1, h2, h5, h6 {color:#1aa1d9!important;}
		h3, h4 {color:#000000!important;}
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:blue!important;}

		h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active, h1 a:visited, h2 a:visited,  h3 a:visited, 
		h4 a:visited, h5 a:visited, h6 a:visited { color:#1aa1d9!important; }

		/* Outlook 07, 10 Padding issue fix */
		table td {border-collapse:collapse;}
	</style>
</head>

<body style="background-image:url(images/background.gif); background-color:#efede8;">
    <!-- Start Wrapper Table -->
    <table border="0" cellpadding="0" cellspacing="0" id="backgroundTable" width="100%" style="background-image:url(images/background.gif); background-color:#efede8;">
    <tr>
    <td valign="top" style="padding-top:30px;">
    
    
    <!-- Start Top Row Table -->
    <table align="center" bgcolor="#1a1a1a" border="0" cellspacing="0" cellpadding="0" width="580" style="background-color:#1a1a1a;">
		<tr>
			<td bgcolor="1aa1d9" colspan="2" style="color:#ffffff; font-family:Tahoma,Arial,sans-serif; font-size:10px; line-height:12px; padding:5px 20px; text-align:right;">
				click <a href="#" style="color:#ffffff;"><span style="color:#ffffff;">here</span></a> if the email does not display correctly
			</td>
		</tr>
	</table>
    <!-- End Top Row Table -->
    
    
    <!-- Start Header Table -->
	<table align="center" background="images/header.jpg" bgcolor="#1a1a1a" border="0" cellspacing="0" cellpadding="0" width="580" style="background-image:url('images/header.jpg'); background-color:#1a1a1a; background-position:top center; background-repeat:no-repeat;">
		<tr>
			<!-- Logo -->
			<td align="left" width="252" style="color:#ffffff; padding:18px;" valign="middle">
				<a href="#">
					<img alt="Custom Cable" src="images/logo-header.jpg" height="34" width="210" style="display:block; margin:0;"/></a>
			</td>
			<!-- Contact -->
			<td align="right" width="252" valign="middle" style="color:#ffffff; font-family:Tahoma,Arial,sans-serif; font-size:12px; line-height:18px; padding:18px;">
				Contact us on<br/>
				<span style="font-size:14px; font-weight:bold;">020 8942 9124</span>
			</td>
		</tr>
	</table>
	<!-- End Header Table -->
	
	<br/>
	
	<!-- Start Main Content Table -->
	<table align="center" border="0" cellspacing="0" cellpadding="0" width="580">
		<tr>
			<td>
				<div style="border:1px solid #e3dfd4;">
					<table align="center" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" width="100%">
						<!-- Start Description Section -->
						<tr>
							<td style="color:#777777; font-family:Tahoma,Arial,sans-serif; font-size:13px; line-height:18px; padding:20px; text-align:justify;">
								<h2 style="color:#1aa1d9; font-family:Tahoma,Arial,sans-serif; font-size:24px; font-weight:bold; line-height:26px; margin:0 0 20px 0; margin-bottom:20px; padding:0;">
									Woo Hoo, we have relaunched!
								</h2>
								
								<!-- Start Sennheiser Partner Table -->
								<table align="right" border="0" cellpadding="0" cellspacing="0">
									<tr>
										<td style="padding:33px 0 20px 35px;">
											<a href="#">
												<img src="images/sennheiser.jpg" alt="Sennheiser Customer Spares" height="92" width="213" style="display:block;"/>
											</a>
										</td>
									</tr>
								</table>
								<!-- End Sennheiser Partner Table -->
								
								<p style="color:#191919; font-size:15px; font-weight:bold;">All change... ready for launch...</p>
								<p>Over the last four years, Custom Cable has undergone many changes.  We have built upon our existing reputation 
									to include one of the largest product portfolios from a supplier that specialises exclusively in Headphones, 
									Cables, DACs, Accessories and spare parts.</p>
								<p>From today, we will undertake our biggest change yet... 
									<a style="color:#1aa1d9; text-decoration:underline;" href="#">
										<span style="color:#1aa1d9;">an all new website</span></a>. 
									We hope that you will pay us a visit to view a sleeker, more streamlined Custom Cable, where finding the latest 
									headphone or audio interconnect just got even easier. (some cables are just too good to be hidden from view). 
									The website	will also be updated regularly to feature many 
									<a style="color:#1aa1d9; text-decoration:underline; white-space: nowrap;" href="#">
										<span style="color:#1aa1d9;">articles and blogs</span></a> 
									with the latest information from the industry.</p>
								<p>In addition to the new website, this email serves as an introduction to our email newsletter where we will 
									keep you updated on the latest developments in the Hi-Fi and Headphone community. To opt out, please follow 
									the instrucions below to unsubscribe.</p>
							</td>
						</tr>
						<!-- End Description Section -->
						
						
						<!-- Start What We Dind't Change Section -->
						<tr>
							<td style="padding:0 20px 20px 20px;">
								<h4 style="color:#000000; font-family:Arial,sans-serif; font-size:14px; font-weight:bold; line-height:18px; margin:0 0 20px 0; margin-bottom:20px;">
									WHAT WE DIDN"T CHANGE
								</h4>
								<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="color:#333333; font-family:Tahoma,Arial,sans-serif; font-size:12px; line-height:16px;">
									<tr>
										<td align="center" valign="top" width="25%">
											<img src="images/shipping.jpg" alt="Fast Shipping"/><br/>
											Fast shipping<br/>and delivery<br/>from &pound; 1.00											
										</td>
										<td align="center" valign="top" width="25%">
											<img src="images/support.jpg" alt="Support"><br/>
											Support available<br/>from Monday to<br/>Saturday 9am-6pm
										</td>
										<td align="center" valign="top" width="25%">
											<img src="images/secure.jpg" alt="Secure Transactions"><br/>
											Transactions secured<br/>and verified by<br/>GeoTrust
										</td>
										<td align="center" valign="top" width="25%">
											<img src="images/vat.jpg" alt="VAT Free Purchases"><br/>
											VAT Free<br/>purchases for<br/>non EU Customers
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<!-- End What We Dind't Change Section -->
					</table>
				</div>
			</td>
		</tr>
	</table>
	<!-- End Main Content Table -->
	
	
	<!-- Start Footer Table -->
	<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#f2f2f2" width="580">
		<tr>
			<td style="padding:20px;">
				<table border="0" cellspacing="0" cellpadding="0" width="100%" style="color:#333333; font-family:Tahoma,Arial,sans-serif; font-size:11px; line-height:16px;">
					<tr>
						<!-- Start Products Column #1 -->
						<td align="left" valign="bottom" width="25%">
							<h5 style="color:#1aa1d9; font-family:Tahoma,Arial,sans-serif; font-weight:bold; margin:0 0 7px 0; margin-bottom:7px;">PRODUCTS</h5>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">DACs</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Cables</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Headphones</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Headphone Spares</span></a>
						</td>
						<!-- End Products Column #1 -->
						
						<!-- Start Products Column #2 -->
						<td align="left" valign="bottom" width="25%">
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Microphone Spares</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Headphone Amps</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">HIFI</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">General Accessories</span></a>
						</td>
						<!-- End Products Column #2 -->
						
						<!-- Start Company Column -->
    					<td align="left" valign="bottom" width="25%">
    						<h5 style="color:#1aa1d9; font-family:Tahoma,Arial,sans-serif; font-weight:bold; margin:0 0 7px 0; margin-bottom:7px;">COMPANY</h5>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">About our company</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Returns Policy</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Terms and Conditions</span></a><br/>
							<a style="text-decoration:none;" href="#">
								<span style="color:#333333;">Why Us?</span></a>
    					</td>
    					<!-- End Company Column -->
    					
						<!-- Start Social Media Column -->
						<td align="left" valign="bottom" width="25%">
    						<table border="0" cellspacing="0" cellpadding="0" width="100%" style="font-family:Tahoma,Arial,sans-serif; font-size:11px; line-height:16px;">
    							<!-- Facebook Row -->
    							<tr>
    								<td align="left" height="30" valign="middle" width="33">
    									<a href="#">
    										<img src="images/facebook.png" alt="Facebook" height="24" width="25" style="display:block;"/>
    									</a>
    								</td>
    								<td valign="middle">
    									<a style="color:#28619a; text-decoration:none; line-height:12px;" href="#">Friend us<br/>on Facebook</a>
    								</td>
    							</tr>
    							<!-- Twitter Row -->
    							<tr>
    								<td align="left" height="30" valign="middle" width="33">
    									<a href="#">
    										<img src="images/twitter.png" alt="Twitter" height="24" width="25" style="display:block;"/>
    									</a>
    								</td>
    								<td valign="middle">
    									<a style="color:#409ebc; text-decoration:none; line-height:12px;" href="#">Follow us<br/>on Twitter</a>
    								</td>
    							</tr>
    							<!-- RSS Row -->
    							<tr>
    								<td align="left" height="30" valign="middle" width="33">
    									<a href="#">
    										<img src="images/rss.png" alt="RSS" height="24" width="25" style="display:block;"/>
    									</a>
    								</td>
    								<td valign="middle">
    									<a style="color:#f6790f; text-decoration:none; line-height:12px;" href="#">Subscribe to<br/>our RSS feed</a>
    								</td>
    							</tr>
    						</table>
    					</td>
    					<!-- End Social Media Column -->
					</tr>
				</table>
			</td>
		</tr>
		<tr><td height="4" style="background-color:#64b0d0; font-size:0; line-height:0;"></td></tr>
	</table>
	<!-- End Footer Table -->


	<!-- Start Bottom Table -->
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="580" style="font-family:Tahoma,Arial,sans-serif; font-size:11px; line-height:16px;">
		<tr>
			<td align="center" colspan="2" style="color:#737373;  padding:5px;">
				You are receiving this email because you subscribed to our newsletter. To unsubscribe, please click <a href="*|UNSUB|*" style="color:#1aa1d9;">here</a>
			</td>
		</tr>
		<tr>
			<td align="left" valign="middle" style="padding:10px 0;">
				<a href="#"><img src="images/logo-footer.png" alt="Custom Cable" height="44" width="190"/></a>
			</td>
			<td align="right" valign="middle" style="padding:10px 0;">
				&copy; 2009-2012 Custom Cable.<br/>
				Powered by <a href="#" style="text-decoration:none;"><span style="color:#737373;">Custom Cable Ltd</span></a>
			</td>
		</tr>
	</table>
	<!-- End Bottom Table -->
    
    </td>
    </tr>
    </table>  
    <!-- End Wrapper Table -->
</body>
</html>
						
					

Recent Feedback see all

Krisztina is really friendly, professional and goes beyond what is necessary to ensure the job is done perfectly. I would recommend her to anyone and hope to work with her again in future.

Daniel Keel

Amazing work completed before the dealine. The email looked stunning and was EXACTLY the type of design I imaged in my head. Communication was second to none and will absolutely use again.

Phil Wannell

I cannot speak highly enough of Krisztina. If you’re ever going to use anyone for CSS, HTML or Jquery (or all three) then this is the person. Perfect work, perfect communication a complete pleasure to deal with!

Neale