Index

  1. What brings us here today...
  2. What brings us here today...
  3. What do we mean, NO TABLES?
  4. When tables are used correctly...
  5. Don’t avoid tables ENTIRELY.
  6. Tableless Layout
  7. Benefits:
  8. Basic example
  9. Wired News
  10. Wired News
  11. No tables in the Garden
  12. Approach #1: Absolute positioning
  13. Absolute positioning
  14. Absolute positioning on Wired News
  15. Absolute positioning on Wired News
  16. Absolute positioning on Wired News
  17. Absolute positioning on Wired News
  18. Positioning context
  19. Approach #2: Floats
  20. Floated CSS layouts have:
  21. Floats on Stopdesign
  22. Floats on Stopdesign
  23. Breaking out of “float mode”
  24. Real-world Example
  25. Our candidate
  26. Why not the new Microsoft.com?
  27. Typical layout
  28. Typical layout
  29. Old Microsoft.com
  30. Differences between 2 versions
  31. Old Microsoft.com
  32. Old Microsoft.com
  33. Old Microsoft.com
  34. Step #1: Clean up the HTML
  35. Step #2: Strip out tables
  36. Step #3: Validate
  37. Now, where do I start?
  38. Step #4: Opposing header floats
  39. Step #4: Opposing header floats
  40. Step #4: Opposing header floats
  41. Step #5: Column structure
  42. Step #5: Column structure
  43. Step #5: Column structure
  44. Step #5: Column structure
  45. Faux columns
  46. Faux columns
  47. Faux columns
  48. Faux columns
  49. Step #6: Trailing with the Footer
  50. Step #6: Trailing with the Footer
  51. Step #7: Nav column
  52. Step #8: Components of Main column
  53. Step #8: Components of Main column
  54. Step #8: Components of Main column
  55. Step #8: Components of Main column
  56. Step #8: Subcolumns
  57. Remaining work
  58. The Reworked Microsoft.com
  59. The Reworked Microsoft.com
  60. Advantages
  61. Resources
  62. Beauty in design
  63. Beauty in design
  64. Beauty in design
  65. Thank you!