The most significant work I’ve done while at Duke Law is my participation in the 2007 redesign. The redesign involved not only a new look, but also a new template, content re-writing, site architecture, new programs and databases, a new CMS, and if that weren’t enough, a new server. The team included members of Duke Law Communications, Web Services, the Office of Computing, and outside design and programming from White Whale Web Services.
My specific responsibilities included:
- Recoding the homepage and third level XHTML to meet the semantic and accessibility requirements of Duke Law.
- Editing, and simplifying, the CSS to reflect the revised XHTML and conform to Duke Law’s model for CSS coding.
- Apply the clinic design, created by Jesse Von Doom of White Whale, to the various clinics at Duke Law.
- Moving content from the old Windows server to the new LAMP server.
- Fixing broken links, images, and all that jazz.
Design
The design was created by While Whale to reflect new marketing goals for the Law School as directed by the Communications Office. Personally, I feel that the design is incredibly successful. The bold, vivid colors bring an energy and excitement not usually attributed to the field of law, whereas the cleanliness (lots of negative space) and simplicity help the content really stand out. Additionally I feel While Whale did an excellent job of creating a site that has a consistent feel while supporting many different types of content.
Code
Speaking personally, the code is one of semantic simplicity and elegance. As an example, the new homepage index file holds about 5 times the information of the previous site, yet requires only half the file size of the original. I can also personally attest that each and every piece of information in the templates has been tagged with a conscious effort to represent its semantic value within the document.
Likewise the CSS achieves a certain simplicity particularly as all unnecessary divs and spans have been tossed by the wayside, allowing each peace of content have a specific purpose. I will confess that there are a few areas that have a bit more code than is currently necessary, but in my limited experience I’ve found that things are apt to change down the road and these items will help make those changes easier and faster.
All this talk of elegance and simplicity is not to say that my task was without its own problems.
IE7
The first involved absolutely position CSS mouseover elements that weren’t quite working right in IE7. Because, IE7 ignores the CSS z-index, several layers were appearing beneath certain page elements instead of above. The short answer to this problem is; there were a few absolute layers on the Duke Law site…now there are less.
Fluid Width
The biggest transition from a code perspective is the move from a fixed 1024 width site to a fluid site. The first problem is that some page elements, like images and tables, had fixed widths that would break the site if it was displayed in an 800×600 environment, so those issues continue to be resolved as they are discovered. The second, and much larger issue, is that within the three column layout the far right column has a fixed width of 200px while the far left column has a proportional width of 18.5ems, and these two columns weren’t in the habit of playing nicely. I tried desperately to get the holy grail working but ran into the firefox flickering that others have mentioned in the discussion as well a few unforeseen IE7 woe’s. Thus, for the time being the feature content (fixed) must come before the primary content (fluid) in the document structure. While this avoids having to use tables, I’m still debating in my mind whether having content presented in a linear order is more important for accessibility than having these sections be collapsible.
Clinics
The clinics work provided a nice reprieve from the torments of coding cross-browser compatible fluid CSS. Essentially, my main work would be most accurately stated as "coloring." Jesse from White Whale had already created a template, and also had a recommended color palate to pull from. However, about halfway through it became apparent that 8 unique clinic designs were not going to be possible using a single color palate. I thus extended the palate to allow for some diversity between clinics. Two in particular stand out to me as impressive.
The Death Penalty (also referred to as the Wrongful Convictions) Clinic sports a very dark palate with a little hot pink to brighten things up. I feel the dark colors were very fitting given the serious nature of the clinic while the hot pink creates a certain edgy-ness that seems to surround individuals working to exonerate those on death row.
The Environmental Law Clinic has a tan and light blue theme that is also featured on Duke Universities Nicholas School of the environment. Because the clinic is a joint project between the Law School and the Nicholas School I felt that the blending of these palates would help communicate the relationship between these two enterprises.
All in all, I’m very impressed with the outcome of the redesign. At the same time, I feel that the design is, for the time being, very uncharacteristic for a university, particularly a law school, and am curious about what the response will be towards the site from the web development community as well as the legal education community.
