Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 5,327

http://hoctudau.com 4,257
http://linkhay.com 464
http://vothanhduy.wordpress.com 324
http://vothanhduy.com 140
http://rutoblo.blogspot.com 57
http://www.hoctudau.com 30 22
http://muarehcm.blogspot.com 19
http://thuthuat.congnghehomnay.com 8
http://duckienit.blogspot.com 4
http://blackboard.butte.edu 1
http://static.slidesharecdn.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. HTML & CSS Best PracticesPresenter: Đặng Minh Tuấn aka. ohisee from: hoctudau.com
  • 2. http://hoctudau.com/slides/html-css-best-practices/About Presenter - Who am I? Programming:Fullname: Đặng Minh Tuấn Clientside HTML CSS Javascript Serverside PHP MySQLWorked 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 CompaniesTrained 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
  • 3. 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.
  • 4. 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 http://hoctudau.com/slides/web-pro
  • 5. http://hoctudau.com/slides/html-css-best-practices/About this Presentation - It is ...... for one who ... not for one who know what is HTML, CSS dont know or dont care and has been working with about HTML, CSS HTML, CSS daily and want or still working with HTML, to make better code CSS (and may get thing done) but dont want to make better code
  • 6. http://hoctudau.com/slides/html-css-best-practices/About this Presentation - legendsWrong = Something you should not do in almost cases.Acceptable = Something you should not do in some casesRight = Something you should do in almost cases.
  • 7. http://hoctudau.com/slides/html-css-best-practices/About this Presentation - structure10 Rules of Ss 1. Skinable 2. Sensible 3. Simple 4. Semantic 5. Speed 6. Standard 7. Safe 8. Structural 9. Study 10. Smart
  • 8. Ready?
  • 9. 1. Skinable
  • 10. http://hoctudau.com/slides/html-css-best-practices/ Skinable - definition Skinable = Changeable and Flexible Skin (Style)
  • 11. http://hoctudau.com/slides/html-css-best-practices/ Skinable - examples Wrong Right <h1><u><i>Heading</i></u></h1> <style> h1 { font-style: italic; text-decoration: underline; } </style> <h1>Heading</h1>
  • 12. http://hoctudau.com/slides/html-css-best-practices/ Skinable - examples Wrong Right <p> <style> <img src="image.jpg" align=" .thumbnail { left"> Hoctudau.com ... float: left; </p> } </style> <p> <img src="image.jpg" class=" thumbnail"> Hoctudau.com ... </p>
  • 13. http://hoctudau.com/slides/html-css-best-practices/ Skinable - examples Wrong Right <table> <link rel="stylesheet" href=" <tr> style.css"> <td bgcolor=red width=500 height=50 colspan=2> ... </td> <div id="header"> </tr> <div id="sidebar"> <tr> <div id="content"> <td bgcolor=red width=100 height=300> ... </td> <div id="footer"> <td bgcolor=red width=400 height=300> ... </td> </tr> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> </table>
  • 14. http://hoctudau.com/slides/html-css-best-practices/ Skinable - examples Wrong Right <ul style="padding-left: 5px" > CSS (styles.css) #menu { padding-left: 5px; } HTML (index.php) <ul id="menu">
  • 15. http://hoctudau.com/slides/html-css-best-practices/ Skinable - best practices Separate Data (Structure) from Style (Presentation) and Behavior (Themeable) Dont 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/ One HTML Structure create Many Beautiful and different Interfaces by using many different CSS files. TEAM NOTE: Train this rule first!
  • 16. 2. Sensible
  • 17. http://hoctudau.com/slides/html-css-best-practices/Sensible - definitionSensible = understandable Somebody need to understand your code You need to understand ... your code after a long time
  • 18. http://hoctudau.com/slides/html-css-best-practices/Sensible - examplesWrong Right<div id="xxx"> <div id="header"><p class="abc"> <div id="left_column"><div id="middle-left-and-then- <div id="sidebar">a-little-lower"> <p class="first"> <p class="intro"> <div class="section">
  • 19. 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/ Prefer structural name: describe what elements are header sidebar to styling (presentational) name: describe how element look like right_column red_link Comment (in HTML, CSS) when needed to explain the reason (why?) TEAM NOTE: Build a Naming Convention for common Web UI elements http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html
  • 20. 3. Simple
  • 21. http://hoctudau.com/slides/html-css-best-practices/ Simple - definition Simpler = Shorter Less code to type Less code to read Less data to send
  • 22. http://hoctudau.com/slides/html-css-best-practices/ Simple - examples Wrong Right <ul> <ul id="menu"> <li class="active_menu_item" <li class="active"> <li class="menu_item"> <li> <li class="menu_item"> <li> <li class="menu_item"> <li> <li class="menu_item"> <li> <li class="menu_item"> <li> <li class="menu_item"> <li> </ul> </ul>
  • 23. http://hoctudau.com/slides/html-css-best-practices/ Simple - examples Wrong <div> <div> Right <div> <h1> <div> <div>heading</div><br></h1> <h1>heading</h1> <div> <div> <p> paragraph<br> paragraph <div> paragraph </p> </div> <p> <br><br> </div> paragraph </div> </p> </div> </div> </div> </div>
  • 24. http://hoctudau.com/slides/html-css-best-practices/ Simple - best practices Naming short enough to keep it sensible Good CSS skills enough to: know how to use CSS Selector http://www.w3.org/TR/CSS2/selector.html html selector id selector class selector descendant selector avoid classitis use CSS Shorthand keep as little as nested elements as possible. know how to solve issues by adding more CSS instead of HTML TEAM NOTE: require and train better CSS skill for team member train this rule
  • 25. 4. Semantic
  • 26. http://hoctudau.com/slides/html-css-best-practices/Semantic - definitionSemantic Warning:= Software can understand your code. Semantic is so your web is accessible for all people. sometimes not= Search engine can understand your code simple! so your web has better SEO
  • 27. http://hoctudau.com/slides/html-css-best-practices/Semantic - examplesWrong Right<div class="heading1"> <h1><div class="heading2"> <h2><div class="paragraph"> <p> Acceptable <p>2-4pm</p> <div class="section"> 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>
  • 28. http://hoctudau.com/slides/html-css-best-practices/Semantic - best practices Use Right Tags for Right Jobs. Dont misuse any element. Dont create a tag soup. div (divitis?) table (tableless layout?) ul, li (divless?) Learn elements semantic HTML References http://www.w3schools.com/html5/html5_reference. asp Semantically styling breadcrumbs http://kumpunen.com/?p=125 Learn some others data formart Microformat, Microdata, RDF, etc., TEAM NOTE: Build a Common Semantic List
  • 29. 5. Speed
  • 30. http://hoctudau.com/slides/html-css-best-practices/ 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
  • 31. http://hoctudau.com/slides/html-css-best-practices/ Speed - examples Wrong Right: *{ use a good CSS reset file margin: 0; padding: 0; }
  • 32. 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: 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
  • 33. 6. Standard
  • 34. http://hoctudau.com/slides/html-css-best-practices/Standard - definition http://en.wikipedia.org/wiki/Web_standardsWeb standards is a general term for the formal standards and other technicalspecifications 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 ofstandardized best practices for building web sites, and a philosophy of web design anddevelopment that includes those methods http://www.w3.org/ Create & develope Web Standards http://www.webstandards.org/ Fighting for Web Standards http://w3schools.com/ Teach
  • 35. http://hoctudau.com/slides/html-css-best-practices/Standard - examplesWrong Right<div> <div><p> <p>example paragraph example paragraph</div> </p></p> </div>
  • 36. http://hoctudau.com/slides/html-css-best-practices/Standard - best practices Read the Specification World Wide Web Consortium (W3C) - http://www.w3.org/ Learn DTD - http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd Learn about the mission of fighting for standard http://www.webstandards.org/about/mission/ Know how to use online and offline validator online HTML, XHTML validator - http://validator.w3.org/ online CSS validator - http://jigsaw.w3.org/css-validator/ Firefox Addon HTML validator - https://addons.mozilla.org/en- US/firefox/addon/249/ TEAM NOTE: Validation is a must in training progress.Good News: Bad News:Browsers are more and more Good things (?) cansupporting Web Standards break standards
  • 37. 7. Safe
  • 38. http://hoctudau.com/slides/html-css-best-practices/ Safe (fallback) - definition Everything can be in trouble but If we care enough, troubles can become less troubles or become good chances!
  • 39. http://hoctudau.com/slides/html-css-best-practices/ Safe Fallback - examples Wrong Right <img src="hoctudau.png" /> <img src="hoctudau.png" alt="hoctudau.com" title=" #header { hoctudau.com" /> background: url(header.png); color: white; #header { } background: black url (header.png); color: white; }
  • 40. http://hoctudau.com/slides/html-css-best-practices/ Safe Fallback - best practices Follow Web Standard use alt in img element Think about the failures. Ask youself: What if ... some images dont work? some CSS files dont work? Some CSS rules dont work? some JS files dont work? Some JS functions dont work? some elements like frame, iframe, etc., dont work? Flash doesnt work? screen size is too large or too small. Bulletproof Ebook: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS TEAM NOTE: train this rule.
  • 41. 8. Structural
  • 42. http://hoctudau.com/slides/html-css-best-practices/Structural - definitionStructural = good organized
  • 43. http://hoctudau.com/slides/html-css-best-practices/Structural - examplesWrong (development phase) Right (development phase)style.css reset.cssjohn.css debug.css layout.css
  • 44. http://hoctudau.com/slides/html-css-best-practices/Structural - best practices Separate 2 phases: development and deployment (production) minified, combined css (js) files in deployment phase Separate 2 types of files structure in development phase top down debug.css reset.css layout.css typo.css bottom up reset.css layout.css menu.css - menu_debug.css infobox.css - infobox_debug.css TEAM NOTE: Study: OOCSS and CSS Frameworks Build a CSS Libary
  • 45. 9. Study
  • 46. http://hoctudau.com/slides/html-css-best-practices/ Study - definition Study = Explore, Seach, Ask, Learn, Store, Bookmark, Remember by Heart
  • 47. 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
  • 48. http://hoctudau.com/slides/html-css-best-practices/ Study - best practices Learn when and how to google Learn English Learn to generalize (expand) and specialize (restric) search results double text vs IE6 double text vs IE6 common bugs Bookmark useful link http://jhop.me/ie8-bugs Read useful Webs and Blogs http://www.smashingmagazine.com/ TEAM NOTE: share bookmark and experience between team member
  • 49. 10. Smart
  • 50. http://hoctudau.com/slides/html-css-best-practices/Smart - definitionSmart 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!
  • 51. http://hoctudau.com/slides/html-css-best-practices/Smart - examplesWrong RightTry to make a perfect quality Think about what you want,web when lacking of resources but do what you can. Sometimes you should make an art, but sometimes you need money first.
  • 52. http://hoctudau.com/slides/html-css-best-practices/Smart - best practices Thinking about your target before thinking about the other rules 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 Table Layout Softwares: Dreamweaver, Photoshop HTML Frameworks Baker Ebook Framework HTML Generator, Editor Zen Coding (not Zend) CSS Frameworks YUI, Blue Prints, 960gs CSS Generators SASS, LESS TEAM NOTE: Look ahead and prepare for future
  • 53. Want to learn more?Google: CSS best practices Be a CSS Team Player: CSS Best Practices for Team-Based Development http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx 9 CSS Best Practices You Need to Know http://fwebde.com/css/css-best-practices/ 30 CSS Best Practices for Beginners 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 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 http://about.zappos.com/our-unique-culture/zappos-core- values/deliver-wow-through-service Chris Shiflett: Blog http://shiflett.org/blog Webkit CSS Transformers Top Trumps http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html CSS Media Queries Sidebar http://css-tricks.com/examples/MediaQueriesSidebar/ The Official Site of Bill Gates - The Gates Notes http://www.thegatesnotes.com/Default.aspx About | Mozilla Messaging http://www.mozillamessaging.com/en-US/about/ Simon Collison | Colly | The Celebrated Miscellany http://colly.com/ World Wide Web Consortium (W3C) http://www.w3.org/
  • 55. Good HTML, CSS ShowcasesWeb Applications Wordpress VBB 4.x
  • 56. The End Q&AAvarage Score of HTML, CSS Code of some famouswebsites in Rule of Ss Scale?This slide is available online at:http://hoctudau.com/slides/html-css-best-practices/ Sponsored by HocTuDau.com