html & css - best practices 2-hour-workshop
DESCRIPTION
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.TRANSCRIPT
HTML & CSSBest Practices
Veronica Rebagliatterebagliatte.com 2011, August
Contents HTML A. Semantics and accessibilityDeclare your DocTypeUse relevant title and description tagsSeparate contents from presentationUse the most semantic markup possibleValidate for html4 and check the outline for html5Consider using microformattingB. PerformanceWhy front-end performance mattersStylesheets at the top, scripts at the bottomMinimize HTTP requestsReduce loading timeC. Maintainability and Readability
CSS A. Pick the best layout• Fixed• Fluid• Elastic• Responsive
B. Slice with optimization in mindC. Master the basics• Difference between class and ID• Precedence of selectors• Box model• Units• Colors
D. Get organized
HTMLBest Practices
A.Semantics and Accessibility
Declare your doctype
The DocType is the "Document Type Declaration"
Browsers have 2 modes: • Standards-compliant mode• Quirks mode
If you don't have a doctype, or it's outdated, or it's incomplete the browser will render your page in quirks mode.
There are no recipes for this, if it is HTML5, that's it.If not you must choose between HTML or XHTML, declaring the version and say if it is strict or transitional.
Use a relevant title and description
title ->
description ->
Separate contents and presentation
The same markup must potentially accept several stylesheets. Typical example: zen garden [1]
This allows us to • Have a versatile presentation• Improve maintainability
What about images?• Examples of content images:
o Company logoo Article images
• Examples of presentational images:o Iconso Backgrounds
Use semantic markup - HTML4 tagsThis will make the content accesible [2] for both humans and machines, screen-readers, search engines and other user agents.
Cite
Strong
Pre
Abbr
Sup and Sub
Lists
Tables
Forms
HTML5What can I use right now?
• Simplified doctype
• Simplified charset.
• Simplified <script> and <style> elements.
• Block level links
• New <audio> and <video> media elements with graceful degradation.
New Structural tags
<section> Thematic group of content. <article> Self-contained, independent, reusable. <aside>Related content.
<header>Group of introductory or navigational elements.
<hgroup> h1,h2,h3...h6 related to each other.
<footer> Info about the section, author, date, copyright
<nav> Only for major navigational elements.
New Content tags
<figure>Illustrations, diagrams, usually captioned. <video> <audio><embed>
<canvas>Scripts with a resolution-dependant bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.
But keep in mind deprecated tags
They are not to be used by authors, while implementers must still provide support for these legacy elements.• Due to presentational nature<basefont><big><center><font><s><strike><tt><u>
• Due to accessibility<frame><frameset><noframes>
• Due to obsolescence<acronym><applet><isindex><dir>
Validate
The w3c validator[4] can be a useful tool for debugging.
Check the doc outline (just for )If you are coding in html5 you should also check your document outline with the html5 outliner[5]
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 rootEvery new section is a new item in the algorithm.If the section has a heading it is used to name it. Section Tagsarticle, aside, section, nav, h1...h6
Consider using microformats
"Many sites are generated from structured data... search engines, can benefit greatly from direct access to this structured data... and provide richer search results." Shema.org[6]
B. Performance
Why front-end performance matters
"80% of the end-user response time is spent on the front-end.
Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.
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"
YSlow [8]
Put stylesheets at the top• It's what the html specification[7] recommends.• It allows the page to load progressively.• It improves UX, as the user is not faced with a blank page
but a progress indicator (the actual page loading).• Never use inline styles as they make new http requests
and are harder to maintain.
Put scripts at the bottom
• Otherwise they will block parallel downloads.• Never use inline javascript. That's called obtrusive
javascript
Minimize HTTP requests
• Make JS and CSS external• Use only one single stylesheet*• Compress JS and CSS files once the development stage is
finished.• Use CSS Sprites
o Only one request and call to the imageo Faster hover interactions, as they are preloaded.
* This is a widely adopted practice rather than an official recomendation.
Reduce loading time
• Optimize your images o Try converting them to PNGo Use tools to reduce their size [10]o Avoid scaling them
• Optimize your spriteso Arrange them horizontallyo Leave small gaps between the images in a sprite.
• When a project is finished, Minify JS and CSS with a compressor [9]
B. Maintainability and Readability
Format your code properly
• Indent with 4 spaces yout htmlo To show parent-child relationso To emphatize hierarchyo To improve readability which is gold when collaborating.
• Lowercase your tags• Use meaningful semantic class names• Keep your code clean, less is more when adding div tags.• Use hyphens instead of underscores*
* This is a widely adopted practice rather than an official recomendation.
CSSBest Practices
A. Pick the best layout [11]
B. Slice with optimization in mind
Sprite or repeatable background?
Sprites
1px wide slices for gradients
patterns for repeating backgrounds
Repeatable backgrounds
alpha black for overlays
C. Master the basics
Difference between class and ID
IDs• They are unique
o Each element can have only one IDo Each page can have only one element with that ID
• They can be used in URLs as anchors• IDs have more weight (for specificity) in CSS than
classes.• Reference for JS through the getElementById function.
Classes • Are not unique
o You can use the same class on multiple elements.o You can use multiple classes on the same element.
• May be used as microformats.
Precedence of selectors
It's determined by:1.Specificity• Inheritance• The cascade
Specificity [12]Consider a number of 4 digits: abcd which is formed joining...
a. count 1 if the declaration is from a 'style' attribute, else counts 0b. counts the number of ID attributes in the selectorc. count the number of other attributes in the selectord. count the number of element names and pseudo-elements in the selector!important is a hack that takes precedence over all.
InheritanceIf you set a property for the parent, the child element inherits it.However, not all the properties are inherited (Ex: margin, padding, border)
The CascadeAt the highest level, the cascade controls the precedence.I works following this steps:
1. Find all declarations matching the selector– Sort by origin (author styles, user styles, browser defaults)– Calculate specificity– If there's a draw between declarations, the last wins. Also
the last stylesheets overrides the ones before it.
Box Model
Units
Ems (em)The “em” is a scalable unit, equal to the current font-size.
Pixels (px)Pixels are the most accurate unit.They are fixed size.
Percent (%)Much like the "em". Scalable and accessible. Mostly used for blocks, than for text itself.
Point(pt)Only for print css.
Colors
Name.my-class {color: red;}
Hexadecimal Value.my-class {color: #FF0000;}
RGB Value.my-class {color: rgb(255,0,0);}
D. Get organized
Get organized
1. Use meaningful names2. Hyphens instead of underscores3. DRY
1.Reuse clases2.Use shortcuts whenever possible3.Don't specify units when the value is zero.
4. Use a separate stylesheet for browser specific tweaks. Use conditional comments to attach them.
5. Create your own reusable template, mine has...1.Comments with name, decription, author and URI• Resets and/or imports• Pallete definition if any• Global Styles• Section-specific Styles
Tools
• Firebug• YSlow• Pixel Perfect• CSS CheatSheets• Smush-it
References[1] http://www.csszengarden.com/ [2] http://www.w3.org/WAI/intro/accessibility.php[3] http://caniuse.com/[4] http://validator.w3.org/[5] http://gsnedders.html5.org/outliner/[6] http://schema.org/[7] http://www.w3.org/TR/html401/[8] http://developer.yahoo.com/performance/rules.html[9] http://developer.yahoo.com/yui/compressor/[10] http://www.smushit.com/ysmush.it/[11] http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/[12] http://www.w3.org/TR/CSS2/cascade.html#specificity
Thanks!