SlideShare a Scribd company logo

HTML CSS Best Practices

•
•
H
hoctudau

Đặng Minh Tuấn presents best practices for HTML and CSS. He outlines 10 rules: make code skinable, sensible, simple, semantic, fast, standard-compliant, safe with fallbacks, well-structured, continually studied, and smart about breaking rules when needed. The presentation provides examples of good and bad code for each rule and emphasizes separating structure from style using CSS over HTML attributes.

Related slideshows

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
1 of 56
Download to read offline
HTML & CSS Best Practices Presenter: Đặng Minh Tuấn aka. ohisee from: hoctudau.com
About Presenter - Who am I? Fullname: Đặng Minh Tuấn Worked for: • 2010: HocTuDau.com - http://hoctudau.com/ • 2008 - 2010: Aprotrain Aptech - http://www.aptech-news.com/ • 2008: NAISCORP - http://socbay.com/ • 2003 - 2008: Many IT Companies Trained HTML, CSS in: • NAISCORP - http://socbay.com/ • Vietsoftware International - http://www.vsi-international.com/ • VNEXT - http://vnext.vn/ • VietNamBiz - http://www.vietnambiz.com/ • Hanoi PHP Day 2008, 2009, 2010 Programming: • Clientside o HTML o CSS o Javascript • Serverside o PHP o MySQL http://hoctudau.com/slides/html-css-best-practices/
About HTML, CSS - What is this? If a browser is a worker and a web page is a house then contents are bricks, HTML elements are divisions, and CSS is paint. http://hoctudau.com/slides/html-css-best-practices/
About HTML, CSS - How and Who? How they grow up? Who has been "playing" with them? • Web Designer > CSSer > Javascripter > Serversider o http://hoctudau.com/slides/web-pro http://hoctudau.com/slides/html-css-best-practices/
About this Presentation - It is ... ... for one who • know what is HTML, CSS • and has been working with HTML, CSS daily and want to make better code ... not for one who • don't know or don't care about HTML, CSS • or still working with HTML, CSS (and may get thing done) but don't want to make better code http://hoctudau.com/slides/html-css-best-practices/
About this Presentation - legends Wrong = Something you should not do in almost cases. Acceptable = Something you should not do in some cases Right = Something you should do in almost cases. http://hoctudau.com/slides/html-css-best-practices/
10 Rules of Ss – Skinable – Sensible – Simple – Semantic – Speed – Standard – Safe – Structural – Study – Smart About this Presentation - structure http://hoctudau.com/slides/html-css-best-practices/
Ready?
1. Skinable
Skinable - definition Skinable = Changeable and Flexible Skin (Style) http://hoctudau.com/slides/html-css-best-practices/
Skinable - examples Wrong <h1><u><i>Heading</i></u></h1> Right <style> h1 { font-style: italic; text-decoration: underline; } </style> <h1>Heading</h1> http://hoctudau.com/slides/html-css-best-practices/
Skinable - examples Wrong <p> <img src="image.jpg" align="left"> Hoctudau.com ... </p> Right <style> .thumbnail { float: left; } </style> <p> <img src="image.jpg" class="thumbnail"> Hoctudau.com ... </p> http://hoctudau.com/slides/html-css-best-practices/
Skinable - examples Wrong <table> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> <tr> <td bgcolor=red width=100 height=300> ... </td> <td bgcolor=red width=400 height=300> ... </td> </tr> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> </table> Right <link rel="stylesheet" href="style.css"> <div id="header"> <div id="sidebar"> <div id="content"> <div id="footer"> http://hoctudau.com/slides/html-css-best-practices/
Skinable - examples Wrong <ul style="padding-left: 5px" > Right CSS (styles.css) #menu { padding-left: 5px; } HTML (index.php) <ul id="menu"> http://hoctudau.com/slides/html-css-best-practices/
Skinable - best practices • Separate Data (Structure) from Style (Presentation) and Behavior (Themeable) o Don't use HTML/XHTML Deprecated Tags and Attributes and avoid presentational Tags. Use CSS instead  http://www.tutorialspoint.com/html/html_deprecated_tags.htm  Link Note: <center> can be replaced by : margin: 0 auto; width: ... and text-align: ... • Take a (careful) look at: CSS Zen garden - http://www.csszengarden.com/ o One HTML Structure create Many Beautiful and different Interfaces by using many different CSS files. • TEAM NOTE: o Train this rule first! http://hoctudau.com/slides/html-css-best-practices/
2. Sensible
Sensible - definition Sensible = understandable • Somebody need to understand your code • You need to understand ... your code after a long time http://hoctudau.com/slides/html-css-best-practices/
Sensible - examples Wrong <div id="xxx"> <p class="abc"> <div id="middle-left-and-then- a-little-lower"> Right <div id="header"> <div id="left_column"> <div id="sidebar"> <p class="first"> <p class="intro"> <div class="section"> http://hoctudau.com/slides/html-css-best-practices/
Sensible - best practices • Give id and class right spelling and understandable names. • Know some kinds of naming - http://sixrevisions.com/css/css-tips/css-tip-2-structural- naming-convention-in-css/ o Prefer structural name: describe what elements are  header  sidebar o to styling (presentational) name: describe how element look like  right_column  red_link • Comment (in HTML, CSS) when needed o to explain the reason (why?) • TEAM NOTE: o Build a Naming Convention for common Web UI elements  http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html http://hoctudau.com/slides/html-css-best-practices/
3. Simple
Simple - definition Simpler = Shorter • Less code to type • Less code to read • Less data to send http://hoctudau.com/slides/html-css-best-practices/
Simple - examples Wrong <ul> <li class="active_menu_item" <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> </ul> Right <ul id="menu"> <li class="active"> <li> <li> <li> <li> <li> <li> </ul> http://hoctudau.com/slides/html-css-best-practices/
Simple - examples Wrong <div> <div> <div> <h1> <div>heading</div><br></h1> <div> <div> paragraph<br> <div> paragraph </div> <br><br> </div> </div> </div> </div> </div> Right <div> <h1>heading</h1> <p> paragraph </p> <p> paragraph </p> </div> http://hoctudau.com/slides/html-css-best-practices/
Simple - best practices • Naming short enough to keep it sensible • Good CSS skills enough to: o know how to use CSS Selector  http://www.w3.org/TR/CSS2/selector.html  html selector  id selector  class selector  descendant selector o avoid classitis o use CSS Shorthand o keep as little as nested elements as possible. o know how to solve issues by adding more CSS instead of HTML • TEAM NOTE: o require and train better CSS skill for team member o train this rule http://hoctudau.com/slides/html-css-best-practices/
4. Semantic
Semantic - definition Semantic = Software can understand your code. so your web is accessible for all people. = Search engine can understand your code so your web has better SEO Warning: Semantic is sometimes not simple! http://hoctudau.com/slides/html-css-best-practices/
Semantic - examples Wrong <div class="heading1"> <div class="heading2"> <div class="paragraph"> Right <h1> <h2> <p> Right (but complex or not good supported) <abbr class="dtstart" title="2001-01-15T14:00:00+06:00">2</abbr>- <abbr class="dtend" title="2001-01-15T16:00:00+06:00">4</abbr> <section> Acceptable <p>2-4pm</p> <div class="section"> http://hoctudau.com/slides/html-css-best-practices/
Semantic - best practices • Use Right Tags for Right Jobs. Don't misuse any element. Don't create a tag soup. o div (divitis?) o table (tableless layout?) o ul, li (divless?) • Learn elements semantic o HTML References  http://www.w3schools.com/html5/html5_reference.asp o Semantically styling breadcrumbs  http://kumpunen.com/?p=125 o Learn some others' data formart Microformat, Microdata, RDF, etc., • TEAM NOTE: o Build a Common Semantic List http://hoctudau.com/slides/html-css-best-practices/
5. Speed
Speed for the Web Faster = Users load your web faster = Users feel more comfortable = Your web can satisfy more users What affect web speed? • Request time • Server processing time • Data Transfer time • Web Rendering time • Client processing time Warning: Faster is not always better http://hoctudau.com/slides/html-css-best-practices/
Speed - examples Wrong * { margin: 0; padding: 0; } Right: use a good CSS reset file http://hoctudau.com/slides/html-css-best-practices/
Speed - best practices Learn how the browser request and render your web • Web Performance Best Practices — http://code.google.com/ speed/page-speed/docs/rules_intro.html • Best Practices for Speeding Up Your Web Site - http://developer.yahoo.com/performance/rules.html • Some Tools - http://code.google.com/speed/tools.html • TEAM NOTE: o Hire a Clientside Ninja Note: Speed has its cost • Learning about performances is hard • Implement what you learn is even harder • "Speedy" code is usually complex http://hoctudau.com/slides/html-css-best-practices/
6. Standard
Standard - definition http://en.wikipedia.org/wiki/Web_standards Web standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods http://www.w3.org/ Create & develope Web Standards http://www.webstandards.org/ Fighting for Web Standards http://w3schools.com/ Teach http://hoctudau.com/slides/html-css-best-practices/
Standard - examples Wrong <div> <p> example paragraph </div> </p> Right <div> <p> example paragraph </p> </div> http://hoctudau.com/slides/html-css-best-practices/
Standard - best practices • Read the Specification o World Wide Web Consortium (W3C) - http://www.w3.org/ o Learn DTD - http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd • Learn about the mission of fighting for standard o http://www.webstandards.org/about/mission/ • Know how to use online and offline validator o online HTML, XHTML validator - http://validator.w3.org/ o online CSS validator - http://jigsaw.w3.org/css-validator/ o Firefox Addon HTML validator - https://addons.mozilla.org/en- US/firefox/addon/249/ • TEAM NOTE: o Validation is a must in training progress. Good News: Browsers are more and more supporting Web Standards http://hoctudau.com/slides/html-css-best-practices/ Bad News: Good things (?) can break standards
7. Safe
Safe (fallback) - definition Everything can be in trouble but If we care enough, troubles can become less troubles or become good chances! http://hoctudau.com/slides/html-css-best-practices/
Safe Fallback - examples Wrong <img src="hoctudau.png" /> #header { background: url(header.png); color: white; } Right <img src="hoctudau.png" alt="hoctudau.com" title="hoctudau.com" /> #header { background: black url(header.png); color: white; } http://hoctudau.com/slides/html-css-best-practices/
Safe Fallback - best practices • Follow Web Standard o use alt in img element • Think about the failures o image doesn't work? o CSS doesn't work? Some CSS rules don't work? o JS doesn't work? Some JS functions don't work? o frame, iframe don't work? o Flash doesn't work? • Bulletproof o Ebook: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS • TEAM NOTE: o train this rule. http://hoctudau.com/slides/html-css-best-practices/
8. Structural
Structural - definition Structural = good organized http://hoctudau.com/slides/html-css-best-practices/
Structural - examples Wrong (development phase) style.css john.css Right (development phase) reset.css debug.css layout.css http://hoctudau.com/slides/html-css-best-practices/
Structural - best practices • Separate 2 phases: development and deployment (production) o minified, combined css (js) files in deployment phase • Separate 2 types of files structure in development phase o top down  debug.css  reset.css  layout.css  typo.css o bottom up  reset.css  layout.css  menu.css - menu_debug.css  infobox.css - infobox_debug.css • TEAM NOTE: o Study: OOCSS and CSS Frameworks o Build a CSS Libary http://hoctudau.com/slides/html-css-best-practices/
9. Study
Study - definition Study = Explore, Seach, Ask, Learn, Store, Bookmark, Remember by Heart http://hoctudau.com/slides/html-css-best-practices/
Study - examples Right google: IE6 common bug • http://www.virtuosimedia.com/tutorials/ultimate-ie6- cheatsheet-how-to-fix-25-internet-explorer-6-bugs http://hoctudau.com/slides/html-css-best-practices/
Study - best practices • Learn when and how to google o Learn English o Learn to generalize (expand) and specialize (restric) search results  double text vs IE6 double text vs IE6 common bugs • Bookmark useful link o http://jhop.me/ie8-bugs • Read useful Webs and Blogs o http://www.smashingmagazine.com/ • TEAM NOTE: o share bookmark and experience between team member http://hoctudau.com/slides/html-css-best-practices/
10. Smart
Smart - definition Smart people follow the targets, not the rules! Sometimes we should break the rules! Warning: We have to learn to follow the rules before learning to break them! http://hoctudau.com/slides/html-css-best-practices/
Smart - examples Wrong Try to make a perfect quality web when lacking of resources Right Think about what you want, but do what you can. Sometimes you should make an art, but sometimes you need money first. http://hoctudau.com/slides/html-css-best-practices/
Smart - best practices • Thinking about your target before thinking about the other rules o Sometimes you have to break some rules to follow other (more important) rules  "kill" speed to "save" simple  or "kill" simple to "save" speed  kill "semantic" to save "simple" and "time" • When needed, you can use anything o Table Layout  Softwares: Dreamweaver, Photoshop o HTML Frameworks  Baker Ebook Framework o HTML Generator, Editor  Zen Coding (not Zend) o CSS Frameworks  YUI, Blue Prints, 960gs o CSS Generators  SASS, LESS • TEAM NOTE: Look ahead and prepare for future http://hoctudau.com/slides/html-css-best-practices/
Want to learn more? Google: CSS best practices • Be a CSS Team Player: CSS Best Practices for Team-Based Development o http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx • 9 CSS Best Practices You Need to Know o http://fwebde.com/css/css-best-practices/ • 30 CSS Best Practices for Beginners o http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for- beginners/ Google: HTML best practices • 20 HTML Best Practices You Should Follow o http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/ Note again: Follow your targets and apply others' rules smartly
Good HTML, CSS Showcases • Deliver WOW Through Service o http://about.zappos.com/our-unique-culture/zappos-core-values/deliver- wow-through-service • Chris Shiflett: Blog o http://shiflett.org/blog • Webkit CSS Transformers Top Trumps o http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html • CSS Media Queries Sidebar o http://css-tricks.com/examples/MediaQueriesSidebar/ • The Official Site of Bill Gates - The Gates Notes o http://www.thegatesnotes.com/Default.aspx • About | Mozilla Messaging o http://www.mozillamessaging.com/en-US/about/ • Simon Collison | Colly | The Celebrated Miscellany o http://colly.com/ • World Wide Web Consortium (W3C) o http://www.w3.org/
Good HTML, CSS Showcases Web Applications • Wordpress • VBB 4.x
The End Q&A Sponsored by HocTuDau.com Avarage Score of HTML, CSS Code of some famous websites in Rule of Ss Scale? This slide is available online at: http://hoctudau.com/slides/html-css-best-practices/

More Related Content

HTML CSS Best Practices

  • 1. HTML & CSS Best Practices Presenter: Đặng Minh Tuấn aka. ohisee from: hoctudau.com
  • 2. About Presenter - Who am I? Fullname: Đặng Minh Tuấn Worked for: • 2010: HocTuDau.com - http://hoctudau.com/ • 2008 - 2010: Aprotrain Aptech - http://www.aptech-news.com/ • 2008: NAISCORP - http://socbay.com/ • 2003 - 2008: Many IT Companies Trained HTML, CSS in: • NAISCORP - http://socbay.com/ • Vietsoftware International - http://www.vsi-international.com/ • VNEXT - http://vnext.vn/ • VietNamBiz - http://www.vietnambiz.com/ • Hanoi PHP Day 2008, 2009, 2010 Programming: • Clientside o HTML o CSS o Javascript • Serverside o PHP o MySQL http://hoctudau.com/slides/html-css-best-practices/
  • 3. About HTML, CSS - What is this? If a browser is a worker and a web page is a house then contents are bricks, HTML elements are divisions, and CSS is paint. http://hoctudau.com/slides/html-css-best-practices/
  • 4. About HTML, CSS - How and Who? How they grow up? Who has been "playing" with them? • Web Designer > CSSer > Javascripter > Serversider o http://hoctudau.com/slides/web-pro http://hoctudau.com/slides/html-css-best-practices/
  • 5. About this Presentation - It is ... ... for one who • know what is HTML, CSS • and has been working with HTML, CSS daily and want to make better code ... not for one who • don't know or don't care about HTML, CSS • or still working with HTML, CSS (and may get thing done) but don't want to make better code http://hoctudau.com/slides/html-css-best-practices/
  • 6. About this Presentation - legends Wrong = Something you should not do in almost cases. Acceptable = Something you should not do in some cases Right = Something you should do in almost cases. http://hoctudau.com/slides/html-css-best-practices/
  • 7. 10 Rules of Ss – Skinable – Sensible – Simple – Semantic – Speed – Standard – Safe – Structural – Study – Smart About this Presentation - structure http://hoctudau.com/slides/html-css-best-practices/
  • 10. Skinable - definition Skinable = Changeable and Flexible Skin (Style) http://hoctudau.com/slides/html-css-best-practices/
  • 11. Skinable - examples Wrong <h1><u><i>Heading</i></u></h1> Right <style> h1 { font-style: italic; text-decoration: underline; } </style> <h1>Heading</h1> http://hoctudau.com/slides/html-css-best-practices/
  • 12. Skinable - examples Wrong <p> <img src="image.jpg" align="left"> Hoctudau.com ... </p> Right <style> .thumbnail { float: left; } </style> <p> <img src="image.jpg" class="thumbnail"> Hoctudau.com ... </p> http://hoctudau.com/slides/html-css-best-practices/
  • 13. Skinable - examples Wrong <table> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> <tr> <td bgcolor=red width=100 height=300> ... </td> <td bgcolor=red width=400 height=300> ... </td> </tr> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> </table> Right <link rel="stylesheet" href="style.css"> <div id="header"> <div id="sidebar"> <div id="content"> <div id="footer"> http://hoctudau.com/slides/html-css-best-practices/
  • 14. Skinable - examples Wrong <ul style="padding-left: 5px" > Right CSS (styles.css) #menu { padding-left: 5px; } HTML (index.php) <ul id="menu"> http://hoctudau.com/slides/html-css-best-practices/
  • 15. Skinable - best practices • Separate Data (Structure) from Style (Presentation) and Behavior (Themeable) o Don't use HTML/XHTML Deprecated Tags and Attributes and avoid presentational Tags. Use CSS instead  http://www.tutorialspoint.com/html/html_deprecated_tags.htm  Link Note: <center> can be replaced by : margin: 0 auto; width: ... and text-align: ... • Take a (careful) look at: CSS Zen garden - http://www.csszengarden.com/ o One HTML Structure create Many Beautiful and different Interfaces by using many different CSS files. • TEAM NOTE: o Train this rule first! http://hoctudau.com/slides/html-css-best-practices/
  • 17. Sensible - definition Sensible = understandable • Somebody need to understand your code • You need to understand ... your code after a long time http://hoctudau.com/slides/html-css-best-practices/
  • 18. Sensible - examples Wrong <div id="xxx"> <p class="abc"> <div id="middle-left-and-then- a-little-lower"> Right <div id="header"> <div id="left_column"> <div id="sidebar"> <p class="first"> <p class="intro"> <div class="section"> http://hoctudau.com/slides/html-css-best-practices/
  • 19. Sensible - best practices • Give id and class right spelling and understandable names. • Know some kinds of naming - http://sixrevisions.com/css/css-tips/css-tip-2-structural- naming-convention-in-css/ o Prefer structural name: describe what elements are  header  sidebar o to styling (presentational) name: describe how element look like  right_column  red_link • Comment (in HTML, CSS) when needed o to explain the reason (why?) • TEAM NOTE: o Build a Naming Convention for common Web UI elements  http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html http://hoctudau.com/slides/html-css-best-practices/
  • 21. Simple - definition Simpler = Shorter • Less code to type • Less code to read • Less data to send http://hoctudau.com/slides/html-css-best-practices/
  • 22. Simple - examples Wrong <ul> <li class="active_menu_item" <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> </ul> Right <ul id="menu"> <li class="active"> <li> <li> <li> <li> <li> <li> </ul> http://hoctudau.com/slides/html-css-best-practices/
  • 24. Simple - best practices • Naming short enough to keep it sensible • Good CSS skills enough to: o know how to use CSS Selector  http://www.w3.org/TR/CSS2/selector.html  html selector  id selector  class selector  descendant selector o avoid classitis o use CSS Shorthand o keep as little as nested elements as possible. o know how to solve issues by adding more CSS instead of HTML • TEAM NOTE: o require and train better CSS skill for team member o train this rule http://hoctudau.com/slides/html-css-best-practices/
  • 26. Semantic - definition Semantic = Software can understand your code. so your web is accessible for all people. = Search engine can understand your code so your web has better SEO Warning: Semantic is sometimes not simple! http://hoctudau.com/slides/html-css-best-practices/
  • 27. Semantic - examples Wrong <div class="heading1"> <div class="heading2"> <div class="paragraph"> Right <h1> <h2> <p> Right (but complex or not good supported) <abbr class="dtstart" title="2001-01-15T14:00:00+06:00">2</abbr>- <abbr class="dtend" title="2001-01-15T16:00:00+06:00">4</abbr> <section> Acceptable <p>2-4pm</p> <div class="section"> http://hoctudau.com/slides/html-css-best-practices/
  • 28. Semantic - best practices • Use Right Tags for Right Jobs. Don't misuse any element. Don't create a tag soup. o div (divitis?) o table (tableless layout?) o ul, li (divless?) • Learn elements semantic o HTML References  http://www.w3schools.com/html5/html5_reference.asp o Semantically styling breadcrumbs  http://kumpunen.com/?p=125 o Learn some others' data formart Microformat, Microdata, RDF, etc., • TEAM NOTE: o Build a Common Semantic List http://hoctudau.com/slides/html-css-best-practices/
  • 30. Speed for the Web Faster = Users load your web faster = Users feel more comfortable = Your web can satisfy more users What affect web speed? • Request time • Server processing time • Data Transfer time • Web Rendering time • Client processing time Warning: Faster is not always better http://hoctudau.com/slides/html-css-best-practices/
  • 31. Speed - examples Wrong * { margin: 0; padding: 0; } Right: use a good CSS reset file http://hoctudau.com/slides/html-css-best-practices/
  • 32. Speed - best practices Learn how the browser request and render your web • Web Performance Best Practices — http://code.google.com/ speed/page-speed/docs/rules_intro.html • Best Practices for Speeding Up Your Web Site - http://developer.yahoo.com/performance/rules.html • Some Tools - http://code.google.com/speed/tools.html • TEAM NOTE: o Hire a Clientside Ninja Note: Speed has its cost • Learning about performances is hard • Implement what you learn is even harder • "Speedy" code is usually complex http://hoctudau.com/slides/html-css-best-practices/
  • 34. Standard - definition http://en.wikipedia.org/wiki/Web_standards Web standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods http://www.w3.org/ Create & develope Web Standards http://www.webstandards.org/ Fighting for Web Standards http://w3schools.com/ Teach http://hoctudau.com/slides/html-css-best-practices/
  • 35. Standard - examples Wrong <div> <p> example paragraph </div> </p> Right <div> <p> example paragraph </p> </div> http://hoctudau.com/slides/html-css-best-practices/
  • 36. Standard - best practices • Read the Specification o World Wide Web Consortium (W3C) - http://www.w3.org/ o Learn DTD - http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd • Learn about the mission of fighting for standard o http://www.webstandards.org/about/mission/ • Know how to use online and offline validator o online HTML, XHTML validator - http://validator.w3.org/ o online CSS validator - http://jigsaw.w3.org/css-validator/ o Firefox Addon HTML validator - https://addons.mozilla.org/en- US/firefox/addon/249/ • TEAM NOTE: o Validation is a must in training progress. Good News: Browsers are more and more supporting Web Standards http://hoctudau.com/slides/html-css-best-practices/ Bad News: Good things (?) can break standards
  • 38. Safe (fallback) - definition Everything can be in trouble but If we care enough, troubles can become less troubles or become good chances! http://hoctudau.com/slides/html-css-best-practices/
  • 39. Safe Fallback - examples Wrong <img src="hoctudau.png" /> #header { background: url(header.png); color: white; } Right <img src="hoctudau.png" alt="hoctudau.com" title="hoctudau.com" /> #header { background: black url(header.png); color: white; } http://hoctudau.com/slides/html-css-best-practices/
  • 40. Safe Fallback - best practices • Follow Web Standard o use alt in img element • Think about the failures o image doesn't work? o CSS doesn't work? Some CSS rules don't work? o JS doesn't work? Some JS functions don't work? o frame, iframe don't work? o Flash doesn't work? • Bulletproof o Ebook: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS • TEAM NOTE: o train this rule. http://hoctudau.com/slides/html-css-best-practices/
  • 42. Structural - definition Structural = good organized http://hoctudau.com/slides/html-css-best-practices/
  • 43. Structural - examples Wrong (development phase) style.css john.css Right (development phase) reset.css debug.css layout.css http://hoctudau.com/slides/html-css-best-practices/
  • 44. Structural - best practices • Separate 2 phases: development and deployment (production) o minified, combined css (js) files in deployment phase • Separate 2 types of files structure in development phase o top down  debug.css  reset.css  layout.css  typo.css o bottom up  reset.css  layout.css  menu.css - menu_debug.css  infobox.css - infobox_debug.css • TEAM NOTE: o Study: OOCSS and CSS Frameworks o Build a CSS Libary http://hoctudau.com/slides/html-css-best-practices/
  • 46. Study - definition Study = Explore, Seach, Ask, Learn, Store, Bookmark, Remember by Heart http://hoctudau.com/slides/html-css-best-practices/
  • 47. Study - examples Right google: IE6 common bug • http://www.virtuosimedia.com/tutorials/ultimate-ie6- cheatsheet-how-to-fix-25-internet-explorer-6-bugs http://hoctudau.com/slides/html-css-best-practices/
  • 48. Study - best practices • Learn when and how to google o Learn English o Learn to generalize (expand) and specialize (restric) search results  double text vs IE6 double text vs IE6 common bugs • Bookmark useful link o http://jhop.me/ie8-bugs • Read useful Webs and Blogs o http://www.smashingmagazine.com/ • TEAM NOTE: o share bookmark and experience between team member http://hoctudau.com/slides/html-css-best-practices/
  • 50. Smart - definition Smart people follow the targets, not the rules! Sometimes we should break the rules! Warning: We have to learn to follow the rules before learning to break them! http://hoctudau.com/slides/html-css-best-practices/
  • 51. Smart - examples Wrong Try to make a perfect quality web when lacking of resources Right Think about what you want, but do what you can. Sometimes you should make an art, but sometimes you need money first. http://hoctudau.com/slides/html-css-best-practices/
  • 52. Smart - best practices • Thinking about your target before thinking about the other rules o Sometimes you have to break some rules to follow other (more important) rules  "kill" speed to "save" simple  or "kill" simple to "save" speed  kill "semantic" to save "simple" and "time" • When needed, you can use anything o Table Layout  Softwares: Dreamweaver, Photoshop o HTML Frameworks  Baker Ebook Framework o HTML Generator, Editor  Zen Coding (not Zend) o CSS Frameworks  YUI, Blue Prints, 960gs o CSS Generators  SASS, LESS • TEAM NOTE: Look ahead and prepare for future http://hoctudau.com/slides/html-css-best-practices/
  • 53. Want to learn more? Google: CSS best practices • Be a CSS Team Player: CSS Best Practices for Team-Based Development o http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx • 9 CSS Best Practices You Need to Know o http://fwebde.com/css/css-best-practices/ • 30 CSS Best Practices for Beginners o http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for- beginners/ Google: HTML best practices • 20 HTML Best Practices You Should Follow o http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/ Note again: Follow your targets and apply others' rules smartly
  • 54. Good HTML, CSS Showcases • Deliver WOW Through Service o http://about.zappos.com/our-unique-culture/zappos-core-values/deliver- wow-through-service • Chris Shiflett: Blog o http://shiflett.org/blog • Webkit CSS Transformers Top Trumps o http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html • CSS Media Queries Sidebar o http://css-tricks.com/examples/MediaQueriesSidebar/ • The Official Site of Bill Gates - The Gates Notes o http://www.thegatesnotes.com/Default.aspx • About | Mozilla Messaging o http://www.mozillamessaging.com/en-US/about/ • Simon Collison | Colly | The Celebrated Miscellany o http://colly.com/ • World Wide Web Consortium (W3C) o http://www.w3.org/
  • 55. Good HTML, CSS Showcases Web Applications • Wordpress • VBB 4.x
  • 56. The End Q&A Sponsored by HocTuDau.com Avarage Score of HTML, CSS Code of some famous websites in Rule of Ss Scale? This slide is available online at: http://hoctudau.com/slides/html-css-best-practices/