Html & CSS - Best practices 2-hour-workshop


Published on

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.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html & CSS - Best practices 2-hour-workshop

  1. 1. HTML & CSS Best Practices Veronica Rebagliatte 2011, August
  2. 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  
  3. 3. <ul><li>CSS </li></ul><ul><li>  A. Pick the best layout </li></ul><ul><ul><li>Fixed </li></ul></ul><ul><ul><li>Fluid </li></ul></ul><ul><ul><li>Elastic </li></ul></ul><ul><ul><li>Responsive </li></ul></ul><ul><li>B. Slice with optimization in mind </li></ul><ul><li>C. Master the basics </li></ul><ul><ul><li>Difference between class and ID </li></ul></ul><ul><ul><li>Precedence of selectors </li></ul></ul><ul><ul><li>Box model </li></ul></ul><ul><ul><li>Units </li></ul></ul><ul><ul><li>Colors </li></ul></ul><ul><li>D. Get organized </li></ul>
  4. 4. HTML Best Practices
  5. 5. A.Semantics and Accessibility
  6. 6. Declare your doctype <ul><li>The DocType is the &quot;Document Type Declaration&quot; </li></ul><ul><li>Browsers have 2 modes:  </li></ul><ul><ul><li>Standards-compliant mode </li></ul></ul><ul><ul><li>Quirks mode </li></ul></ul><ul><li>If you don't have a doctype, or it's outdated, or it's incomplete the browser will render your page in quirks mode. </li></ul><ul><li>There are no recipes for this, if it is HTML5, that's it. </li></ul><ul><li>If not you must choose between HTML or XHTML, declaring the version and say if it is strict or transitional. </li></ul>
  7. 7. Use a relevant title and description title -> description ->
  8. 8. Separate contents and presentation <ul><li>The same markup must potentially accept several stylesheets. Typical example: zen garden  [1] </li></ul><ul><li>This allows us to  </li></ul><ul><ul><li>Have a versatile presentation </li></ul></ul><ul><ul><li>Improve maintainability </li></ul></ul><ul><li>What about images? </li></ul><ul><ul><li>Examples of content images: </li></ul></ul><ul><ul><ul><li>Company logo </li></ul></ul></ul><ul><ul><ul><li>Article images </li></ul></ul></ul><ul><ul><li>Examples of presentational images: </li></ul></ul><ul><ul><ul><li>Icons </li></ul></ul></ul><ul><ul><ul><li>Backgrounds </li></ul></ul></ul>
  9. 9. Use semantic markup - HTML4 tags <ul><li>This will make the content accesible [2] for both humans and machines, screen-readers, search engines and other user agents. </li></ul><ul><li>Cite </li></ul><ul><li>Strong </li></ul>
  10. 10. <ul><li>Pre </li></ul><ul><li>Abbr </li></ul><ul><li>Sup and Sub </li></ul>
  11. 11. <ul><li>Lists </li></ul>
  12. 12. Tables
  13. 13. Forms
  14. 14. HTML5 <ul><li>What can I use right now? </li></ul><ul><ul><li>Simplified doctype </li></ul></ul><ul><ul><li>Simplified charset. </li></ul></ul><ul><ul><li>Simplified <script> and <style> elements. </li></ul></ul>
  15. 15. <ul><ul><li>Block level links </li></ul></ul><ul><ul><li>New <audio> and <video> media elements with graceful degradation. </li></ul></ul>
  16. 16. New Structural tags <ul><li><section>   </li></ul><ul><li>Thematic group of content.  </li></ul><ul><li><article>   </li></ul><ul><li>Self-contained, independent, reusable.  </li></ul><ul><li><aside> </li></ul><ul><li>Related content. </li></ul><ul><li><header> </li></ul><ul><li>Group of introductory or navigational elements. </li></ul><ul><li><hgroup>   </li></ul><ul><li>h1,h2,h3...h6 related to each other. </li></ul><ul><li><footer>   </li></ul><ul><li>Info about the section, author, date, copyright  </li></ul><ul><li><nav>   </li></ul><ul><li>Only for major navigational elements. </li></ul>
  17. 17. New Content tags <ul><li><figure> </li></ul><ul><li>Illustrations, diagrams, usually captioned.  </li></ul><ul><li><video>  </li></ul><ul><li><audio> </li></ul><ul><li><embed>   </li></ul><ul><li><canvas> </li></ul><ul><li>Scripts with a resolution-dependant bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. </li></ul>
  18. 18. But keep in mind deprecated tags <ul><li>They are not to be used by authors, while implementers must still provide support for these legacy elements. </li></ul><ul><ul><li>Due to presentational nature </li></ul></ul><ul><li><basefont><big><center><font> </li></ul><ul><li><s><strike><tt><u> </li></ul><ul><ul><li>Due to accessibility </li></ul></ul><ul><li><frame><frameset><noframes> </li></ul><ul><ul><li>Due to obsolescence </li></ul></ul><ul><li><acronym><applet><isindex><dir> </li></ul>
  19. 19. Validate <ul><li>The w3c validator[4] can be a useful tool for debugging. </li></ul>
  20. 20. Check the doc outline (just for   ) <ul><li>If you are coding in html5 you should also check your document outline with the  html5 outliner[5] </li></ul><ul><li>The algorithm that HTML5 uses to outline documents lets you make sure to structure the content exactly the way you want. Benefits:  Semantic, accessibility, ease of syndication It's like a TOC, the  <body>  is the root Every new section is a new item in the algorithm. If the section has a heading it is used to name it. </li></ul><ul><li>  </li></ul><ul><li>Section Tags article, aside, section, nav, h1...h6 </li></ul>
  21. 21. Consider using microformats <ul><li>&quot;Many sites are generated from structured data... search engines, can benefit greatly from direct access to this structured data... and provide richer search results.&quot;[6] </li></ul>
  22. 22. B. Performance
  23. 23. Why front-end performance matters <ul><li>&quot;80% of the end-user response time is spent on the front-end.  </li></ul><ul><li>Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.  </li></ul><ul><li>Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages&quot; </li></ul><ul><li>YSlow [8] </li></ul>
  24. 24. Put stylesheets at the top <ul><ul><li>It's what the html specification[7] recommends. </li></ul></ul><ul><ul><li>It allows the page to load progressively. </li></ul></ul><ul><ul><li>It improves UX, as the user is not faced with a blank page but a progress indicator (the actual page loading). </li></ul></ul><ul><ul><li>Never use inline styles as they make new http requests and are harder to maintain. </li></ul></ul>Put scripts at the bottom <ul><ul><li>Otherwise they will block parallel downloads. </li></ul></ul><ul><ul><li>Never use inline javascript. That's called obtrusive javascript </li></ul></ul>
  25. 25. Minimize HTTP requests <ul><ul><li>Make JS and CSS external </li></ul></ul><ul><ul><li>Use only one single stylesheet* </li></ul></ul><ul><ul><li>Compress JS and CSS files once the development stage is finished. </li></ul></ul><ul><ul><li>Use CSS Sprites </li></ul></ul><ul><ul><ul><li>Only one request and call to the image </li></ul></ul></ul><ul><ul><ul><li>Faster hover interactions, as they are preloaded. </li></ul></ul></ul><ul><li>* This is a widely adopted practice rather than an official recomendation. </li></ul>
  26. 26. Reduce loading time <ul><ul><li>Optimize your images  </li></ul></ul><ul><ul><ul><li>Try converting them to PNG </li></ul></ul></ul><ul><ul><ul><li>Use tools to reduce their size  [10] </li></ul></ul></ul><ul><ul><ul><li>Avoid scaling them </li></ul></ul></ul><ul><ul><li>Optimize your sprites </li></ul></ul><ul><ul><ul><li>Arrange them horizontally </li></ul></ul></ul><ul><ul><ul><li>Leave small gaps between the images in a sprite. </li></ul></ul></ul><ul><ul><li>When a project is finished, Minify JS and CSS with a  compressor [9]   </li></ul></ul>
  27. 27. B. Maintainability and Readability
  28. 28. Format your code properly <ul><ul><li>Indent with 4 spaces yout html </li></ul></ul><ul><ul><ul><li>To show parent-child relations </li></ul></ul></ul><ul><ul><ul><li>To emphatize hierarchy </li></ul></ul></ul><ul><ul><ul><li>To improve readability which is gold when collaborating. </li></ul></ul></ul><ul><ul><li>Lowercase your tags </li></ul></ul><ul><ul><li>Use meaningful semantic class names </li></ul></ul><ul><ul><li>Keep your code clean, less is more when adding div tags. </li></ul></ul><ul><ul><li>Use hyphens instead of underscores* </li></ul></ul><ul><li>* This is a widely adopted practice rather than an official recomendation. </li></ul>
  29. 29. CSS Best Practices
  30. 30. A. Pick the best layout  [11]
  31. 35. B. Slice with optimization  in mind
  32. 36. Sprite or repeatable background? Sprites 1px wide slices for gradients patterns for repeating backgrounds Repeatable backgrounds alpha black for overlays
  33. 37. C. Master the basics
  34. 38. Difference between class and ID <ul><li>IDs </li></ul><ul><ul><li>They are unique </li></ul></ul><ul><ul><ul><li>Each element can have only one ID </li></ul></ul></ul><ul><ul><ul><li>Each page can have only one element with that ID </li></ul></ul></ul><ul><ul><li>They can be used in URLs as anchors </li></ul></ul><ul><ul><li>IDs have more weight (for specificity) in CSS than classes. </li></ul></ul><ul><ul><li>Reference for JS through the getElementById function. </li></ul></ul><ul><li>Classes  </li></ul><ul><ul><li>Are not unique </li></ul></ul><ul><ul><ul><li>You can use the same class on multiple elements. </li></ul></ul></ul><ul><ul><ul><li>You can use multiple classes on the same element. </li></ul></ul></ul><ul><ul><li>May be used as microformats. </li></ul></ul>
  35. 39. Precedence of selectors <ul><li>It's determined by: </li></ul><ul><ul><ul><li>Specificity </li></ul></ul></ul><ul><ul><ul><li>Inheritance </li></ul></ul></ul><ul><ul><ul><li>The cascade </li></ul></ul></ul><ul><li>Specificity [12] </li></ul><ul><li>Consider a number of 4 digits: abcd which is formed joining... </li></ul><ul><li>a. count 1 if the declaration is from a 'style' attribute, else counts 0 </li></ul><ul><li>b.  counts the number of ID attributes in the selector </li></ul><ul><li>c.  count the number of other attributes in the selector </li></ul><ul><li>d.  count the number of element names and pseudo-elements in the selector </li></ul><ul><li>!important is a hack that takes precedence over all. </li></ul><ul><li>     </li></ul>
  36. 40. <ul><li>Inheritance </li></ul><ul><li>If you set a property for the parent, the child element inherits it. </li></ul><ul><li>However, not all the properties are inherited (Ex: margin, padding, border) </li></ul><ul><li>The Cascade </li></ul><ul><li>At the highest level, the cascade controls the precedence. </li></ul><ul><li>I works following this steps: </li></ul><ul><ul><li>Find all declarations matching the selector </li></ul></ul><ul><ul><li>Sort by origin (author styles, user styles, browser defaults) </li></ul></ul><ul><ul><li>Calculate specificity </li></ul></ul><ul><ul><li>If there's a draw between declarations, the last wins. Also the last stylesheets overrides the ones before it. </li></ul></ul>
  37. 41. Box Model
  38. 42. Units <ul><li>Ems (em) </li></ul><ul><li>The “em” is a scalable unit, equal to the current font-size. </li></ul><ul><li>Pixels (px) </li></ul><ul><li>Pixels are the most accurate unit. </li></ul><ul><li>They are fixed size. </li></ul><ul><li>Percent (%) </li></ul><ul><li>Much like the &quot;em&quot;. Scalable and accessible.  </li></ul><ul><li>Mostly used for blocks, than for text itself. </li></ul><ul><li>Point(pt) </li></ul><ul><li>Only for print css. </li></ul>
  39. 43. Colors <ul><li>Name </li></ul><ul><li>.my-class {color: red;} </li></ul><ul><li>Hexadecimal Value </li></ul><ul><li>.my-class {color: #FF0000;} </li></ul><ul><li>RGB Value </li></ul><ul><li>.my-class {color: rgb(255,0,0);} </li></ul>
  40. 44. D. Get organized
  41. 45. Get organized <ul><ul><li>Use meaningful names </li></ul></ul><ul><ul><li>Hyphens instead of underscores </li></ul></ul><ul><ul><li>DRY </li></ul></ul><ul><ul><ul><li>Reuse clases </li></ul></ul></ul><ul><ul><ul><li>Use shortcuts whenever possible </li></ul></ul></ul><ul><ul><ul><li>Don't specify units when the value is zero. </li></ul></ul></ul><ul><ul><li>Use a separate stylesheet for browser specific tweaks. Use conditional comments to attach them. </li></ul></ul>
  42. 46. <ul><li>5. Create your own reusable template, mine has... </li></ul><ul><ul><ul><li>Comments with name, decription, author and URI </li></ul></ul></ul><ul><ul><ul><li>Resets and/or imports </li></ul></ul></ul><ul><ul><ul><li>Pallete definition if any </li></ul></ul></ul><ul><ul><ul><li>Global Styles </li></ul></ul></ul><ul><ul><ul><li>Section-specific Styles </li></ul></ul></ul>
  43. 47. Tools <ul><ul><li>Firebug </li></ul></ul><ul><ul><li>YSlow </li></ul></ul><ul><ul><li>Pixel Perfect </li></ul></ul><ul><ul><li>CSS CheatSheets </li></ul></ul><ul><ul><li>Smush-it </li></ul></ul>
  44. 48. References <ul><li>[1]   </li></ul><ul><li>[2] </li></ul><ul><li>[3] </li></ul><ul><li>[4] </li></ul><ul><li>[5] </li></ul><ul><li>[6] </li></ul><ul><li>[7] </li></ul><ul><li>[8] </li></ul><ul><li>[9] </li></ul><ul><li>[10] </li></ul><ul><li>[11] </li></ul><ul><li>[12] </li></ul>
  45. 49. Thanks!