YUI to the rescue

Are you still rolling your own HTML user interface components? If you are, take a look at what YUI has to offer. The advantages of leveraging YUI's standard components are abundant.

YUI Advantages:

• Saves cost on development effort. The suite of controls are already developed and tested. This allows your team to work on more valuable tasks.
• Excellent performance. YUI has adopted many of the great performance improvement practices that were identified in Best Practices for Speeding Up Your Web Site. Several of the performance improvements include:
  • Minified JavaScript and CSS files. This will improve page load performance with smaller files to download.
  • Aggregated or rolled-up JavaScript and CSS files. This will improve page load performance with fewer HTTP requests.
  • Yahoo will host the files on their own Content Delivery Network. In addition, Yahoo will compress and cache all of their controls for even greater performance. They also manage versioning.
• Components are supported across all A-Grade browsers
• Helps non-UI experts design beautiful user interfaces. Yahoo provides the design and CSS layout for all of their components.
• 508 compliant. All components are screen reader accessible.
• All components already have extensive documentation with many examples.
• Reusable. You can apply the YUI controls everywhere because they are not proprietary.
• Technology agnostic. These controls can be applied across all Web environments regardless of technology (Java, .NET, Rails, etc.).
• Support many features that allow you to change behavior without customizing the code.
• Thier code is clean. I validated their JavaScript with JSLint and few errors were reported. I also validated their CSS files and no major issues existed either.

YUI Disadvantages:

• Some controls are not bullet proof. For example, there is a sorting issue with their datatable control if you embed the component within a table. However, this is not an issue if you are working in a CSS based design.
• They do not have everything but the list is extensive.

Recommendations:

• Try to avoid customizations. Customizing the code will make it difficult to migrate to newer versions in the future.

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.