The Highly Extensible CSS Interface Series

Posted on April 6th, 2008, by Cristian in Development, Tutorials, Usability & SEO, Xhtml & CSS

Cameron Moll introduced “The Highly Extensible CSS Interface”, a four-part series of how-to’s and savvy conversation. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

Part One: The Foundation

This first article will briefly discuss the importance of producing visually rich interfaces with semantic, accessible, and portable markup underneath. We’ll then dive into code with a reset stylesheet and structure for a resolution-dependent layout.

Part Two: CSS Selectors & jQuery

Shifting to a more intermediate discussion of code, this second article will present examples that demonstrate how to take advantage of the now-supported CSS2 and CSS3 properties previously ignored by Internet Explorer, such as min/max-width, child and adjacent sibling selectors, and others. We’ll also take a look at jQuery, a lightweight scripting library for enhancing UI elements.

Part Three: Adding Ajax Interactivity

The third article will lightly cover Ajax implementation and its role within the interface. This won’t be a highly technical discussion that covers such things as XMLHttpRequest, but rather a demonstration of a few ways to leverage Ajax judiciously.

Part Four: Testing for Extensibility

Lastly, the final article will look back at the chunks of code presented in the three previous articles to assess how they combine to produce a completed interface. We’ll then subject the interface to a series of “extensibility tests” such as translation, text resizing and browser width resizing, the addition of new content, and so forth.

The final article also provides the full demo, as well as a bookmarkable site that gives you quick access to all resources mentioned throughout the series.

Leave a comment

Advertise / Sponsors

How to Be a Rockstar Freelancer
Comments RSS Feed

Recent Comments

  • Julian Gruber: Thank you! Following those advices really can make a big difference for the success of a webapp.
  • Tom Humes: Nice Site layout for your blog. I am looking forward to reading more from you. Tom Humes
  • admin: Yes, it does the same. Basic I just get the object $(”#nicemenu span.head_menu”) once, and applied the...
  • André Beaudry: Hi, I would like to know why : $(”#nicemenu span.head_menu”).mouseov er(function(){...
  • admin: Try to change the z-index to the menu container in my example div #nicemenu. The first one should have for ex....