PSD to HTML Conversion Tips

I used to do a lot of PSD to HTML conversion back when IE6 was still dominant - and believe when I say, it WAS a headache to front end developers.

Now everything seems better and easier. Without IE6, you'd not need many small hacks or tricks here and there to make the page look exactly the same from across all major browsers. FF was always a breeze, Chrome was not born yet, and Opera played a little bit around.

All right, here are some of my tips for PSD to HTML conversion, IE6 NOT considered:

1. Be simple first, and make sure the indispensable part of your page looks consistently across all browsers. For dispensable part, add the bells and whistles that come with specific browsers. For example, CSS rounded-corner on non-IE browsers.

2. Do not use too many stylesheet files which would dramatically burden the server when the traffic spikes because the client browser makes more than one requests to the server for each page view. Use one stylesheet.

3. Don't use IDs and !important because their styles are hard to overwrite, especially when there are thousands of lines of CSS.

4. Use inline styles where appropriate. They are not evil. Use them on very specific elements that are not likely to be used elsewhere. For example, temporary styles change or occasional modifications.

5. Read the styles of famous design websites. It helps A LOT.

Keep practicing and read the best CSS books. Oh, and, I've moved from Charm HTML to Scraping Web. Feel free to reach me there.

Cloud Hosting Discounts & Coupons

Cloud hosting has come up strong. And Mosso is one of the them.

For discounts off their Cloud Sites, please visit here.

Take a PSD and slice it into front end code is trivial

It's boring, repetive and non-creative, at least most of the time. We hate it, that's why businesses exist to do the job for lazy but creative people who want to focus on just creative pieces such as page designing.

Let's face it, HTML and CSS is so simple that many people think they are able to use it to the maximum. And the fact? They fail. Most would fail the first try, in the attempt to convert an intermediate complex PSD design into fully functioning XHTML + CSS code. It's a disaster and you would get very angry with your self though with the technologies at first - Microsoft is certainly the first on such a list.

Yet it's so hard to master. To produce real quality code for any anomalous peculiarities you need years of experience.

If you are determined to do a good job in producing the most compatible XHTML / CSS code (cross-browser compatible code consistent in all major modern browsers: IE6, IE7, FF2, FF3, Opera9.5, Safari3), the simplest and most elegant code and the most semantic markup and styling, you've come to the right place. Here we are, going to learn how to convert a PSD perfectly to XHTML + CSS.

And I'm your tutor, the primary coder behind Charm HTML.