Orite Blog

Jul
08
2009

FREE Instant Email Standard Test Tool

Orite has created an online tool to emulate HTML/CSS rendering capacity of various Email clients. It references the Email CSS support Guide from Campaign Monitor, and utilizing the email-standards.org Email ACID test page as the example. You may paste in your own email template to test in.

Please note, this tool only provides a brief demonstration, by no means to be the exact reflection of how email clients show emails. Please remember this tool highly relies on the browsers capability as well, so be sure to use a standard compliant browsers. For more solid tests please try Litmus Email Testing or the Campaign Monitor Email Testing tool. If you want to convert any external CSS to inline style, Inline Styler and Emogrifier may come to help. Here goes the FREE tool, post your comments.

Email Client:

Images:

Show Hide

<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
	
	/* common
	--------------------------------------------------*/
	
	body {
		margin: 0px;
		padding: 0px;
		color: #fff;
		background: #930;
	}
	#BodyImposter {
		color: #fff;
		background: #930 url("http://www.email-standards.org/acid/img/bgBody.gif") repeat-x;
		background-color: #930;
		font-family: Arial, Helvetica, sans-serif;
		width: 100%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	#BodyImposter dt {
		font-size: 14px;
		line-height: 1.5em;
		font-weight: bold;
	}
	#BodyImposter dd,
	#BodyImposter li,
	#BodyImposter p,
	#WidthHeight span {
		font-size: 12px;
		line-height: 1.5em;
	}
	#BodyImposter dd,
	#BodyImposter dt {
		margin: 0px;
		padding: 0px;
	}
	#BodyImposter dl,
	#BodyImposter ol,
	#BodyImposter p,
	#BodyImposter ul {
		margin: 0px 0px 4px 0px;
		padding: 10px;
		color: #fff;
		background: #ad5c33;
	}
	#BodyImposter small {
		font-size: 11px;
		font-style: italic;
	}
	#BodyImposter ol li {
		margin: 0px 0px 0px 20px;
		padding: 0px;
	}
	#BodyImposter ul#BulletBg li {
		background: url("http://www.email-standards.org/acid/img/bullet.gif") no-repeat 0em 0.2em;
		padding: 0px 0px 0px 20px;
		margin: 0px;
		list-style: none;
	}
	#BodyImposter ul#BulletListStyle li {
		margin: 0px 0px 0px 22px;
		padding: 0px;
		list-style: url("http://www.email-standards.org/acid/img/bullet.gif");
	}
	
	/* links
	--------------------------------------------------*/
	
	#BodyImposter a {
		text-decoration: underline;
	}
	#BodyImposter a:link,
	#BodyImposter a:visited {
		color: #dfb8a4;
		background: #ad5c33;
	}
	#ButtonBorders a:link,
	#ButtonBorders a:visited {
		color: #fff;
		background: #892e00;
	}
	#BodyImposter a:hover {
		text-decoration: none;
	}
	#BodyImposter a:active {
		color: #000;
		background: #ad5c33;
		text-decoration: none;
	}
	
	/* heads
	--------------------------------------------------*/
	
	#BodyImposter h1,
	#BodyImposter h2,
	#BodyImposter h3 {
		color: #fff;
		background: #ad5c33;
		font-weight: bold;
		line-height: 1em;
		margin: 0px 0px 4px 0px;
		padding: 10px;
	}
	#BodyImposter h1 {
		font-size: 34px;
	}
	#BodyImposter h2 {
		font-size: 22px;
	}
	#BodyImposter h3 {
		font-size: 16px;
	}
	#BodyImposter h1:hover,
	#BodyImposter h2:hover,
	#BodyImposter h3:hover,
	#BodyImposter dl:hover,
	#BodyImposter ol:hover,
	#BodyImposter p:hover,
	#BodyImposter ul:hover {
		color: #fff;
		background: #892e00;
	}
	
	/* boxes
	--------------------------------------------------*/
	
	#Box {
		width: 470px;
		margin: 0px auto;
		padding: 40px 20px;
		text-align: left;
	}
	p#ButtonBorders {
		clear: both;
		color: #fff;
		background: #892e00;
		border-top: 10px solid #ad5c33;
		border-right: 1px dotted #ad5c33;
		border-bottom: 1px dashed #ad5c33;
		border-left: 1px dotted #ad5c33;
	}
	p#ButtonBorders a#Arrow {
		padding-right: 20px;
		background: url("http://www.email-standards.org/acid/img/arrow.gif") no-repeat right 2px;
	}
	p#ButtonBorders a {
		color: #fff;
		background-color: #892e00;
	}
	p#ButtonBorders a#Arrow:hover {
		background-position: right -38px;
	}
	#Floater {
		width: 470px;
	}
	#Floater #Left {
		float: left;
		width: 279px;
		height: 280px;
		color: #fff;
		background: #892e00;
		margin-bottom: 4px;
	}
	#Floater #Right {
		float: right;
		width: 187px;
		height: 280px;
		color: #fff;
		background: #892e00 url("http://www.email-standards.org/acid/img/ornament.gif") no-repeat right bottom;
		margin-bottom: 4px;
	}
	#Floater #Right p {
		color: #fff;
		background: transparent;
	}
	#FontInheritance {
		font-family: Georgia, Times, serif;
	}
	#MarginPaddingOut {
		padding: 20px;
	}
	#MarginPaddingOut #MarginPaddingIn {
		padding: 15px;
		color: #fff;
		background: #ad5c33;
	}
	#MarginPaddingOut #MarginPaddingIn img {
		background: url("http://www.email-standards.org/acid/img/bgPhoto.gif") no-repeat;
		padding: 15px;
	}
	span#SerifFont {
		font-family: Georgia, Times, serif;
	}
	p#QuotedFontFamily {
		font-family: "Trebuchet MS", serif;
	}
	#WidthHeight {
		width: 470px;
		height: 200px;
		color: #fff;
		background: #892e00;
	}
	#WidthHeight span {
		display: block;
		padding: 10px;
	}
	
</style>
</head>

<body>
<div id="BodyImposter">
	<div id="Box">
		<div id="FontInheritance">
			<h1>H1 headline (34px/1em)</h1>
			<h2>H2 headline (22px/1em)</h2>
			<h3>H3 headline (16px/1em)</h3>
		</div>
		<p>Paragraph (12px/1.5em) Lorem ipsum dolor sit amet, <a href="http://www.email-standards.org/" target="_blank" rel="noopener">consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <span id="SerifFont">(This is a serif font inside of a paragraph styled with a sans-serif font.)</span> <small>(This is <code>small</code> text.)</small></p>
		<p id="QuotedFontFamily">This is a font (Trebuchet MS) which needs quotes because its label comprises two words.</p>
		<ul id="BulletBg">
			<li>background bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ul id="BulletListStyle">
			<li>list-style bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ol>
			<li>ordered list sit amet, consectetuer adipiscing elit</li>
			<li>sed diam nonummy nibh euismod tincidunt ut laoreet</li>

<li>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</li>
		</ol>
		<dl>
			<dt>Definition list</dt>
			<dd>lorem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
			<dd>sed diam nonummy nibh euismod tincidunt ut laoreet</dd>
			<dd>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</dd>
		</dl>
		<div id="Floater">
			<div id="Left">
				<div id="MarginPaddingOut">
					<div id="MarginPaddingIn">
						<img loading="lazy" src="http://www.email-standards.org/acid/img/photo.jpg" width="180" height="180" alt="[photo: root canal]" />
					</div>
				</div>
			</div>
			<div id="Right">
				<p>Right float with a positioned background</p>
			</div>
		</div>
		<p id="ButtonBorders"><a href="http://www.email-standards.org/" target="_blank" id="Arrow" rel="noopener">Borders and an a:hover background image</a></p>
		<div id="WidthHeight">
			<span>Width = 470, height = 200</span>
		</div>
	</div>
</div>
</body>
</html>

Currently tested under FF3/3.5, Safari4, Chrome2/3, IE7/8, Opera9.6

Be Sociable, Share!

Written by Frank Liu in: Open Source Releases,Web Development | Tags: CSS, email, HTML, jQuery

3 Comments

sabarish says:

February 24, 2010 at 1:14 am

Very nice utility.

Can you please say how it works.

It will be useful if you say how you have got those rendering engines.
sabarish says:

February 24, 2010 at 1:18 am

Its a great to have these all in the same place.

If you can share how you got these rendering engines it will be great.
Ananth says:

July 9, 2013 at 5:30 pm

very nice. it will be useful

Trackbacks/Pingbacks

designfloat.com (July 9, 2009 1:33 am)

RSS feed for comments on this post.

Think Work Learn Share

FREE Instant Email Standard Test Tool

Email Client:

Images:

3 Comments

Trackbacks/Pingbacks

Categories

Recent Posts

Archives

Recent Comments

Orite Blog

Think Work Learn Share

FREE Instant Email Standard Test Tool

Email Client:

Images:

3 Comments

Trackbacks/Pingbacks

Categories

Recent Posts

Archives

Recent Comments

Tag Could