Working over the past few months on a fairly large web application with a lot of moving parts, I’ve been doing a lot of thinking about abstraction in the design process, about how best to break it down so that my co-coder and I don’t go crazy wrestling with the complexity. Thankfully, I found a book written over 40 years ago that addresses these design problems directly, in a formal writing style both lucid and technical.

Patterns and models

Christopher Alexander, the architect and theorist best known for popularizing the pattern language method of analyzing design problems, wrote Notes on the Synthesis of Form in 1964, when he was 28 years old. The book was hailed as a breakthrough in design theory, but it also quickly gained notoriety in computer science, as the pioneers in that field recognized that the framework could be adapted to the nascent language structures they were developing (Alexander’s later book A Pattern Language is cited as one of the most influential works leading to the invention of modern object-oriented programming). Instead of a bottom-up approach that seeks to gather existing pattern recipes from those working in the field, Notes outlines a process by which you can methodically break a problem into related sets of diagrammed models, yielding a top-down solution.

To understand the human body you need to know what to consider as its principal functional and structural divisions. You cannot understand it until you recognize the nervous system, the hormonal system, the vasomotor system, the heart, the arms, legs, trunk, head, and so on as entities. You cannot understand chemistry without knowing the pieces of which molecules are made. You cannot claim to have much understanding of the universe until you recognize its galaxies as important pieces. You cannot understand the modern city until you know that although roads are physically intertwined with the distribution of services, the two remain functionally distinct.

One of the comforting sentiments in the book is his recognition that individual humans are unable to intuitively solve complex, modern problems without a visual model or mathematical structure to illustrate how the individual components interrelate (Alexander includes some nifty diagrams and sketches throughout the work).  The epilogue of the book states his focus succinctly:

My main task has been to show that there is a deep and important underlying structural correspondence between the pattern of a problem and the process of designing a physical form which answers that problem. I believe that the great architect has in the past always been aware of the patterned similarity of problem and process, and that it is only the sense of this similarity of structure that ever led him to the design of greats forms.

A design problem is not an optimization problem

A basic tree of possible requirement sets for a kettle

His approach to design is essentially from the negative: given the yin-and-yang interplay of form (e.g. ‘teakettle’) and context (e.g. ‘person wants to boil water for tea in a kitchen’), the best way to the design the form is to develop sets of intuitively clear misfit variables, binary “good/not-good” properties. He describes this relationship in terms of “goodness of fit”:

Again, it is obvious that a kettle which is uncomfortable to hold causes stress, since the context demands that it should be comfortable to hold. The fact that the kettle is for use by human hands makes this no more than common sense. At the opposite extreme, if somebody suggests that the ensemble is stressed if the kettle will not reflect ultraviolet radiation, common sense tells us to reject this — unless some special reason can be given, which shows what damage the absorption of ultraviolet does to the ensemble. […] A design problem is not an optimization problem. […] For most requirements it is important only to satisfy them at a level which suffices to prevent misfit between the form and the context, and to do this in the least arbitrary manner possible.

Potato peelers and pruning shears

One of the crazier diagram sketches from the book's appendix, depicting an optimal layout for a rural Indian village that was planned by Christopher Alexander

If you’ve seen Gary Hustwit’s documentary Objectified, about industrial and product design, you might remember the segment about potato peelers and pruning shears. The designers relate that in their work they seek out the “outliers” first, in this case that these tools need to be comfortable and usable in the hands of a hypothetical elderly, arthritic mother. If you’ve baked in that level of accessibility into your design, then a fortiori you’ve already solved much of the problem for the rest of your users.

In the field of web design and development, this is implemented as progressive enhancement, layering additional presentation and functionality layers on top of an already well-formed, accessible system.

Alexander’s method of breaking down the problem into functional sets makes it easier to recognize these widest-angle “misfit” outliers, and to design with them in mind from the outset, before you begin to design the actual physical form of the building, city, software, etc. If you apply this approach to all of the other aspects of the problem, an individual designer can achieve a solution that is inherently simple and orderly, rather than having to prune down and optimize a cumbersome structure. He makes a compelling case, and I see myself doing a lot more up-front consideration before jumping into my next large project. One final quote to tie things together:

Consider the design of the now familiar one-hole kettle. The single wide short spout embraces a number of requirements: all those which center round the problems of getting water in and out of the kettle, the problem of doing it safely without the lid’s falling off, the problem of making manufacture as simple as possible, the problem of making manufacture as simple as possible, the problem of providing warning when the kettle boils, the need for internal maintenance. In the old kettles these requirements were met separately by three components: a spout for pouring, a hole in the top for filling and cleaning, and a top which kept the steam in and rattled when the kettle boiled. Suddenly, when it became possible to put non-corrosive metals on the market, and cheap, available descaler made it unnecessary to get into the kettle for descaling, it became apparent that all these requirements really had a single center of physical implication, not three. The wide spout can be used for filling and pouring, and as a whistle, and there is no top to fall open and let scalding water out over the pourer’s hands. The set of requirements, once its unity is recognized, leads to a single physical component of the kettle.

(Image at top adapted from photo by Flickr user Todd Ehlers)

I once again had the honor and pleasure of working with my favorite contemporary artists, Teresa Hubbard and Alexander Birchler, this time to redesign and refresh the duo’s web presence. I created the first version of their site back in 2004 and it was time for an overhaul. This design is much cleaner and brighter, highlights their excellent body of work, and creates a framework that can be built upon as new pieces and publications are added. Some portions of the site are still a work in progress, so check back soon for further additions.

Always an honor to get to improve upon a personal favorite!

Some of my earliest childhood memories are of reading the newspaper comics: youthful confusion about the differences between Garfield and Heathcliff, Marmaduke and Howard Huge, the Lockhorns and the Family Circus, wondering who was reading those giant-yet-boring Prince Valiant strips on Sunday, pondering the bizarre evolution of Robotman. I’ve read the comics religiously ever since, missing only a handful of days over the past 20+ years. But there were so many strips I simply ignored, convinced they were stodgy hangers-on from decades long past, or else that they were unfunny legacy soap operas not worth the time to investigate.

Thankfully in 2004 Joshua Fruhlinger started reading the comics so we wouldn’t have to. His curmudgeonly commentary had an opposite effect, though: hundreds of thousands of people suddenly began to appreciate Mary Worth for all of her meddlesome glory, found themselves able to recite the sordid back stories of the girls of Apartment 3G, and learned new ways to determine whether or not you might in fact be a Plugger.

The Comics Curmudgeon is one of the few sites that I visit multiple times a day right in the browser (despite its handy RSS feeds), so it was a great honor to be given the chance to do a facelift of the site. Since I look at it so often, I figured I’d better do a good job. Not to mention that if I broke what was already a cherished site, I’d surely be mauled by his sizable community of rabid comics fans!

Some of the highlights of the redesign:

• An awesome new logo up there in the header depicting Josh as drawn by Ces Marciuliano, writer of Sally Forth and creator of Medium Large
• Brand new, handcrafted WordPress theme, designed to retain some of the lo-fi, Verdana-heavy charm of the old site while cleaning up the layout and typography considerably
• A new jQuery-based @reply system for the comments section, modeled after the ad hoc format that his community evolved and had been manually typing in — his posts often reach 500+ comments, so this helps keep track of who’s talking to whom a bit
• A new Advanced Archives page that lets users build the archive they’d like to see (ex: “Show me this month’s posts about Mary Worth that contain the word “meddle”, in ascending order, five per page”), also allowing for easy bookmarking of their search query
• Cleaner, lighter code and speed optimizations on the server side to help offset the time it takes to pull down the large daily comics
• A flexible “jello” layout that expands and contracts depending on the size of your browser window, to add a bit of whitespace and breathing room without breaking things for folks on smaller screens
• iPhone and “other” mobile versions of the site (which double as low-bandwidth alternatives for those on dialup who’d like a speed boost) with AJAX comment loading

Hopefully it’s all a change for the better (I think it is!), and I look forward to hearing the feedback!

Another freelance project from this Fall: a minimalist and crisp portfolio website for Austin-based photographer/artist Adam Schreiber. This hand-built site leverages clean HTML and jQuery to display his works in a custom set-based image gallery. He’s had great shows at the CRL and Art Palace, and is currently featured in his first museum show at the Contemporary Arts Museum Houston until February 7, 2010, so if you’re in the area be sure to check it out!

Trying to keep up with the proverbial Joneses, today we launched an iPhone / iPod Touch mobile web app for the University of Texas School of Law. If you want to check it out on your iPhone right away, fire up the following link in Safari: http://www.utexas.edu/law/m/

I built it from the ground up with PHP, JavaScript, and a bit of elbow grease, pulling data from a handful of existing sources both on-campus and off. It makes use of the iUI JavaScript framework, which is a great resource for getting up and running quickly (but which also has some drawbacks — I’ll likely switch to pure jQuery for the next major version, but I’m also keeping an eye on the jQTouch project). A quick rundown of the features of the web app:

• Directory Search — if you’re affiliated with UT Law School you can search our internal phone and email directory by name or department, using the native iPhone apps to place calls and send emails directly,
• Event listings and Notices pulled from our existing calendar and Law Mail announcement systems,
• RSS feed view of our press releases,
• Recent Twitter posts from our Communications office (this will make more sense when/if we have more than one Twitter account posting official news, and can combine them into one stream here),
• Maps: detailed building maps, Google maps that use the iPhone location services to guide you to our building, KML-based maps of public parking, nearby hotels, and restaurants,
• and a psuedo-iPhone style photo gallery that’s pulled from our existing mini-gallery on the regular website, adding the ability to flick through the images (did you know that Mobile Safari adds nifty JavaScript events for multi-touch gesture support? I didn’t until this project…)

There are a lot of things already in the works for the next iteration. The number one goal is to support other popular devices, to live up to the ideal of “one web, any browser”. As a developer who has wrestled against the wide range of inconsistent desktop browsers and all of their HTML and CSS inconsistencies over the years, though, it was really, really, nice to work with a single browser that already supports HTML5 and CSS3 presentation out of the box. Now I’m spoiled.

In one of the best eye-tracking technology projects I’ve seen, the folks from the Graffiti Research Lab and FAT Lab have teamed up with Theodore Watson, Zachary Lieberman, and Christine Sugrue to tackle a novel accessibility problem: enabling pioneering graffiti artist Tempt, hospitalized for over two years with the muscle atrophy of ALS (Lou Gehrig’s Disease), to be able to tag again. Out of all of the things I heard about at SXSW this year, I think this project was the thing that excited me the most — open source hardware + software hacking, vision work, accessibility concerns, graffiti and a great story!

The system they’re developing is using the excellent openFrameworks library and two small cameras: the left can be used as a “mouse button” event by holding that eye closed, and the right eye’s pupil is tracked for gesture. The result is a simple hands-free drawing app, which they will connect with the GRL’s laser tag tools, giving Tempt the ability to express himself through graf writing again.

You can check out the rest of their videos under the TEMPT1 tag on fffff.at (“Release early, often, and w/ rap music.”), but here’s a good one to get you started:

Day #6: From Beyond from Evan Roth on Vimeo.

Freshened up my personal blog and portfolio site for 2009. While similar to the transitional look and content that you’ve seen for the past couple of years, this theme has been hand re-written from scratch and features many advancements over the old style. The entire site is better integrated through WordPress than ever before using features newly available in WP 2.7.1 (gravatars, per-post styles, threaded comments, etc), a handful of customized plugins, subtle jQuery enhancements, and Subversion to tie it all together on the backend. I’ve also moved to a new domain after about ten years of being at asnorwood.com. All of the old links should still point to the right place (or get you pretty close), but let me know if you find something missing.

The bulk of the improvements are behind-the-scenes, but I can at least say that the following changes make my life easier and me happier:

• Uploading new portfolio work is much more straightforward.
  No more need for a separate gallery plugin!
• The category and link organization is more sensible! Tags, too!
• Better error-handling — hopefully you won’t end up 404 Not Found, but you at
  least have a sporting chance of getting unstuck now!
• The search engine optimization (I hate that term) seems to be working
  already, too. Thanks, Google!
• The search form pulls up better, more accurate results!

All of this tech stuff is secondary, of course, and I’m still trying to decide how best to balance the blog entries between my different interests. Maybe I’ll eventually split off into two or more distinct sites to keep things from rambling together. I’d also like to figure out a better way to incorporate the side-channel links (currently I’m using del.icio.us) and scrap-collecting elements (I love Tumblr for gathering quotes and other detritus, but not sure how best to tie that content in with my main site). Being nearly the fifteenth anniversary of my first website, you’d think I’d have this all figured out by now!

What do you think? What would you change?

Another fairly straightforward WordPress theme built from the ground up. This time it’s for Marsha Riti’s secondary blog, MIXED BAG, which collects her project instructions, recipes, and Craigslist finds from around Austin (are you obsessed with midcentury modern furniture and weird old junk, too?).

Hey kids! I’ve relaunched my site, moving it to its new official home at adamnorwood.com (goodbye, asnorwood.com). It’s got a new, hopefully better design, a stronger WordPress backend (the bells and whistles have all been polished), and I’ve got a slew of new content coming down the pike (I know, the last real post on here was from…last July? Uh-oh). I’m launching it into the yawning chasm that is SXSW2009, so maybe everyone will be too distracted to notice any temporary glitches or missing bits. For you faithful who are reading this in a feed reader, I thank you and ask your forgiveness for the horribly jumbled updated feed that probably greeted you this morning!

Things to look forward to:

• More posts on art from someone who’s trying to figure it all out, with more of a focus on the local (Austin, Texas) art scene
• Posts on design and technology, including some lessons learned while building up my WordPress chops
• More signal, less noise

As always, I’d love to hear any criticisms, complaints, questions, comments, or commiserations. Leave me your good words!

Another simple site for the University of Texas School of Law, this time for a working group dedicated to investigating the political and cultural implications of the Texas/Mexico border wall currently being erected. The main challenge for the design was to appeal both to the general public looking for basic information about the activities of the group while primarily serving as a clearing house for hundreds of declassified government documents and other academic material about the wall.

The WordPress-powered Bleep Labs site was commissioned by good friend Dr. Bleep himself, purveyor of fine homemade analog synthesizer noise toys. His best-known product is the Thingamagoop, co-designed by cartoon legend Goopy. It’s the beloved device seen above (and more notably seen in MAKE Magazine, boingboing, Wired, and in the hands of some very popular musicians).

I especially enjoyed building the  custom jQuery color picker for the Thingamagoop — it’s lightweight, works in all browsers (including the iPhone), does its best to be accessible, degrades nicely if JavaScript is unavailable, and runs purely off of an XML list of colors currently available.  It also felt great to be working with a product that itself is so nicely designed.

Closed source software like JAWS will face a real challenge as open screen readers like the NVDA project become more mature and build on the popularity of other software like Firefox — while NVDA is certainly lacking the features and polish found in the more widely-used commercial products, the price (free vs. $1000) and ease-of-installation certainly make it compelling.

I also learned about the following accessibility-checking programs and Firefox extensions, immediately adding them to my developer’s toolbox:

• Colour Contrast Analyser, a great tool available for Windows and OS X that gives you two color pickers: one to choose a foreground color (probably your main text color) and a second to pick a color from the background to compare it with. It then gives you detailed contrast ratio information for the two colors along with clear indicators as to whether your site or application complies with the suggested contrast needed for visually impaired users and for colorblindness. It’s one of those tools that simply works as advertised.
• Fangs, a screen reader emulator built as a Firefox extension. When run on a page, Fangs displays a mashed-together, color-highlighted, text-only version of your content as a screen reader would read it aloud. If you’re a sighted web developer, this is a handy tool for getting a quick impression of how your page will hold up under JAWS or similar. (Bonus points for having an attractive, accessible website)
• The Firefox Accessibility Extension from the Illinois Center for Information Technology Accessibility. This tool helps you generate reports on various accessibility issues, can display information about your page’s semantics (headings, list items, links), lets you easily switch into various high contrast modes, etc. It’s a great companion to the awesome Web Developer extension.
• You should also check out Color Oracle, the cross-platform color blindness simulator. It’s pretty sobering if you have regular vision like I do, and it will make you appreciate that yes, two different hues can be very, very similar-looking to a good portion of your audience, and yes that’s a big problem.

(It goes without saying that these are useful but imperfect tools, never capable of giving you the full insight that would come from actual user testing. The only real way to know what real frustrations an impaired user will have with your new web app or site? Get one to come in and give it a spin!)

The other good news coming out of the past couple of weeks is the support the major browser makers are giving to the WAI-ARIA suite of standards for making web applications and forms and controls more semantic and accessible. Opera 9.5, Firefox 3, and now even IE8 (imperfectly?) are slated to support ARIA (whither Safari?). The Secrets of JavaScript Libraries panel discussion at SXSW also brought news that jQuery will soon join the Dojo toolkit in supporting ARIA-enabled widgets (I think that’s where I heard the news, feel free to correct me if I’m wrong).

These are the kinds of open source projects that I really dig: good for users, good for shaking up the established software licensing model, and good for helping solidify support for web standards. Know of any other good tools?

Today sees a new homepage for the University of Texas School of Law. This iteration is more of a realign than a redesign as the decision was made to keep our interior pages intact while we continue a long-term look at our branding and online presence. The biggest design challenge was creating something cleaner and more useful for our visitors while retaining most of the same content and enough of the previous design to tie it in comfortably with our current site’s look-and-feel.

Realignment

The new version emphasizes our communication pieces, changing the rotating banner graphic into something more dynamic: the accompanying text is now HTML-based and will link to richer features similar to our Clinical Education stories. Our previous 75×75 pixel highlight buttons (which themselves were reduced from the intricate 200×140 highlight graphics of two years ago) have been folded into our general News list to help simplify the page. The navigational links were dramatically reorganized to make the hierarchy clearer and more contextual. Everything’s still there, it’s just been reshuffled.

Make it pretty

The goal aesthetically was to reduce the homepage’s clutter and to make the information presented more visually balanced. I designed the old homepage, so I’m to blame! To accommodate the larger banner graphic I increased the width of the site to 840 pixels, and then subdivided that width into a five-column layout. The typography is much more consistent, and care was taken to align the text vertically on a baseline grid. The colors are lifted from the previous version but greatly toned down — far less orange, no more crazy orange-stripe-gradient thing, and a nice white background with some subtle color at the top. Still feels like UT, but doesn’t scream it, and the new design continues to match our internal pages.

Behind the scenes

I’ve shifted the site from Transitional to XHTML 1.0 Strict and have made greater use of XML for the maintenance of the feature stories and news items. The layout and typography are all still handled with plain CSS: if you strip away the stylesheet, you’ll find that the homepage is semantic, streamlined, and very navigable with screenreaders or other assistive technologies. Text can be adjusted in the browser to just about any size without breaking the layout. We’re also sporting a bit of hCard markup so that folks can easily scrape our contact and location info into more useful formats.

Hopefully the refresh is just what we need to help carry us along until the sitewide redesign. I think the updated technology and cleaner look will do a lot for us, and it should help increase our visibility as one of the top-ranked law schools. If you have any comments about the design or about site refreshes, I’d love to hear them.

“If the swift moment I entreat:
Tarry a while! You are so fair!
Then forge the shackles to my feet,
Then I will gladly perish there!
Then let them toll the passing-bell,
Then of your servitude be free,
The clock may stop, its hands fall still,
And time be over then for me!”
 — “Faust,” Norton Critical Edition, lines 1699 – 1706

The above lines are from Goethe’s story about the scholar Dr. Faust and his famous bargain. The scholar promises his soul to the devil in exchange for earthly knowledge and power, on the condition that his life will be forfeit only when he experiences a moment that he wishes would persist. What does this have to do with Internet Explorer 8? It’s a tortured and overblown metaphor to be sure, but for some reason this week’s developments in the world of web development reminded me of this fable.

If you haven’t already, start off with this article from A List Apart and perhaps move along to Eric Meyer’s analysis of the news. These articles appeared almost simultaneously with a post on the IEBlog about the scheme. To grossly summarize, the IE team has worked out a deal with some of the major players in the web standards scene and representatives of the browser makers to introduce a new <meta> tag allowing developers to target specific browser implementations. They argue that this move will help prevent complaints of new browser versions “breaking the web” when they are released to the public.

This news seems to have come as quite a surprise, with heated discussion (mostly negative as far as I can tell, and at times sadly mean-spirited) breaking out in the usual forums. Molly Holzschlag provides the most level-headed analysis I’ve read so far, and alludes to the secretive, NDA-protected discussions that led up to this decision. Even Ars Technica and El Reg have weighed in on the issue.

The contemptible part of the new specification is that it’s designed to allow sites to lock into a current implementation, and Microsoft has made the decision that the default rendering engine for pages lacking this meta tag will be IE7 (not IE8, the browser that’s introducing this feature, or the more sensible default of “latest version”!). The implications of this are that future versions of IE (and other major browsers?) will contain emulation code allowing it to switch back to a previous engine at will so that sites will always look and act the same as the designer intended, quirks and all. If you have IE10 and look at a page lacking the proper meta tag, it will use IE7 to display the page. I guess that means IE8 won’t pass the Acid2 test by default? What does that even mean?

In my humble, semi-educated opinion, this could be a major setback to the web standards movement and to the speedier development of better web technologies (and things already move at a glacial pace in the web world). We’ve been taught for years that the road to enlightenment was paved with progressive enhancement and future-proofing, and this goes against that grain. I find the idea disquieting too for its other more pragmatic implications — how will this actually be implementable? I was relieved to find in a post by Robert O’Callahan, a coder who works on Firefox, that he was puzzled by many of the same questions I was having. Won’t this increase dramatically the footprint of each successive browser release? And I’ve used emulators of all kinds in the past, and they simply aren’t perfect.

Will this end web development as we know it, or kill the open standards movement? No, of course not. But it’s confusing enough and sudden enough that it’s not surprising that more than a few people are upset by the news. Maybe I’ll warm up to it when I hear more specifics about how this will actually work in the real world, but for now I’m highly skeptical.

Update: The debate continues, with two further articles from A List Apart. The first, “They Shoot Browsers, Don’t They?” by Jeremy Keith makes the case that a good beta version of IE8 would go along way towards making the case for one side of the other, depending on how its display holds up on the current web. I’d have to agree, and I’m glad to see ALA giving a contrary opinion some space, after the articles from last month caused such an uproar. Having said that, Zeldman’s “Version Targeting: Threat or Menace?” fans the flames a bit as he tries to make his case again in favor of the default opt-in method. This time it’s revealed that major DOM scripting changes are the root cause of Microsoft’s concern, which I don’t think was mentioned previously. The argument doesn’t seem to stick, at least based on the response the article’s drawn. I still stand by my view that this is a pretty bad deal, and one that’s only intended to help Microsoft’s short-term financial interests. Check out the commentary on these two articles, though, for a handful or other good opinions. Even though there doesn’t seem to be much traction, public discourse is always welcome.

The new Clinical Education at UT Law site, showcasing the large number of community outreach programs available at the school that bring together upperclass students with real-world legal experience and service.

This summer I had the pleasure of designing and coding one of our largest recent projects at UT Law: the new system that would house the collection of English translations of international law for the Institute for Transnational Law. The previous version of the system was an ungainly assortment of static, invalid .html and .shtml SSI files that were inherited from another university (meaning no offense), and at a couple of thousands pages deep it was a bear to maintain. The new version of the site is now available for your perusal.

We consulted with main campus ITS to build the perl scripts that culled the juicy bits from the old html, the resultant data scrubbed a bit and dropped neatly into an Oracle database. After a few strong shots of relational SQL kung fu and a bit of object-oriented PHP, everything is up and running efficiently. The front end display is now (mostly) valid XHTML, with CSS for the visual styling. Google’s much happier, I’m much happier, and hopefully the refreshed site will help make this important legal resource even more visible and valuable.

Freshlaw Central is a site on the University of Texas School of Law’s site aimed at incoming 1L’s (freshman law students, basically, hence the name). The design usually changes every other year to keep things moving forward, and this year the theme went sort of blog-gy and plain but finally with a stronger use of photography.

Website design for the William Wayne Justice Center at the University of Texas School of Law, an organization established for the purpose of promoting public interest law and equal justice in legal education (both things that I admire!). The site needed to match the existing print material provided by the center while still fitting in as an official UT Law site. Thankfully dark browns and gold tones work very nicely with burnt orange, and somehow I even managed to evoke the metallic inks of the print brochure. One of the few (only?) light-text-on-dark-background pages amongst the other 10,000 or so pages on the UT Law site! The interior pages switch to a much more readable dark text on white background, at least.