Thursday, March 12, 2009

Prefer CSS-based designs

Are you leveraging the full potential of CSS? Traditionally, tabled-based layouts were the standard for structuring content. CSS provides many advantages that we should be leveraging today. In short, table-based designs should forever be deprecated.

Advantages for adopting CSS-based designs:

  • CSS-based designs render content better in mobile-based browsers. With mobile apps on the rise it is becoming even more important to apply CSS-based designs today on your regular browser applications. Sites designed with CSS layouts offer much better flexibility in regards to how the content is rendered on the UI. For example, given the same content you may apply a different style for your mobile based application vs your non-mobile based application.
  • Your pages will have less code and become much easier to read. No more <table>, <tr>, and <td> tags to clutter your content!
  • With less code to maintain, refactoring becomes simpler.
  • Your UI becomes more accessible.
  • Lightweight pages will be more performant.

CSS Books:

  • CSS Mastery:
    • This book was the most valuable for me. It's a quick read and their examples are very good. I typically reference their examples first when looking for solutions.
  • CSS The missing manual:
    • This is also a valuable book. This book contains much more content than the prior book and may be targeted for a more introductory audience. Their examples are also good but I typically reference the CSS Mastery examples first.

CSS Tools:

  • FireBug:
    • Arguably the best tool ever invented for Web development. Refer to the FireBug site for their CSS support features. Simply awesome for everything (debugging, JavaScript, CSS)! YSlow is also a helpful FireBug addition that provides an excellent performance report card.
  • YUI Grids CSS:
    • If you are looking for a CSS framework then this may be of value. Their base and grid styles should help with layout while their reset style will help get all browser's on an even playing field. Yahoo has a good demo of its features on their YUI Grids home page.

No comments :

Post a Comment