Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

learning to love html and css

21,139 views

Published on

Presented at NDC 2012. Video: http://vimeo.com/43548698

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

  • Be the first to like this

learning to love html and css

  1. 1. learning to love html(for grumpy developers) @jongalloway
  2. 2. hi!http://weblogs.asp.net/jgalloway
  3. 3. why? falling in love the honeymoonmarriage counseling
  4. 4. why?lessons from javascript
  5. 5. falling in lovewhat does a document offer? structured content not design not logic
  6. 6. why?it’s what we share with designers with our usersthe only code you write that the world sees
  7. 7. falling in loveavoiding the cheap floozycode smells difficult to maintain trapped supporting browsers (and versions) reliance on grids / frameworks / tools
  8. 8. falling in lovelove it for what it is… a document format
  9. 9. falling in lovedocument vs. application tools developersbut you deliver documents
  10. 10. true love♥ html
  11. 11. the honeymoonjoy!clean code (occupy your codebase!)
  12. 12. the honeymoonjoy!clean code is flexible (story time)
  13. 13. the honeymoonjoy!adaptive layout
  14. 14. the honeymoonjoy!seo: a structured document is machine readable
  15. 15. the honeymoonclear communicationsemantic markup is easier, cleaner asp.net templates
  16. 16. the honeymoonselectors get so easy! css jquery testing$(section.mentions header img).hide()
  17. 17. marriage counseling
  18. 18. marriage counselingyour html as an api separation of concerns smoothly factored pieces agree
  19. 19. marriage counselingbrowsersstop fixating on browsers you are not your browser your browser doesn’t matter to users land of a thousand browserscommon ground resets? okay… normalize is better! http://necolas.github.com/normalize.css/
  20. 20. marriage counselingprogressive enhancementbuild for your main use case enhance using feature detection
  21. 21. marriage counselingprogressive enhancementshim for downlevel modernizr conditional comments content fallback
  22. 22. marrige counseling… let’s talk ie quirks mode! (watch doctype)
  23. 23. marrige counseling… let’s talk iedeveloper tools document mode (rendering) browser mode (requesting)
  24. 24. marriage counselingpixel hellusers don’t count pixels
  25. 25. marriage counselingpixel hellavoiding pixel hell get there first get out of mockup mode photoshop is not a web standard
  26. 26. marriage counselingpositioning and layoutfloats http://css.maxdesign.com.au/floatutorial/
  27. 27. marriage counselingpositioning and layoutfloats float one way
  28. 28. marriage counselingpositioning and layoutpadding / margins use developer tools use page inspector
  29. 29. marriage counselingfocus on a structured documentstart with an outline – like writingkeep things structuredrefactor (?!)
  30. 30. learning to love html(for grumpy developers) @jongalloway

×