Mark Wunsch

If you are a software developer (this includes web developers) or a designer the nature of the work you do is philosophically aligned with the so-called “liberal” or Democratic agenda. Just look at the work developers do and see under what circumstances our businesses thrive and think about the general ideals the Democratic and Republican parties ascribe to.

Firstly, software developers know all about infrastructure, and the need for investment in infrastructure, probably more than most. Our infrastructure is built thanks in large part to Open Source initiatives. The underlying concept behind Open Source is that these projects provide a platform for others to work off of. Here is a quote from the Apache Foundation, explaining why their software is free:

“We believe that the tools of online publishing should be in the hands of everyone, and that software companies should make their money by providing value-added services such as specialized modules and support, amongst other things. We realize that it is often seen as an economic advantage for one company to “own” a market - in the software industry, that means to control tightly a particular conduit such that all others must pay for its use. This is typically done by “owning” the protocols through which companies conduct business, at the expense of all those other companies. To the extent that the protocols of the World Wide Web remain “unowned” by a single company, the Web will remain a level playing field for companies large and small. Thus, “ownership” of the protocols must be prevented. To this end, the existence of robust reference implementations of various protocols and application programming interfaces, available free to all companies and individuals, is a tremendously good thing.”

The Apache HTTP server is the most popular HTTP server on the Web. Hundreds of projects have been made available under the terms of the Apache License.

Software developers know that the more you invest (in terms of both time and money) in Open Source projects, the more people can reap the rewards. Take a look at WordPress. WordPress has inspired more industry than I could over hope to really understand. Professional bloggers, advertisers, theme-designers, plugin makers--they all generate income thanks to this one Open Source project. Open Source is the infrastructure of our businesses and we know that when you invest in Open Source, the rewards are ten-fold. Designers, are you feeling left out? How many resources have you drawn upon that are protected by a Creative Commons license?

On the more expressly political side of this, take for instance the second Obama/McCain debate. The divisions between the Democrat and Republican were particularly stark on the issue of health care. McCain said he saw health care as a “responsibility” while Obama saw health care as a right. Those of us who take advantage of Open Source initiatives, who promote and invest in it, are defending our right to a creative commons.

The common line is that Open Source is not free as in beer, but free as in speech. Libre, not gratis. The right to distribute, modify, and use open source software is a right, much like Senator Obama believes health care is a right.

I believe that Barack Obama’s interest in building and providing social services is directly aligned with the web developer’s interest in providing the tools to online publishing to all. To say that these things are “socialist” or “welfare” do not take into account the myriad of opportunity that spring up from these investments. If you are a web developer or designer, you should cast your vote for Barack Obama on November 4th.

We have learned that Progressive Enhancement is the method of building a website in layers, with the content as foundation. The notion is that if we have rich, semantic (X)HTML at the base we can drape it in layers of Presentation (with CSS) and Behavior (in the form of Client-Side Scripting) that do not affect the content at the core. But lingering browser incompatibility makes this much easier said than done. Many designs demand you stretch your (X)HTML to be less than semantic. Modern web developers must deal with the realities of extraneous wrappers or empty divs, less-than-semantic class names (I’m looking at you, clrfix), and DOM Scripting that fills in the holes that less-than-stellar CSS support leaves behind. Our layer cake is now looking like a bit of a casserole. If we want to maintain the integrity of our content layer, we need to take a real close look at our presentation layer and ask ourselves the tough question, “Do websites need to look exactly the same in every browser?” For those who believe the answer to that question is a resounding “No,” Progressive Enrichment might help you regain control of your content.

Solving the Internet Explorer 6 Problem

Lack of PNG alpha support, mediocre support of CSS selectors, a host of bizarre quirks, and hasLayout—it is enough to have any developer tearing their hair out. Some have gone so far as to abandon IE6 completely. Whatever your stance is on the movement to phase IE6 out, the fact is is that it is the de facto platform for millions of users, some of whom might not be able to upgrade to a more modern browser for a myriad of reasons. Many developers must live with this fact and can not afford to dismiss IE6.

If we look at the majority of problems Internet Explorer 6 poses to web developers, we can see that they are related to our Presentation layer. (X)HTML support in IE6 is (a few minor issues notwithstanding) fairly solid and JavaScript libraries like jQuery or Prototype largely solve browser incompatibilities and make cross-browser scripting a real breeze. What we are left with is stunted CSS support, and so developers who must work with IE6 have to make concessions that often seep through to the Content and Behavior layers. Progressive Enrichment seeks to strengthen the three layers of modern web development—providing them the independence from each other that Progressive Enhancement promotes, while at the same time allowing CSS developers to explore newer technologies and techniques.

What is Progressive Enrichment?

Progressive Enrichment is a term coined by Dan Cederholm and described by Jeremy Keith as “Using cool stuff that doesn’t work in IE.” Progressive Enrichment means layering CSS features in much the same way we layer web development technologies. Removing one layer does not affect the base. So the base-level for Progressive Enrichment is CSS that we know will work in Internet Explorer 6. We can then build up layers of advanced CSS to enrich and add detail to our presentation layer. What results is a site that really provides Progressive Enhancement by providing a simplified experience for IE6, and uses the power of CSS to its full advantage for more advanced browers.

Now some might balk at that last sentence. “‘A simplified experience?’ What about my beautiful design?!” I invite those of you who insist on providing the same experience to every browser to ask yourself that question, “Do websites need to look exactly the same in every browser,” and this time think of the very pragmatic consideration of cost. How much does it cost to support your advanced design in Internet Explorer 6? Not only does it require a significant amount of man-hours to troubleshoot the problems that IE6 presents in order to accommodate an advanced design, you end up taxing the user, as well. In order to demonstrate this, I will examine the difficulties introduced by a common design pattern—the rounded corner.

Between a Rounded Corner and a Hard Place

Rounded Corners are ubiquitous in web design. We have all encountered them, and if you are still unsure of how they are created, a quick search will provide more techniques and examples than you could ever want (no, really). For the purpose of this example, let’s suppose we have a box that needs really soft corners, and that box needs to fall in a container that has a background-image—a gradient, and not a solid color. In order to get that soft corner and the transparency, we are going to have to use a PNG. This is nothing groundbreaking. But what challenges does this design create for developing in IE6?

You’re going to have to enable the AlphaImageLoader filter to allow PNG alpha transparency. You can either use a CSS hack to apply the filter or maybe you prefer placing it in a stylesheet along with your other IE fixes and loading it in via conditional comment, thus causing the user to make an additional HTTP request and slowing page load time by a couple of milliseconds. Or you could also use a script that loads in the filter for you. The problem with using the AlphaImageLoader filter is that you can not use background-position, so you are unable to use a CSS image sprite in order to serve your image so you have got to serve multiple images, thus increasing HTTP requests. Because of the inability to position your background-image you will probably have to create an extraneous container div, or maybe even an empty one.

Just to get our nice, soft rounded corner working correctly we have either had our Behavior layer do the work for us or added extra markup to accommodate for IE6’s limitations. But there is a way we can avoid all of these IE6 workarounds and strengthen the layers of Progressive Enhancement.

Don’t serve the rounded corner to IE6

You have devoted considerable time to create a workaround just for IE6 to correctly render that box with the rounded corners. You could not use an image sprite so you had to load in additional images. More HTTP requests results in greater page load time. The AlphaImageLoader can be quite taxing to the system, and if you have multiple PNGs that need to be replaced IE6 users will start to see noticeable slowdown. You have taxed the user for a small design detail and they might not want to stick around your site, waiting for all these little corners to load. This little rounded corner has cost you a lot. So what do you do? In that conditional comment or CSS hack you would have used to load the filter, tell IE6 to not load the background-image. Simple as that. Your IE6 users get a box with a hard edge, your other users do not. You have saved time, both in man-hours and page-load, and you have kept your Content, Presentation, and Behavior layers strong and separate.

The Next Step with CSS3

You have done an amazing thing. You have accepted that websites do not need to look exactly the same in all browsers and in doing so you have begun to embrace the benefits of Progressive Enrichment. The next step is to see what CSS3 has to offer you. Browers like Safari, Firefox, and Opera can already take advantage of some really cool stuff, and Nightly Builds and Betas of these browsers are only adding more. Instead of using a background image to form that rounded corner, take advantage of -moz-border-radius and -webkit-border-radius.

The benefits of Progressive Enrichment are not just in being able to show off the newest CSS techniques, they are in providing real savings in cost, in terms of both page performance and man-hours. With Progressive Enrichment you can have your layer cake and eat it too.

This website has recently been gutted, cleaned, and redesigned, and there are some significant changes to highlight. Before, articles, links and other materials were kept in one “weblog” (in Expression Engine terms) and targeted by using different categories. That has now changed, each content type is kept within it’s own “weblog”, and is pulled together in one stream of thought. Links are now driven by my delicious bookmarks, and I’m also pulling in my twitter status updates. There has been some-ado on the internet about aggregation. There’s facebook and friendfeed that tell others everything that you might be doing at any given point. I figured I could do one better by pulling the data that would fill the timelines of those other sites into my own, personal, space. This is made incredibly easy thanks to the flexible Expression Engine and the FeedGrab plugin. The result is a stream of my public thoughts—making a special note of the term “public”.

Sites like Twitter and Delicious, etc. open an even larger door to publicness, and it is easy, I find, to over-share. I will save us both a bit of embarrassment by keeping some thoughts to myself. I’d like to think I’m practicing restraint by only offering for public consumption that which I think worth ingesting. This follows a mantra recently submitted by Merlin Mann. I have a theory about publishing materials on the internet, and this goes for twitters and blog comments as well—do not post something that your mother would find questionable. I see a lot of vitriol in blog comments, and I think to myself “what would your mother say if she knew you said that?” Call it prudish behavior, I see it as a test to make sure you only publish thoughtful material. The web is the most powerful communication platform that the world has seen. It severely reduces the barriers of entry to publish material. The least we can do is avoid the obvious “FAIL”, and really work to make what we publish smarter, sharper, better.

Not to long ago, my wife and I added “The Films of Charles and Ray Eames” to our Netflix queue. We are admirers and we were curious if there had ever been a documentary or anything done on them. A simple search of “eames” turned up the six disc set. Apparently, not only are the husband and wife team some of the greatest contributors to furniture and industrial design in the 20th century, they were also prolific filmmakers. I wanted to share a transcript of one of their films with you. Charles Eames provides some incredible insight in “Design Q & A.” Questions by Mme. L. Amic. Answers by Charles Eames. On the occasion of the exhibition “Qu’est ce que le design?” (or What is Design?) at the Musée des Arts Décoratifs, Palais de Louvre.

Q: “What is your definition of ‘Design,’ Monsieur Eames?

“One could describe Design as a plan for arranging elements to accomplish a particular purpose.”

Q: “Is Design an expression of art?”

“I would rather say it’s an expression of purpose. It may, if it is good enough, later be judged as art.”

Q: “Is Design a craft for industrial purposes?”

“No, but Design may be a solution to some industrial problems.”

Q: “What are the boundaries of Design?”

“What are the boundaries of problems?”

Q: “Is Design a discipline that concerns itself with only one part of the environment?”

“No.”

Q: “Is it a method of general expression?”

“No. It is a method of action.”

Q: “Is Design a creation of an individual?”

“No, because to be realistic, one must always recognize the influence of those that have gone before.”

Q: “Is Design a creation of a group?”

“Very often.”

Q: “Is there a Design ethic?”

“There are always Design constraints, and these often imply an ethic.”

Q: “Does Design imply the idea of products that are necessarily useful?”

“Yes, even though the use might be very subtle.”

Q: “Is it able to cooperate in the creation of works reserved solely for pleasure?”

“Who would say that pleasure is not useful?”

Q: “Ought form to derive from the analysis of function?”

“The great risk here is that the analysis may be incomplete.”

Q: “Can the computer substitute for the Designer?”

“Probably, in some special cases, but usually the computer is an aid to the Designer.”

Q: “Does Design imply industrial manufacture?”

“Not necessarily.”

Q: “Is Design used to modify an old object through new techniques?”

“This is one kind of Design problem.”

Q: “Is Design used to fit up an existing model so that it is more attractive?”

“One doesn’t usually think of Design in this way.”

Q: “Is Design an element of industrial policy?”

“If Design constraints imply an ethic, and if industrial policy includes ethical principles, then yes—design is an element in an industrial policy.”

Q: “Does the creation of Design admit constraint?”

“Design depends largely on constraints.”

Q: “What constraints?”

“The sum of all constraints. Here is one of the few effective keys to the Design problem: the ability of the Designer to recognize as many of the constraints as possible; his willingness and enthusiasm for working within these constraints. Constraints of price, of size, of strength, of balance, of surface, of time, and so forth. Each problem has its own peculiar list.”

Q: “Does Design obey laws?”

“Aren’t constraints enough?”

Q: “Are there tendencies and schools in Design?”

“Yes, but these are more a measure of human limitations than of ideals.”

Q: “Is Design ephemeral?”

“Some needs are ephemeral. Most designs are ephemeral.”

Q: “Ought Design to tend towards the ephemeral or towards permanence?”

“Those needs and Designs that have a more universal quality tend toward relative permanence.”

Q: “How would you define yourself with respect to a decorator? an interior architect? a stylist?”

“I wouldn’t.”

Q: “To whom does Design address itself: to the greatest number? to the specialists or the enlightened amateur? to a priviledged social class?”

“Design addresses itself to the need.”

Q: “After having answered all these questions, do you feel you have been able to practice the profession of ‘Design’ under satisfactory conditions, or even optimum conditions?”

“Yes.”

Q: “Have you been forced to accept compromises?”

“I don’t remember ever being forced to accept compromises, but I have willingly accepted constraints.”

Q: “What do you feel is the primary condition for the practice of Design and for its propagation?”

“A recognition of need.”

Q: “What is the future of Design?”

Throughout the film the questions are posed in white on black titles. Through the answers, photos are shown of the Eames’s work. With this last question, on the “future of Design,” photos are shown of fruit, flowers, and nature.

You can purchase the full set of The Films of Charles and Ray Eames on Amazon. There are some really fantastic, clever short films in there. Look out for “Powers of Ten” and the brilliant, animated “Mathematics Peep Show.”