How to write Friendly Markup

PSD to HTML-PSD to XHTML/CSS-PSD to WordPressHelpful for front-end developers in enhancing their skills in CSS and markup


  • Cleanliness
    Organize all code (HTML/CSS/JS) readable and efficient.
  • Semantics
    Logical elements and class/ID names to be used.
  • Validation
    Validate HTML & CSS source code with the W3C Markup Validation Service. 100% valid HTML isn’t necessary but thoroughness is encouraged.

User Exerience

  • Match Original Design
    Markup should match original design as closely as possible.
  • Good Choice Points
    Smart choices – Elements that should be text are text, button is flexible, rollovers for text colors and for buttons inverse the background, accessibility is more concerned.
  • Interactions
    Even though additional states (rollovers, focus, etc) are not in the original design make sure you implement it. These should be treated in a way that is consistent with the original design.

Browser Support & Optimization

  • Modern Browser Support
    Test in: Firefox (3.6 and Latest Version), Safari (Latest Version), Chrome (Latest Version), Opera (Latest Version), and Internet Explorer 8 & 9
  • Resource Optimization
    Files, fonts, images, and code should be optimized for speed and efficiency.
  • Overall Project Size
    Can be achieved by optimizing images at the time of conversion, short-hand CSS and in jqery plugins use min.js

Before you submit the work all libraries, frameworks, javascript, images, and css must be included in the project. Do not link to external libraries or frameworks. Helps even systems not connected to the internet.

Comments are closed.