This article is for those who are well aware of HTML/CSS, PSD, and Templates… I am writing this article, in brief, gradually I may extend the content to make it more elaborate. Please share your queries under the comment section. So here it goes…
1. HTML based vs. DIV based
To make the HTML to render across email clients and browsers, a table based design is used instead of DIV based design. Using DIV based design doesn’t render in some browsers and email clients. Therefore stick to Table based design wherever you wish your build to appear on every platform.
2. Slicing the PSD horizontally rather than vertically
Once you get a Design which is obviously in the form of PSD, it’s a developer’s job to convert that design to code.
Before converting the PSD to HTML, a developer has to keep a layout in his mind. A layout has to be such that the contents are sliced horizontally rather than vertically. Slicing the PSD vertically creates problems while writing HTML code for a Web Developer so its preferred to slice horizontally.
3. Coding on Dreamweaver
After making a layout, the next step is to code the layout on HTML platform. Dreamweaver is a preferred platform to code HTML.
4. Must have properties in TDs
Make sure your TD looks like this:
Missing “align” and “valign” in the TD causes rendering issues. And width should not be in terms of percentage.
For Example: <td width=”600″ align=”left” valign=”top”>
5. Always include Display Block, alt, title, border property for all the image tags which should look like this.
<img src=” ” width=”” height=”” alt=” ” title=” ” border=”0″ style=”display: block;”>
6. Table width % or Px ?
Never declare width as 100% to the inner tables. Include 100% to the width only to the outer tables. For the inner tables you can include the width as a number. For example: width=”300”
7. For the images that are below 25px
style=”font-size: 0%;” for all the images whose height is below 25px in the TD,
<td width=”16″ align=”left” valign=”top” bgcolor=”#ffffff” style=”font-size: 0%; -webkit-text-size-adjust: none;”>height=”1″ border=”0″ alt=”” title=”” style=”display: block;”></td>
8. Always use style=”-webkit-text-size-adjust: none;” in the body
Some browsers automatically increase the size of the text to suit the browser display. To stop the browser from doing so use the property >>style=”-webkit-text-size-adjust: none;”<< which disables browsers default size rendering ability.
With the above 8 points, I stop here to continue writing more soon. Please leave your comments.