Help please -quark to HTML-I'm getting crazy!
Help please -quark to HTML-I'm getting crazy!
Hi everyone !This is my first post and i apologize if is too much.
Ok let me tell you about horror at my work place. My job is to oversee email operations in my company. Testing, deploying and analytic. Upper management decided not to hire web designer and just added designing HTML email duty to my daily duties .
I have experience in HTML but it was mostly limited to tweaking in test phase. So i learned. I was making clean simple HTML emails that looked almost identical in any email client. It was tough to cope with everything but manageable. Until couple weeks ago...
New CMO got hired and she is coming from desktop publishing world, she is not familiar with html at all . Long story short, she is constantly sending me a 'In design' and Quark files and demanding conversion into HTML Email. Converting is not a problem .But rendering is a NIGHTMARE! They demanding 100% match when email land to inbox.
I don't know is this even possible. Due to unpredictable nature of email clients I cant use css div tags etc... What can I do ?
If is not done i will probably lose my job.
Can someone shed some light on my problem please . I tried to upload doc. but is too large (1.5mb) . If someone wants to take a look i can copy paste my html or send you actual Qexpres doc.
I am losing my mind....
Thanks in advance
Re: Help please -quark to HTML-I'm getting crazy!
Hello 900rr,http://www.ehow.com/how_6655983_make-ht ... quark.html, is how easy it is if your familiar with Quark and have Adobe InDesign. Sounds like you've been made a "patsy" by someone who should already know how to do this. Of course, that's just my opinion.
-CubeSquare
Re: Help please -quark to HTML-I'm getting crazy!
Thanks for quick reply!Exporting to HTML is not a problem at all , problem is that final result can not be used due to horrible rendering on email clients. also Quark creates CSS style sheets that getting striped by many ESP's . You are right about our CMO she is a completely clueless about email design and email mechanics, but she's trying to cover that.Doing that she making my life a hell. No one believe me , I am at the verge to just walk away from this job (which I liked so much) .Last 2-3 weeks I lost over 10 lbs.
Re: Help please -quark to HTML-I'm getting crazy!
Hello 900rr,I guess if you are going to put this on yourself, you'll need an account at Adobe InDesign where you'll have access to an expert that can solve your problem. I tried to get through for you, but not having an account, (even temporary) with Adobe, I couldn't even get on the phone!
But I think that's what you need to do! Contact Adobe InDesign Support and speak to a representative. They'll fix you up. I hope.
I'm not trying to pass you off. I can see that you need help, and I think the best place to get it is from the source.
-CubeSquare, with fingers crossed.
Re: Help please -quark to HTML-I'm getting crazy!
I advice you be relax start from scratch and when you find any specific issue which is hurdle in completing your HTML work for email then ask for specific issue help.some html tags/elements did not work in email (personal experience)...
i have done this email things lots of time don't worry just make a layout first and i recommend you use table instead of dives for quick and proper layout although in actual table based layout for web is history and no more used but for email its a good tool.
Re: Help please -quark to HTML-I'm getting crazy!
Thanks for reply ...I did a tables but still looks horrible when lands into inbox.If you guys can take a look , I attached inbox screenshot and how creative should render . Also here is my HTML... Maybe something there needs to be fixed ?
Thank you so much !
<html><head>
<title>HotTravelOffers.com-Survey</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF" marginheight="0" marginwidth="0">
<!-- Save for Web Slices (Untitled-2) --><table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="403"><a href="http://www.hottraveloffers.com/"><img src="http://www.hottraveloffers.com/im/logo6.jpg" alt="Take Survey" width="387" height="88" border="0"></a></td>
<td width="231" style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 10px; padding:"><span style="font-family: Arial, Helvetica, sans-serif">For great deals and discountson all your travel needs-
<a href="http://reservations.hottraveloffers.com/templates/399684">click here</a>.</span><br>
<span style="font-family: Arial, Helvetica, sans-serif">If you have trouble viewing this email view it <a href="http://www.hottraveloffers.com/hto8wb.html">online</a>.</span></td>
</tr>
</table>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="601" align="center">
<tbody><tr>
</tr>
<tr>
<td style="padding-left:15px; padding-right:10px; padding-top:10px; padding-bottom:0px; font-size: 50px;" colspan="2" rowspan="5" bgcolor="#FF5D31" valign="top" width="299"><span style="font-size:45px; font-family: 'Arial Black', Gadget, sans-serif; color: #03F; line-height:50px; font-weight: bold;">PERFECT VACATION FOR YOU!</span>
<span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 22px; color: #ffffff; font-weight: bold; padding-right:5px;"><table width="276" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="276" style="font-family: 'Arial Black', Gadget, sans-serif; color: #FFF;"><strong>Take Our Survey for an opportunity to win a $500 gift card.</strong></td>
</tr>
</table>
</span>
<span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 22px; color: #ffffff; font-weight: bold; padding-right:5px;">
<table width="273" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="273" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color:#FFF"><br>Need a break but not sure of your destination? Get more outof your next vacation!<br>
Retreat to a place that's designed around your preferences.Take our short survey and be the in the know about the hottest deals, last minute travel, exclusive offers and travel discounts and credits. Make planning your vacation easier.</td>
</tr>
</table>
</span></span></td>
<td colspan="2">
<img src="http://www.hottraveloffers.com/im/hto3_04.jpg" alt="Retreat" height="201" width="301"></td>
<td>
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="201" width="1"></td>
</tr>
<tr>
<td colspan="2" height="13" width="301">
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="13" width="301"></td>
<td>
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="13" width="1"></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://www.hottraveloffers.com/im/hto3_06.jpg" alt="" height="212" width="1"></td>
<td>
<img src="http://www.hottraveloffers.com/im/hto3_07.jpg" alt="Relax" height="200" width="300"></td>
<td>
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="200" width="1"></td>
</tr>
<tr>
<td height="12" width="300">
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="12" width="300"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="http://www.hottraveloffers.com/im/hto3_09.jpg" alt="Explore" height="200" width="301"></td>
<td>
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="85" width="1"></td>
</tr>
<tr>
<td style="font-size: 15px; color: #ffffff; font-family: Arial, Helvetica, sans-serif; padding:10px;" bgcolor="#FF5D31" height="115" width="178">
Click on the ESCAPE bottletop,
take our survey and you'll be
signed up to get the inside
scoop.</td>
<td bgcolor="#FF5D31"><a href="http://www.hottraveloffers.com/"><img src="http://www.hottraveloffers.com/im/bto.png" alt="Take Survey" border="0" height="115" width="121"></a></td>
<td>
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="115" width="1"></td>
</tr>
<tr>
<td colspan="4" style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding:10px;" height="111" width="600">*Note:
By completing the survey, I agree to receive communications via email
and/or US Mail from HotTravelOffers.com and its marketing partners.<br>For more information about our information collection and use policies, please read our <a href="http://www.hottraveloffers.com/pp.html">Privacy Statement</a>.<br>Spectra Data Group, LLC, 461
N 3rd St, 3rd Floor West, Philadelphia, PA 19123</td>
<td>
<img src="http://www.hottraveloffers.com/im/spacer.gif" alt="" height="111" width="1"></td>
</tr>
</tbody></table></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body></html>
Attachments
-
should look like this.jpg (145.74 KiB) Downloaded 418 times
It should render like this -
hto render2.jpg (147.68 KiB) Downloaded 404 times
Inbox render screen shot
Re: Help please -quark to HTML-I'm getting crazy!
I'm looking. I'm trying to make sense of it. I'm trying to validate. Will be trying different DOC-TYPE'S, from loose to strict, with and without Tables.Will return as soon as possible.
-CubeSquare
Re: Help please -quark to HTML-I'm getting crazy!
OK, after a quick check on leftmargin, topmargin, marginheight, and marginwidth, I came up with some info. http://www.idocs.com/tags/document/_BODY_TOPMARGIN.html and that was very telling. From DreamWeaver these elements go back to IE4 and Netscape. Then http://www.highdots.com/forums/macromed ... 85915.html told the story for today, which is that these elements are deprecated and one should use CSS: body {margin:0;padding:0;}This is good, I'm gaining insight and understanding.
-CubeSquare
Re: Help please -quark to HTML-I'm getting crazy!
CubeSquare wrote:OK, after a quick check on leftmargin, topmargin, marginheight, and marginwidth, I came up with some info. http://www.idocs.com/tags/document/_BODY_TOPMARGIN.html and that was very telling. From DreamWeaver these elements go back to IE4 and Netscape. Then http://www.highdots.com/forums/macromed ... 85915.html told the story for today, which is that these elements are deprecated and one should use CSS: body {margin:0;padding:0;}
This is good, I'm gaining insight and understanding.
-CubeSquare
Thank you so much !
I made over 20 different creatives and none of them satisfied our CMO. Those big bold betters just wont stay bold in some email clients and email never renders right fonts and tables . I really tried everything in my power to make it right and hit darn wall. Also I called web design agencies and ask them if quark doc. can be converted in HTML email and got pretty much the same answer ... No... It' need's to be done from scratch. I did that to but my my upper management did not like it at all.
Any help is greatly appreciated.
Re: Help please -quark to HTML-I'm getting crazy!
Just to show you that I haven't been idle, I decided to dismantle your program and try writing one of my own. But I ran into a big problem right away. It's beautiful in Firefox, Chrome and Safari, in fact it's identical in all three. But in IE, it's jammed together!It validates as XHTML strict. And I'm confused as to why. In the past, I've had some minor tweaking to do but nothing like this. I wanted you to see in case it might help give you an idea.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HotTravelOffers.com-Survey</title>
<!-- <link rel="stylesheet" type="text/css" href="main.css" /> -->
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#webPage {
width: 600px;
height: 878px;
border: 1px solid blue;
margin: 0 auto;
background-color: #FFFFFF;
position: relative;
}
</style>
</head>
<body>
<div id="webPage">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="http://www.hottraveloffers.com/">
<img src="http://www.hottraveloffers.com/im/logo6.jpg" alt="Take Survey" />
</a>
</td>
<td style="font-size:12px;margin-top: 15px;">
<p>For great deals and discounts on all your travel needs-
<a href="http://reservations.hottraveloffers.com/templates/399684">click here</a>
<br />
If you have trouble viewing this email<br /> view it <a href="http://www.hottraveloffers.com/hto8wb.html">online</a>
</p>
</td>
</tr>
</table>
</div><!-- close webPage -->
</body>
</html>
I'll continue working on it.
-CubeSquare