|
HTML - Just Fyi, Really Important Email Template Design Rules (still Need Help With Re-code)
YAY SOLVED THANKS TO COOTHEAD
This thing is driving me nuts... over the last 36 hours i, along with a helpfull member of this community have been trying to fix some SIMPLE code that wasnt broken in the first place. It displays fine, when tested in Dreamweaver, tests fine in IE, FF. The several adjusted codes even display fine inside the test previewer of the mail program on www.yourmailinglistprovider.com ! The trouble starts when the email HTML code gets sent to the Gmail & Hotmail inbox. Both my inbox' are stuffed with test mails.. and it isnt going to end any time soon I have CODE 2 that wont load up the CSS image tags. And CODE 1 that wont display the text in its right position, not on top of the image, instead it shows it way down, like so: http://img196.imageshack.us/img196/2625/frustration.jpg So finally... i discovered, why.. the Gods have put me in this misfortune. Google Mail is in BETA, and that means the following: Quote: Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software. Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed. As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email. For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded. &#^&%$@3(*(2@#*&y#!!............................. Why Now all my work ive put into this could be all for nothing,.. since I believe the solution given by the website is too far fetched for this amateur. The solution: Quote: Here are coding techniques that appear to work well in Google Mail and older email softwa * Define the background color in a TD cell with bgcolor=, not the CSS style. * Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images. * If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work. * If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag. * If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag. * If the P and A fonts appear to be different sizes, wrap the A tag in a P tag. * Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges. * When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly. SOURCE I need either of these two amateuristic codes (they are basically the same) re-coded with the rules up above. Could anyone who can do this fluently without breaking a sweat help me out? I am near desperation and willing to transfer a fee to whatever paypal account. I just need this mail template sent out asap. Thank you for reading. CODE 1: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
width:711px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
background-image:url(blokje.png);
}
#pic {
display:block;
}
#content {
padding:0 0 60px 50px;
background-image:url(onderkantcurve.png);
background-repeat:no-repeat;
background-position:0 bottom;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">
<img id="pic" src="top.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>
Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
Met vriendelijke groet,
</p>
</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>
CODE 2: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
position:relative;
width:711px;
height:910px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
}
#pic {
position:absolute;
top:0;
left:0;
}
#content {
position:absolute;
top:170px;
left:50px;
width:651px;
height:680px;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">
<img id="pic" src="big.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief Februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>
Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
Met vriendelijke groet,
</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>
Thanks for reading.. Similar TutorialsHey Chaps, Being a professional web designer, I used to read articles in this discipline and recently got a superb one and thought of sharing it with you.. Here are 15 important website design tips that you might not be aware of or have overlooked. Consider taking advantage of them if you haven't already done so... 1. Custom 404 Pages Create a custom 404 web page, so that any time your website visitor mistypes or misspells a URL on your site, they will still be provided with navigation options for your site (instead of getting nothing but a "Page Not Found" error message, which is neither friendly or helpful). 2. Redirect Non-www. To www. Website visitors will often leave out the "www." portion when they type a URL or link to your website. Set the website up so that it automatically redirects any non-www version of your domain URLs (http://domain. com) to the www version (http://www.domain. com) of your website. 3. Properly Sized Graphics Size and define all graphics and images on your web pages properly and correctly. Web pages will load quicker if the graphics contained on each page are properly defined so they don't require the web browser to re-size them. Properly sized and defined images can reduce the web browser workload and speed up the page loading time. 4. Favicon Add a Favicon (favorite icon) to your website, so that your company or product logo appears in the URL box. This icon will also show up in a bookmark list, and gives the web site an added level of professionalism. 5. Include RSS Auto-Discovery If you offer an RSS feed for any content on your website, be sure to include auto-discovery code in the header of your website. This will allow many browsers and RSS readers to automatically detect the presence of an RSS feed and alert the visitor that it is available. 6. Alternate Domains Domain names are relatively inexpensive, so you should register multiple domain versions and extensions in order to protect your brand. The varied domains can be parked on the main website, simply to prevent others from obtaining them. Registering alternate domain versions will help protect your brand. 7. Consistent Navigation Navigation should remain consistent on a website. As a website visitor moves through the website, the navigation bar should remain in the same place on each page. This will make it easier for visitors to navigate your website, and become more comfortable as they move through your site. 8. Home Goes Home The main graphic, company logo, or "header" at the top of the site should be included on every page in the site, and should always return the visitor to the home page of the website. This has become a web standard, and most visitors now expect to return to the main page of the site simply by clicking on the main top graphic from any page within the site. 9. Copyright Notice Include a copyright notice on the bottom of each page contained on the website, and keep it current! It may seem trivial, but an out-of-date copyright notice can send a message to your visitors that the website and its content may be out-of-date as well. 10. Meaningful File Names Use meaningful file names for any files, graphics, or web pages. Many search engines look at file names as part of their search algorithm, and using keywords in file names may help to improve search engine rankings. 11. Hyphens vs Underscores When naming files and webpages, use hyphens (i.e. web-page.html) rather than underscores (i.e. web_page.html) for the file names. It is much easier for search engines to separate and index the keywords when hyphens are used. 12. Alt Tags Use ALT tags to describe what images represent on web pages. ALT tags not only assist visually-impaired visitors in knowing what the images are, but they also help with search engine ranking. 13. Spell Check Use a spell-check feature on the text of all web pages in a website. A website that contains mistyped or misspelled words just shouts "unprofessional". Take the extra few minutes necessary to check the spelling of text on each page of your website. 14. Test After making changes to a website, test it! Many times, a webmaster will upload changes, confident in their abilities, only to later discover that in their attempt to fix one thing, they have "broken" something somewhere else. Make testing a habit after making even the most minor changes! 15. Keep It Simple Simple is good. Remove unnecessary clutter and distractions from a website and navigation menu. ... Good luck mate.. TIA for your response. Hi all i am new to this forum i am designing my forum in html language i need a very important html code that prevent visitor from viewing the content before registration could any member help me plz ? best of luck for all Hi I've done a search with various keywords about this but haven't been able to find the answer. I'd like to know how you combine the html and css from a website to create a single file that can be used to make a template suitable to send as an email (that keeps the look and feel of the site intact) I'm sure it's really easy to do via dreamweaver but I don't know how. Thanks Im in the progress of building my first mailchimp template. Ive come very far, but one thing I cant figure out. Please have a look at this image to see the original photoshop concept. Now please look here for my progress so far. The code that im struggling with: Quote: <table border="0" cellpadding="0" cellspacing="0" width="100%" class="bg_h4" mc:repeatable> <tbody> <tr> <td><h4 mc:edit="article_title1" class="titeltjes">Maatwerk met Italiaans klasse </h4></td> </tr> <tr id="background_blox"> <td align="center" valign="top"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_260.gif" style="max-width:160px;" mc:label="image" mc:edit="liwc600_image00" /> </td> <td valign="top"> <div mc:edit="article_content1"> <strong>Variable content blocks:</strong> <a href="http://www.mailchimp.com/kb/article/how-do-i-work-with-repeatable-content-blocks" target="_blank">Variable content sections</a> are noted with plus and minus signs so that you can add and subtract content blocks and also a drop-down selector that allows you to choose which type of content block to display. </div> </td> </tr> </tbody> </table> Can anyone help me out? The brown h4 area needs to be wider! Thanks for reading this. Hi guys, I created a email template for company usage using html, i put company`s logo in it, it works perfect with outlook and windows live mail, but when i open that email template in browsers, i see .jpg file at the end of the mail message. Is there any way to get rid of this? Thanks. here is a screenshot of my problem: http://img26.imageshack.us/img26/5672/16715830.jpg i was wandering whats the best code to look into for a noob to web design. I know a little in html, but i was wandering is there a certain new language that might be really popular in the future maybe the newest language for web design? thanks....and also please include if you could a website to help you learn it please reply....i had made an template using power point and i want to put that template on my html code ...the code is HTML Code: <html>
<head>
<style>
</style>
<script type='text/javascript'>
<!--
var clicks = new Array();
clicks['a'] = 0;
clicks['b'] = 0;
function AddClick(choice){
clicks[choice] = clicks[choice] + 1;
document.getElementById('CountedClicks_' + choice).innerHTML = clicks[choice] + ' votes';
}
// --></script>
</head>
<body>
<H1 align="center"><I>WELCOME 2 U-COMPARE</H1>
<HR COLOR="RED" SIZE="10" width="50%" NOSHADE>
<img src="ab.jpg" style="margin-left:400px"align="down" alt="Pulpit rock" width="250" height="400" />
<span id="CountedClicks_a">0 vote</span><br>
<button style="background-color:grey"; ; onclick="AddClick('a')">vote</button>
<table cellspacing="15" border="0" cellpadding="0">
<td width="700"></td>
<td width="3" height ="200" bgcolor="RED"><BR></td>
<td width="150" valign="DOWN" align="right">
</td>
</tr>
</table>
<img src="tiesto.jpg" style="margin-left:400px"align="bottom" width="250" height="400" />
<span id="CountedClicks_b">0 vote</span><br>
<button style="background-color:grey"valign="top" onclick="AddClick('b')">vote</button>
<!-- begin htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=406&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
<table cellspacing="15" border="0" cellpadding="0">
<td width="700"></td>
<td width="3" height ="300" bgcolor="RED"><BR></td>
<td width="150" valign="DOWN" align="right">
</td>
</tr>
</table>
</body>
</html>
I have lost the code / split / design buttons in my dreamweaver. Please can someone tell me how to get this back? This what my dreamweaver currently looks like: This is a pic that has the buttons I want to get back in place! http://www.softwareinreview.com/imag...weaver_cs3.png Please can someone help Ok I need to take things like this forum: http://lmiinc.com/forum/ http://lmiinc.com/forum/calendar.php And make it active on the new site I'm building for LMI. So what files exactly do I need to copy to the new directory & then reference as a link in my navigation bar in all of my .html files? You might say that html, body, or head are most important as maybe search engines are not so forgiving of seriously faulty markup. This poll is more for keywords - which tag is most important for keyword optimization? title Hi, i seem to remember that it was possible to have a different layout in IE and FF by using "!important" somewhere in the css page. does this still work? how does it work exactly? thanks Hello, I need help... I am making website for Ipod/iPhone games... It will be most for Game Friend codes.. However I can't find any info how to make option that if person will want to add code.. I need that box for puting code and then that code goes to the lines for example: http://www.petslivecodes.com/ This site is not my, but I want to make same or similar table with option that person will be able to add his friend code... Please It will be great if I Get this help. I post here because I think it is just html code.. But I am to dum make one ^^^ Waiting For help so Bad =0 Replay here if u know how to do it I will pay you Through paypal for INFO Hi, First of all I want to thank you ahead whoever can help me out with this; I need someone to help me to finish the table layout that I have attached in the picture This is the code I got so far but now I'm just stuck; HTML Code: <html> <head> <title> Sep 7 Tables</title> </head> <body> <!--Table code--> <table bgcolor="yellow" width="100%" height="100%" border="2" cellpadding="20" cellspacing="20"> <tr height="100"> <td colspan="2" align="center">This area is the header for logo</td> </tr> <tr> <td rowspan="2" width="40%">Links <table WIDTH="100%" BORDER="1" bgcolor="white"> <tr> <td> Nested table-r1c1</td> </tr> </table> </td> <td height="2" align="center">New </td> </tr> <tr height="199"> <td colspan="2" align="center">Sports</td> </tr> <tr height="50"> <td colspan="2" align="center">copyright</td> </tr> <!--end Table code--> </body> </html> thank you hi my friends I have question and please answer me, how to write the HTML code design a calculator? This is my feeling on the entire subject. .net is a perfectly acceptable domain extension, it is valid and I have never really heard of .net domains as disrespectful. However, the majority of internet users when typing in a web address will by reflex use the .com extension. So, if you only have one domain and it is .net, the odds are pretty good a person typing your web address in their browser window will type xyz.com and not .net, leading them to never reach your website. For the domain name you really like, would it still make sense if you added the two letters va (for virtual assistant) after it? You can always purchase your second choice domain and keep an eye out for your favorite (they expire, so at some point down the road you may be able to purchase it). One other piece of advice, buy both .com and .net domain extensions for the domain you choose. Domains can be purchased pretty inexpensively...this way you are covered should a person use the .com OR .net extension when typing in your web address. I have been creating a number of sites just using title pages and i never used meta tags such as keywords and description. i now realised that someone advised that many pages goes into similar ones shown by google. so, do i need to use meta tags? is not using meta tags hurt my se rankings? Hi, I'm new to this forum and this is my first post...Because I needed some help... I have some files on my site which i want others to see e.g. xml files and swf files but I wnat to deny direct access to them through the url e.g if they wrote in the adddress bar http://htmlforums.com/flashfile.swf then they wouldn't be able to access it i.e they can only access it through my site... Someone please help me with this... Thanks (by the way i have a .htaccess file and ...no nothing about html codes and stuff) Thanks I figured I would just post this since having a problem with it this morning... Please bear in mind that I do recommend following the strict doctype - its just that I'm stuck with a CMS written about 8 years ago for this particular site I had the problems with. Anyway - our client noticed that there are styling discrepancies in IE... I checked the source code and found the following (the document is served as HTML4.01 Transitional): HTML Code: <p><font face="Verdana, Arial, Helvetica, Sans Serif" size="1">Blah<br> </p><p>More blah</p> What was happening in IE was that the unclosed <font> element was being terminated when the browser encountered the </p> tag... What was happening in FF was that the <font> element was being closed and then a new element placed in subsequent paragraphs... Hence, discrepancies in style between the two browsers... So - even when using an older doctype, it is important to check your code is well-formed and valid... As for me - I've now got to sit with our application developer and fix the CMS software... Web Page http://www.classic-corvettes-ky.com/Contact.htm does not send eMail as intended. Does anyone know how I can resolve this? |
|||||||