3 Tips for Effective Markup (from Zero to Hero)
Starting a new layout can sometimes seem intimidating. Translating a PSD into code can be a long process but don’t let it overwhelm you. Just keep these 3 easy steps for organizing your work in mind and deliver a cleaner solution.
- Visualize your HTML structure with no CSS to ensure the structure makes sense without any styles. Only after the markup is clean should you start adding the styles. Keep in mind that every little detail matters – if you are going to recreate it with CSS start thinking about graceful degradation for older browsers.
- Take time to perform fairly robust cross browser testing once the HTML & CSS is finished. Most of the times you’ll be more focused on older browsers like IE7 or IE8 but have in mind that most of Internet Explorer’s issues can be fixed with one or two lines of code. Don’t be discouraged if you look at your site on IE and it looks nothing like the design. Use conditional CSS for targeting IE if necessary.
- Lastly, add your JavaScript. Time for another round of cross-browser testing to see how it performs and what bugs popped up.
Bonus Tips!
- Divide your tasks into that which can be translated into CSS and that which cannot
- Consider making a sprite file to organize UI element and avoid unnecessary HTTP requests
- Don’t forget to use the new HTML5 semantic tags like header, footer, aside, nav, etc.
If you follow this layered approach to building a page you’ll minimize the amount of rework and testing required with each change. And your code will be clean and scale well. Good luck!