The Highly Extensible CSS Interface ~ The Series
~ 25 February 2008 ~
It’s been nearly three years since publishing a series of articles on this site. I’ve got an irresistible yearning to publish anew.
Introducing “The Highly Extensible CSS Interface,” a four-part series of how-to’s and savvy conversation to be published in the coming weeks, with the first article debuting this week. 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. I hope you come to discover extensibility as being broader than just “bulletproofing,” though bulletproofing is certainly a significant part of it.
Here’s what to expect:
- 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.
Code samples will be available for viewing and downloading with each article. Much of the discussion will be based on material and a demo interface created for a recent workshop, the likes of which you can preview by clicking this screen capture:
See you back here in a couple days.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Recent job listings, testimonials, and 100th Kiva loan
- The ISO50 Field Guide to Color Management
- Upgrading the hard drive and memory in a refurbished 13" MacBook Pro
- Inspiring type: Libro di M. Giovambattista Palatino
- Randomness, vol. IX
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.