PSD to XHTML & CSS Example
The image on the right is a screenshot of a Photoshop design for an e-commerce site (click to enlarge). A relatively complicated layout, with categories, menu items, and products that need to be pulled from a database.
The first text box below shows the original code produced for the design (NOT produced by Template Harvest).
What's wrong with the original markup:
- 11 pages long.
- Difficult to read.
- Unusable for e-commerce site.
- Overuse of tables for layout.
So the customer came to us to redo his XHTML markup and CSS. The text box at the bottom shows our code.
Improvements we made:
- Only 4 pages long.
- Categories, navigation menu items, and product boxes in self-contained units.
- 100% database scripting friendly.
- Table-less structure.
- W3C Standards-Compliant XHTML 1.0 Transitional markup.
- W3C Standards-Compliant CSS 2.1
Much better! The resulting markup and CSS we wrote produced a webpage that looked exactly the same as the Photoshop design, passed W3C Standards validation, and looked identical in all major web browsers.
