Posted by on Jun 30, 2013 in Blog

It’s not a coincident to get our final results of HTML email development always satisfying with the best quality working just fine, no bugs with less random of feedback. Through years of experiences, we could get to document our own check list collected of notes, common mistakes and specific advices for HTML email development. Like a cooking instruction book, this document is our compass that leads us to what to adopt in HTML email development and what to avoid. Those who are interested in HTML email development hopefully will find these highlights useful.

HTML email development points to adoptPoints to Adopt in HTML Email Development

Keep in mind that the right start in HTML email development will get you the right conclusion. Here are some points that you have to give them the priority in HTML email development if you want to end up right:

  • Always stick to the right starts by the standard dimensions 600px±100px with no extra solid colors.
  • When slicing images, make sure they are sliced to the minimum width and height without any extra solid color.
  • Remember to use table based in HTML email development. This is the safest option that will render the same layout in all email clients.
  • Define a parent table with one <td> cell to work as overall container instead of the body tag in normal HTML page with width 100%, and this <td> can be used to set a background color for the all email layout if it’s required.
  • Define inner table that hold all the content with specific width, which is the minimum with that fits all layout elements.
  • Well known fact; CSS should be written as inline style for each item, no CSS class definition and no <style> tag shall be used.
  • For all color code in CSS and HTML prefix them with #, some email clients will ignore the HTML properties “bgcolor” if it is missing the #.
  • For all numeric values in CSS make sure you define unite after any number which most likely will be “px”.

­­

Points to Avoid in HTML email developmentPoints to Avoid in HTML Email Development

To get more professional results, avoid a group of points in the HTML email development that may affect your final production and may get you to start it over again. Here are a series of “Avoid” list to remember in HTML email development:

  • Avoid using CSS padding and margin as much as you can, and as a safer option is to use spacer image to introduce padding and margin.
  • Background images are still not recommended in HTML emails however few hacks can be introduced in HTML to make it work in some Microsoft Outlook versions as we have done in Movenpick email.
  • Avoid using “rowspan” and “colspan” properties in TD tags. Always think of introducing a new table inside a TD when you have content separated in columns as more safe option that work across all email clients and make the HTML easier to update.
  • Avoid using the <p> tag as the margin and padding will varied in different email clients and use a spacer image instead if text alignment or spacing is needed.
  • Avoid to include any HTML comments tags like “<!—comment ‐‐>” in HTML email development.

General Advices in HTML email developmentGeneral Advices for best HTML Email Development

Here are some general points to keep in mind for the best quality HTML email development:

  • Whenever there’s an Arabic or non-Latin copy, it is a must to converted to decimal code. You may get the help of this web tool of HTML email development http://code.cside.com/3rdpage/us/unicode/converter.html.
  • Images spacers are another safe option to think of when needed which must be a transparent 10×10 pixels GIF image. The spacer image dimensions should not be 1×1 because some version of Microsoft Outlook will ignore it.
  • Make sure all <TD> have vertical alignment at the top, unless it is not required.
  • For all anchor tags <a> use absolute URLs for “href” properties.
  • For all anchor tags add target=”_blank” property to open the page in new window.
  • For all <ul> and <ol> tags make sure you sit a proper padding and margins in CSS and don’t leave it to the browser default.

HTML Email development testingTesting HTML Email Development

Sticking to the above points and instructions during the HTML email development made the testing phase very fast as it can be done quickly with the very less rounds of changes. Testing email is a must for each single step. Of course this will take even more time if you are going to check it manually in each device and browser. Therefore, for a quick and easy testing, I recommend the https://litmus.com/ website which offers multi options for quick and easy HTML email development.

Like how we think? Lets Collaborate!