How to create email template ? (or) Email template design techniques

HTML Email Tips for Web Designers

how do I get started designing HTML email? Any tips for the more advanced user?

If you're a web designer, and you know your stuff,  and give you a quick, no-nonsense "Quick Start Guide" to HTML Email...

HTML Design and Coding Tips:

• HTML Email should be sent in "multipart-alternative" format. That means the email is embedded with both the plain-text version, and the HTML version, of the message. When people can't (or won't) view HTML email, the plain-text version displays instead. That's the main reason to use a system like MailChimp, Constant Contact, GotMarketing, etc.
• You can try to code your own script to send multipart-alternative email. Use Google to research how. Then, after you've pulled out all your hair, yelled at your mom, and kicked your dog out of frustration, use one of the tools we listed above. Because even if you figure out how to deliver in multipart, you still need open, click, and bounce handling scripts, plus an email server that sends authenticated messages.
• Image files don't get sent along with HTML email as attachments. You host images on your server, then code the HTML in your email to point to them with absolute paths. In other words, you code something like this: <img src="http://www.yourserver.com/images/image.gif"> instead of like this: <img src="../images/image.gif">
• Design for the preview pane of email applications. That means you've got about 500, 600 pixels tops for your email designs. If you think recipients will actually double click an email to view your message in full screen "to appreciate all its glory," send us whatever you're smokin.
• You know how with web pages, you can use CSS to position things, and "separate content from appearance" and all that? Yeah, that won't work in email applications. Think back to the old days of the browser wars. When Netscape and Microsoft were duking it out. There was no Flash plugin. It was only shockwave. Put away your DIVs and DHTML. Dust off those tables, shim.gifs, and font tags, because you're gonna need 'em. Fancy CSS (especially DIVs and positioning) won't work reliably.
• When you code a web page, you test it in IE, Firefox, and Safari, right? And you kind of learned to "leave a little wiggle room" so that your designs work across all browsers. Well, when you code an HTML email, you have to test it in Lotus Notes, Outlook 2003, Outlook 2000, Outlook Express, Apple Mail, Apple Entourage, Eudora, Mozilla Thunderbird, AOL, Yahoo!Mail, Yahoo!Mail Beta, Google's Gmail, Hotmail, Earthlink, Comcast, etc (here's a bare-minimum checklist for ya). And yeah, they all display HTML email a little different. When we say, "Keep your HTML email simple," we really mean it. Update: If you'd like to test your email design and code in one easy click, check out our new Inbox Inspector tool.
• You can use a little CSS, such as for basic fonts and colors. But use it sparingly, and design things to fail gracefully.
• Use inline CSS, not linked files. Unlike images, linking to a server-hosted CSS file isn't that reliable.
• When you embed your CSS, embed it below the BODY tag because browser-based email applications (like Gmail, Hotmail, Yahoo!Mail, etc) strip out your HTML, HEAD, and BODY tags so they won't interfere with their own web page.
• Don't ever let any lines in your email or HTML code begin with a period. Some email servers interpret lines that begin with periods as the, "end of message" command, so your email will get stripped anywhere below that line (example). So be extra careful in your embedded CSS. Add spaces before any lines of your CSS that start with a period.
• JavaScript, ActiveX, Flash, and embedded movie files won't work. Don't shoot the messenger---we're just telling you the truth. The reason they won't work reliably is just about everybody has anti-virus applications that block that stuff from running.
• Background colors. Remember how we said that most browser based email applications (like HotMail) strip out your BODY tag? That's why assigning background colors to your BODY won't always work. The most reliable way of giving a background color to your email is to wrap it all inside a big, 100% wide table, and give the table cell a bgcolor. We warned you, HTML email is "old school."
• Don't forget your plain-text version. When web designers create HTML email, they often neglect the plain-text versions (they treat it like image ALT text, or META tags---always a pesky afterthought). But plain-text emails are very important. If you neglect them, some spam filters will even think you're a sloppy coder, and throw your mail into the junk folder.
• Tips for plain-text emails? You get absolutely no formatting. This is super old school. Hard wrap them at about 60 or 70 characters. Use a plain-text editor (not Microsoft Word), and type a letter (I like the letter "W") across the top of the document about 60 times. That's your ruler. When you type your message and get to the end of the ruler, hit return (more tips). 

About Spam Filters

• You need a good balance of "graphics vs. text." Otherwise, spam filters will get you. Don't send one ginourmous graphic. Balance it out with some copy, especially your company contact information and unsubscribe link. If you send one ginormous image as your HTML email, it can get you blacklisted.
• Don't write like a spammer. Watch those exclamation points, and FOR THE LOVE OF GOD, DON'T YELL in your email (learn how spam filters think).
• Don't get sloppy with your code, because spammers are sloppy with their code. Close those table cells and font tags.
• Don't use spammy looking colors, like HUGE SALE! and CLICK NOW!.
• Web designers will like this one: some spam filters will punish you for using FrontPage (or other WYSIWYG tools) to code your HTML email. So strip out any of that useless META stuff that those applications produce (more funny spam assassin criteria).
• Sending test emails to your client? If it's a fairly large corporation, their IT group probably has a spam firewall in place, and your test campaigns might get blocked. You may have to ask their IT geeks (politely) to whitelist your email service provider. Many of them throttle emails from new/unknown sending servers if they receive more than 2 or 3 messages at once. 
• When you code a web page, you probably use "lorem ipsum" dummy text, right? If you do that with email, some Bayesian spam filters might block you (example). Same thing happens when you just paste a bunch of placeholder text over and over in your email. Go grab real copy from somewhere instead. Avoid the word "test."

Every Email Campaign Should Have...

• An instantly recognizable from-name and reply-to address. Use your company name, for instance. Then, don't change it, because recipients might have whitelisted you.
• A good, descriptive subject line that's not spammy. You've got a split second to convince recipients that your message isn't junk.
• A one-click unsubscribe link. Consider placing it at the top of your email, not the bottom.
• Your "offline" contact information, including your physical mailing address, phone number, etc. It will help people remember who you are (subscribers forget you in 6 months) and they might trust your unsubscribe link more, instead of reporting your email as spam.