learning to love html(for grumpy developers)                  @jongalloway
hi!http://weblogs.asp.net/jgalloway
why?  falling in love     the honeymoonmarriage counseling
why?lessons from javascript
falling in lovewhat does a document offer?    structured content    not design    not logic
why?it’s what we share      with designers      with our usersthe only code you write that the world sees
falling in loveavoiding the cheap floozycode smells    difficult to maintain    trapped    supporting browsers (and versio...
falling in lovelove it for what it is…     a document format
falling in lovedocument vs. application     tools     developersbut you deliver documents
true love♥ html
the honeymoonjoy!clean code (occupy your codebase!)
the honeymoonjoy!clean code is flexible     (story time)
the honeymoonjoy!adaptive layout
the honeymoonjoy!seo: a structured document is machine readable
the honeymoonclear communicationsemantic markup is easier, cleaner    asp.net templates
the honeymoonselectors get so easy!     css     jquery     testing$(section.mentions header img).hide()
marriage counseling
marriage counselingyour html as an api     separation of concerns     smoothly factored pieces agree
marriage counselingbrowsersstop fixating on browsers      you are not your browser      your browser doesn’t matter to use...
marriage counselingprogressive enhancementbuild for your main use case           enhance using feature detection
marriage counselingprogressive enhancementshim for downlevel     modernizr     conditional comments     content fallback
marrige counseling… let’s talk ie   quirks mode! (watch doctype)
marrige counseling… let’s talk iedeveloper tools    document mode (rendering)    browser mode (requesting)
marriage counselingpixel hellusers don’t count pixels
marriage counselingpixel hellavoiding pixel hell     get there first     get out of mockup mode     photoshop is not a web...
marriage counselingpositioning and layoutfloats     http://css.maxdesign.com.au/floatutorial/
marriage counselingpositioning and layoutfloats     float one way
marriage counselingpositioning and layoutpadding / margins     use developer tools     use page inspector
marriage counselingfocus on a structured documentstart with an outline – like writingkeep things structuredrefactor (?!)
learning to love html(for grumpy developers)                  @jongalloway
learning to love html and css
learning to love html and css
learning to love html and css
Upcoming SlideShare
Loading in …5
×

learning to love html and css

20,652
-1

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
20,652
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×