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.