Duke Law 2007 Redesign

April 15th, 2007 / 2 Comments

The most significant work I’ve done while at Duke Law is my contribution to 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 tags have been tossed by the wayside, allowing each piece of content have a specific purpose. There are a few areas that have a bit more code than is currently necessary, but in my 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 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.

Comments (2)

  1. Hi,The right sidebar is toicnuhg the middle column in the homepage as you can see. I want to change the size same like left sidebar, not toicnuhg the middle column.Thanks for reply.

  2. life insurance quotes / December 24, 2014 / http://lifeinsurance.media

    Always a good job right here. Keep rolling on through.

Leave A Response

You may use the <a>, <em>, and <strong> tags. Your email address will not be published.

Related Posts

Next Post »

« Previous Post When is War "Just?" Thoughts on "Just War"

You have…shown a real grasp of what we are trying to accomplish in a way that is really both magnificent and flattering.

Prof. James Boyle

About

Hi, my name is Scott and I design websites. You can see some of them by visiting my portfolio. When I have the time (which is seldom these days) I like to blog about Christianity, especially theology/ethics. If you want to know more you can read my about page or follow me on Twitter.

Contact

You're visiting scottlenger.com
Contact

Credit

Photo: The Liberty Pole in Rochester, NY, by Scott
Except where otherwise noted, this site is licensed under a CC BY-NC-SA 3.0 License.

Technical

This site validates as XHTML 1.0 Strict
and uses CSS to meet the minimum amount of flair,
does its best to make itself accessible,
respects your privacy,
and is juvenated by WordPress.
This site was created on an energy efficient computer.

Addenda

Reading

Code: And Other Laws of Cyberspace, Version 2.0