Html & CSS - Best practices 2-hour-workshop
-
Upload
veronica-rebagliatte -
Category
Technology
-
view
5.530 -
download
0
description
Transcript of Html & CSS - Best practices 2-hour-workshop
![Page 1: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/1.jpg)
HTML & CSSBest Practices
Veronica Rebagliatterebagliatte.com 2011, August
![Page 2: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/2.jpg)
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
![Page 3: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/3.jpg)
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
![Page 4: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/4.jpg)
HTMLBest Practices
![Page 5: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/5.jpg)
A.Semantics and Accessibility
![Page 6: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/6.jpg)
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.
![Page 7: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/7.jpg)
Use a relevant title and description
title ->
description ->
![Page 8: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/8.jpg)
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
![Page 9: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/9.jpg)
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
![Page 10: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/10.jpg)
Pre
Abbr
Sup and Sub
![Page 11: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/11.jpg)
Lists
![Page 12: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/12.jpg)
Tables
![Page 13: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/13.jpg)
Forms
![Page 14: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/14.jpg)
HTML5What can I use right now?
• Simplified doctype
• Simplified charset.
• Simplified <script> and <style> elements.
![Page 15: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/15.jpg)
• Block level links
• New <audio> and <video> media elements with graceful degradation.
![Page 16: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/16.jpg)
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.
![Page 17: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/17.jpg)
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.
![Page 18: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/18.jpg)
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>
![Page 19: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/19.jpg)
Validate
The w3c validator[4] can be a useful tool for debugging.
![Page 20: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/20.jpg)
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
![Page 21: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/21.jpg)
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]
![Page 22: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/22.jpg)
B. Performance
![Page 23: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/23.jpg)
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]
![Page 24: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/24.jpg)
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
![Page 25: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/25.jpg)
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.
![Page 26: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/26.jpg)
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]
![Page 27: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/27.jpg)
B. Maintainability and Readability
![Page 28: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/28.jpg)
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.
![Page 29: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/29.jpg)
CSSBest Practices
![Page 30: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/30.jpg)
A. Pick the best layout [11]
![Page 31: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/31.jpg)
![Page 32: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/32.jpg)
![Page 33: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/33.jpg)
![Page 34: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/34.jpg)
![Page 35: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/35.jpg)
B. Slice with optimization in mind
![Page 36: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/36.jpg)
Sprite or repeatable background?
Sprites
1px wide slices for gradients
patterns for repeating backgrounds
Repeatable backgrounds
alpha black for overlays
![Page 37: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/37.jpg)
C. Master the basics
![Page 38: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/38.jpg)
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.
![Page 39: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/39.jpg)
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.
![Page 40: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/40.jpg)
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.
![Page 41: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/41.jpg)
Box Model
![Page 42: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/42.jpg)
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.
![Page 43: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/43.jpg)
Colors
Name.my-class {color: red;}
Hexadecimal Value.my-class {color: #FF0000;}
RGB Value.my-class {color: rgb(255,0,0);}
![Page 44: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/44.jpg)
D. Get organized
![Page 45: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/45.jpg)
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.
![Page 46: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/46.jpg)
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
![Page 47: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/47.jpg)
Tools
• Firebug• YSlow• Pixel Perfect• CSS CheatSheets• Smush-it
![Page 48: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/48.jpg)
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
![Page 49: Html & CSS - Best practices 2-hour-workshop](https://reader033.fdocuments.in/reader033/viewer/2022061118/545ca616b0af9fb32c8b4a61/html5/thumbnails/49.jpg)
Thanks!