Click me
Transcribed

Email Coding 101

EMAIL CODING 101 <Creating FLAWLESS HTML for Email> Creating HTML for email is very different than creating HTML for the web because most email clients don't offer the same support for modern web standards as web browsers do. Worse, there are no email-specific standards in place. Avoid the temptation to toss your computer out the window and follow these tips to create awesome HTML emails. CHOOSE THE RIGHT TOOLS FOR THE JOB Popular web editors such as Dreamweaver are great for creating web pages, but the HTML they produce isn't always optimized for email. Plain-text editors like TextMate, Coda and CoffeeCup are ideal. If you're not up for learning how to write HTML (and we can't blame you), look into templates provided by your mailing software. Welcome Your Headline Goes Here Size Hi There. Lorem ipsum dolor sit amet, consectetur adipisicing elit, Write your message here. Lorem ipsum dolor sit amet, consectetur adipisicing sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. elit, sed do eiusmod tempor incididunt TABLES FOR LAYOUT To avoid display mishaps, use tables to structure the layout of your email. Many email clients have poor support for CSS positioning, floats, and clears, leaving us to code like it's 1999 all over again. Be sure to properly nest your tables and close all open tags. PROPERLY NEST TABLES <table><tr><td> <table> <tr><td><img src-"http://www.site.com/images/saturn.gif" width="50" height="65" alt="saturn" /></td> <td><img src-"http://www.site.com/images/helmet.gif" Welcome! width="50" height="65" alt="helmet" /></td> ENTER <td><img src-"http://www.site.com/images/bear.gif" width-"50" height="65" alt-"bear" /></td> <td><img src-"http://www.site.com/images/heart.gif" width="50" height="65" alt-"heart" /></td> </tr> <tr><td> <table> <tr><td><img Welcome src="http://www.site.com/images/welcome.gif" ENTER width="150" height="65" alt="welcome" /></td> <td><img CONTENT TABLE 2 src="http://www.site.com/images/enter.gif" width="50" height="65" alt="enter" /></td> CONTENT TABLE 1 </tr> CONTAINER TABLE </table> </td></tr> </table> </td></tr></table> AVOID CSS POSITIONING, FLOATS, AND CLEARS FLOAT: LEFT; FLOAT: RIGHT; Welcome! CLEAR: BOTH; INLINE CSS Keep your styles simple, and either write them inline or use a conversion tool. Gmail in particular does not support embedded or external CSS, and many email clients offer support for only the most basic formatting styles. Save the rounded corners and drop shadows for your next web project. SAFE STYLES PROCEED WITH CAUTION DEFINITELY AVOID (GOOD SUPPORT) (LIMITED SUPPORT) (LITTLE SUPPORT) font-family, font-size, margin, line-height, clear, float, font-style, font-weight, color, background-image, list-style-image, padding, border background-position, position, z-index background-repeat AVOID SHORTHAND In some cases, unexpected results can occur when web developers use shorthand in HTML emails. Use the full six digits for HEX color codes (using: #cccccc rather than #ccc) and avoid RGB colors entirely. Instead of combining multiple CSS properties into a single shorthand declaration, write each out separately. USE: INSTEAD OF: <td style="font-family: Georgia, serif; font-size: 12px; line-height: 30px; font-weight: bold; font-style: italic;"> <td style="font: italic bold 12px/30px Georgia, serif;"> BLOCK-LEVEL ELEMENTS In some email clients, block-level elements such as <p> or <hl> tags are stripped out or inherit unexpected properties that may adversely affect your design. Try enclosing all text within <td> cells instead, and use inline styles to create rules for the text in each cell. TRY: INSTEAD OF: <td>The quick brown fox <p>The quick brown fox jumps over the lazy dog</td> jumps over the lazy dog</p> LINKS State-specific link styles (such as a mouse-over or hover effect) have poor support in email. While there's no harm in including these styles, your design shouldn't rely on these effects. THE YAHOO! And Achieve this. EXAMPLE Yahoo mail has an annoying habit of changing link colors blue through their 'yshortcuts' feature. There are two ways to override this: THE FIRSST: THE SECOND: Including a .yshortcuts class in the <head> of your email: Wrapping links in an additional <span> tag with your desired link color: <a href="http://company.com" style="color: #FF0084; text-decoration: none;"><span style="color: #FF0084">Link text is here!</span></a> <style type="text/css"> yshortcuts a span { color:#0OFF00 } </style> In the body of your HTML, wrap the affected links in a <div> or <span> tag, with your yshortcuts class included: In this case it's ok to include embedded CsS styles since this fix is specific to Yahoo It will be stripped out by Gmail, where it's not needed anyway. <div class="yshortcuts"> <a href="http://company.com" style="color:#OOFF00; text-decoration:none;">Link One</a><br> IMAGES Due to the prevalence of image blocking in most email clients, you should assume that your recipient will see your email with images turned off. Be sure each image contains an alt attribute, and don't rely on an image-heavy design to convey your message. THE PERFECT WAY TO CODE IMAGES FOR HTML EMAIL: <img sro-"http://www.esp.com/images/house.gif" alt="House on Hill" width="137" height="160" style="display: block; font-family: Arial; color: #000000; font-size: 14px;" border="0"> X House on Hill PRO TIP: Include font and color properties in your <img> tag to style your alt text in some email clients. THE CHECKLIST FOR IMAGES ALT=" " .PNG "0" Design for images off. Include alt Export images as Set border attributes. GIF or JPG for attributes to zero. best results. BKGD IMGS BLOCK Add style="display: Always include height & width Use absolute Outlook 2007 block;" to images references (rather and Outlook 2010 do not support to prevent gaps under images. attributes. than relative). background images. ABSOLUTE IMAGE URL RELATIVE IMAGE URL img src="http://www.site.com/images/logo.gif"| img src="images/logo.gif" FANCY STUFF ఇట FANCY Coored Email has poor support for Flash, TypeKit, and Javascript. While animated .gifs are usually safe, Outlook 2007/2010 will only display the first frame. You'll also want to avoid using forms, surveys, or search boxes, as these are commonly disabled or display a security message to users. KNOW YOUR AUDIENCE Take advantage of opportunities to include more adventurous properties such as drop shadows or video in HTML-friendly email clients such as Apple Mail or Thunderbird. On the other hand, if your audience favors Outlook 2010, you may want to take a more conservative approach. DON'T FORGET TO TEST! Email clients are notorious for making unannounced changes that can affect rendering. Make a habit of testing every message in major email clients before sending, and don't forget about your triggered and drip campaigns, too. litmus SOURCE: LITMUS.COM www.CAMPAIGNMONITOR.COM

Email Coding 101

shared by ColumnFive on Sep 18
666 views
1 shares
0 comments
Creating HTML for email is very different than creating HTML for the web because most email clients don't offer the same support for modern web standards as web browsers do. Worse, there are no email-...

Publisher


Category

Technology
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size