Technical Specifications & Tasks for Creating Effective HTML Emails

  • Plan your slices and table nesting
  • Slice images and optimize for web. Photos/Textures as JPGs, Icons as transparent PNGs, flatter bitmap looking images as GIFs
  • Convert as much text as possible from PSD to HTML text. Should be greater than 85% HTML text.
  • Use inline styles instead of CSS style rules
  •  Fix the breaks from Photoshop. Small “L”‘s will appear in Dreamweaver. They need to be replaced with a space or a
    depending on how the designer intended the line to break.
  • Convert curved apostrophes and quotation marks. Do a find and replace on these. Replace with manually entered versions from the keyboard.
  • Set most td cells to vertically align to the top
  • HTML list items do not work in all email clients so they need to be done as multi-column tables.
  • On paragraphs set top, left and right margins to zero. Use only bottom margins for spacing between paragraphs. Typically paragraphs will have 15px bottom spacing and headlines will have 25px margin:0 0 15px 0 Note on margin: Top Left Bottom Right

Fix for odd horizontal blocks or image misalignment:
Tag: td
CSS: font-size:1px; line-height:0; margin:0; padding:0;
Reason: It resets the font for the cell so that the image in the cell and/or empty space( ) does not get the default font applied from web based email applications (e.g. Yahoo, Gmail, Outlook.com).

Fix for images specifically in Yahoo
Tag: img
CSS: display:block

Email Marketing Guidelines (HTML)

SUBJECT LINE

  • Maximum 80 Characters
  • Most important words should appear in the first 5-7 words
  • HTML not allowed in the subject line

EMAIL CONTENT – TECHNICAL SPECIFICATIONS

  • Format: HTML
  • Maximum file size: 150KB (html + images)
  • Recommended width: 500 – 700 pixels
  • Recommended height: 500 – 1000 pixels
  • Use inline-CSS only
  • All the content must reside BETWEEN <body> and </body>

o    Some email clients purge everything outside of <body> tag, including the attributes defined in <body> tag.

  • Image formats allowed: GIF or JPEG only
  • All the graphics used must be 72dpi
  • Text: Maximum 300 words

**NOT ALLOWED**

  • Background images
  • Nested background colors
  • Flash, or other plugins
  • Javascript
  • Animated GIF
  • BMP, TIFF, and any other formats besides PNG, GIF or JPEG
  • <object>, <embed>, <form>, <style>, <script> tags
  • CSS floats, CSS positioning
  • Web Fonts as HTML, use default System fonts

DESIGN TIPS

  • Instead of using cellpadding to create margins, use <div style=”margin:5px”>.
  • All the hex numbers for colors must start with #.
  • Defined alt attribute in all the main images.
  • Include the most important message at the top of the email.
  • Use text instead of graphic for your tagline or important message.
  • The email should make sense even without the graphics for those recipient who block images by default.
  • Avoid thick borders, spam-like words, and excessively large fonts

PLEASE NOTE
There really isn’t a standard for HTML email. What appears fine in one email client doesn’t look right in another. This makes it almost impossible to create a dynamic HTML email that will display well in every email client application.
The guideline provided above will help ensure your mailing will appear as intended ( or close to it ) on major email clients such as MS Outlook 2003, MS Outlook 2007, Hotmail, Live Mail, Yahoo! Mail, Gmail, and AOL.

Different email clients have different limitations and restrictions. To list a few –

  • Outlook 2007 does not support:

o    Animated GIF, background images, nested background colors

o    CSS floats, CSS positioning

  • Yahoo! Mail and Gmail:

o    Renders only the content between <body> tags

[ Solved ]: The ‘ObjectContent`1’ type failed to serialize the response body for content type ‘application/xml; charset=utf-8’.

This Error:
The ‘ObjectContent`1’ type failed to serialize the response body for content type ‘application/xml; charset=utf-8’.

can be fixed by adding one line of code to your data model’s context class

public partial class YOURENTITYCLASS: DbContext
{
public YOURENTITY(){
base.Configuration.ProxyCreationEnabled = false;
}
...

Many times it triggers when you have foreign key constraints within your Entity Data Model.

ASP.Net State Drop Down Lists

U.S. States


--Select--
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
District of Columbia
Delaware
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming

U.S. States (abbreviated)


- See more at: http://dan.folkes.me/2011/08/09/asp-dropdownlist-states-listitem-example/#sthash.OnOXMSkf.dpuf