How to convert PSD to HTML(The must use codes that let your creative render perfectly across all the platforms)

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, 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 Talble based design whereever you wish your build to appear on every platforms.

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. 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 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,

For example:

<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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Number of Visitors till date

  • 1,413,681

Follow Me on Twitter

%d bloggers like this: