The Highly Extensible CSS Interface ~ The Series

~ 25 February 2008 ~

The Highly Extensible CSS Interface

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:

The Highly Extensible CSS Interface

See you back here in a couple days.

 

43  Comments

Veer Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1   Hamish M ~ 25 February 2008

Gosh, yeah. It has been a while.

I’m looking forward to it, Cameron.


2   paul ~ 25 February 2008

very much looking forward to this!


3   Keith LaFerriere ~ 25 February 2008

Thank you in advance for putting the time into this. I’m looking forward to reading it.


4   chuck ~ 25 February 2008

Really looking forward to this, Cameron!


5   Dave McNally ~ 25 February 2008

Looking forward to this too! I was actually just looking through your ‘worn’ series.

This new series seems to be just what I’m looking for.


6   Ty Hatch ~ 25 February 2008

Looking forward to reading it! Always enjoy how you present things.

You wouldn’t happen to be fond of Meta Serif at the moment would you? ;)


7   Carl Peterson ~ 25 February 2008

Can’t wait to read these articles, Cameron. (How in the world do you have time to do this?)


8   David VanDusen ~ 25 February 2008

Can’t wait! I’ve been feeling that my CSS is missing that element of extensibility. It seems like CSS is written ad hoc — just so long as everything renders like the mock-up it’s done. Foresight lacking, definitely.


9   Kurt Cruse ~ 25 February 2008

Great googilly moogilly am I antsy. Know that your efforts to provide free reference to the masses does not go unappreciated Mr. Moll. Thank you.


10   Ben Lacy ~ 25 February 2008

Sounds great. Looking forward to it Cameron!


11   Sam Daams ~ 25 February 2008

Excellent! Looking forward to it Cameron!


12   Dan Wilt ~ 25 February 2008

Excellent! Looking forward to it Cameron!


13   Andrew Strachan ~ 25 February 2008

Fantastic! Looks like a good series.


14   Nanda ~ 25 February 2008

Sounds great, looking forward to it.


15   Cameron Moll ~ 25 February 2008

If one were to judge by the number of exclamation points in the comments, one could deduce I’m setting a rather high expectation for the series…


16   Timo Brimhall ~ 25 February 2008

Sweet, bring it on bro!


17   Michael Locke ~ 25 February 2008

I’ve been visiting your site for years now and have always pronounced your name as “Mole” for some reason (My bad). In the video, hearing you say your name correctly, I was like “duh”. Anyway, great intro video to a series that looks pretty interesting.


18   Shane ~ 25 February 2008

I’m really looking forward to these posts. This was the whole reason I even started coming to your blog, way back when you used to do these more often. So it will be good to learn some more from your “imparted wisdom”


19   Cameron Moll ~ 25 February 2008

I’m sure you’re not alone, Michael.


20   Maxime ~ 25 February 2008

Great idea, looking forward to it!


21   Sam Hardacre ~ 26 February 2008

Sounds great! Looking forward to reading the series : )

Sam

PS - Not too sure if you’d get the Twitter reply, but Warioware is a great Wii game for groups. It takes a bit of getting used to but it’s a laugh : )


22   Razvan ~ 26 February 2008

Gosh! What font did you use in title-extensible.gif? I think I’m in love… :-) Great article, by the way!


23   rob ~ 26 February 2008

fantastic article really love it


24   Sophie Dennis ~ 26 February 2008

I think I may faint with the anticipation of it all.

No pressure though ;-)

(I am, seriously, really looking forward to the articles. I think maybe I need to get out more.)


25   Chris Wible ~ 26 February 2008

Here are some more exclamation points for you: !!!!!!!! I’ve been waiting for you to do another series for a long time! Keep it coming! (see, told you there’d be exclamation points)


26   Adrian ~ 26 February 2008

Looking forward to the series.


27   Chad Crowell ~ 26 February 2008

Been waiting for this since you teased with the screenshot months ago when you were preparing for your presentation. Awesome!!


28   Cameron Moll ~ 27 February 2008

What font did you use in title-extensible.gif? I think I’m in love…

That would be the newly released, and yes lovely, FF Meta Serif.


29   suadref ~ 27 February 2008

pretty interesting… hmmm… my authentically boring wisdom eh?

HMMM….


30   tom ~ 27 February 2008

!!!!!


31   David Oliver ~ 28 February 2008

Sounds good Cameron - looking forward to it. Thanks. :)


32   Joe Rapoza ~ 28 February 2008

I always find myself needing a quick CSS refresher when I haven’t been coding for a while. I’m looking fwd to the rest.

Thanks Cameron.


33   Nick Watts ~ 28 February 2008

Good stuff. Can’t wait for the rest of the series.


34   Joe ~ 01 March 2008

Awesome, thank you for your contribution to the design world.


35   Chuck Reynolds ~ 01 March 2008

Nice - can’t wait for the full series. Really interested in seeing what you’re presenting. Can’t make it to MA but I’ll be on board for the web stuff - thx.


36   Rogerio ~ 05 March 2008

That sounds great! I’m very excited about it!


37   youtube ~ 11 March 2008

Very thanks Cameron.You are nice coder :)


38   Ruppert ~ 15 March 2008

Very nice stuff. Looking forward to the rest of the series!


39   Galen ~ 02 April 2008

Hi Cameron, thanks for the great articles. Look forward to the rest of it.


40   Damjan Mozetič ~ 03 April 2008

Great tutorial Cameron, it is rare to see such quality material on the web! In case you are interested, I’ve written a quick review on my blog. Thanks!


41   Jonas ~ 05 April 2008

Fantastic work, very inspiring! Thanks a lot!


42   Andy Gongea ~ 14 April 2008

Thank you for contributing to a better user experience on the web. I hope your tutorial will be adopted by many.I know I will implement many features.

Also very nice and clean layout.

10x man.


43   film izle ~ 24 April 2008

Very nice stuff. Looking forward to the rest of the series!




About

Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…


Jobs
Come in, we're hiring

Full-time and freelance job opportunities. Post a job...

...view all jobs »


Recently

A selection of fine reading, available for a limited time only:


In Print

CSS Mastery 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 Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.


Recommended

Letterpress Posters Letterpress Posters The unassuming beauty of a freshly letterpressed print.

Wicked Worn That Wicked Worn Look. Techniques for that worn, aged, distressed look.

Mister Retro Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.

Blinksale Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.

Basecamp Basecamp My preferred web app for internal and client project collaboration.


Speaking

HOW Conference HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.

Web Design World Web Design World Seattle, July 20–22. Practical sessions on web design.

An Event Apart Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.


Feed Me
Articles: RSS
Linkage: RSS

Follow me: Twitter