80% of the end-user response time is spent on the front-end. (YSlow Team) By following these best practices we can have a great impact over the performance of our sites and applications. In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating. In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.

1. HTML & CSS Best Practices Veronica Rebagliatte rebagliatte.com 2011, August

2. Contents HTML A. Semantics and accessibility Declare your DocType Use relevant title and description tags Separate contents from presentation Use the most semantic markup possible Validate for html4 and check the outline for html5 Consider using microformatting B. Performance Why front-end performance matters Stylesheets at the top, scripts at the bottom Minimize HTTP requests Reduce loading time C. Maintainability and Readability

4. HTML Best Practices

5. A.Semantics and Accessibility

7. Use a relevant title and description title -> description ->

12. Tables

13. Forms

22. B. Performance

27. B. Maintainability and Readability

29. CSS Best Practices

30. A. Pick the best layout [11]

35. B. Slice with optimization in mind

36. Sprite or repeatable background? Sprites 1px wide slices for gradients patterns for repeating backgrounds Repeatable backgrounds alpha black for overlays

37. C. Master the basics

41. Box Model

44. D. Get organized

49. Thanks!