English @ OU

Colophon

2006, Version Four Redesign

In the Spring of 2006, Eric Kramer and Kelley Evans, with the supervision of Albert Rouzie, redesigned the English department website. The objectives for this redesign were to:

  • refresh the visual design
  • place more content on the front page with a greater emphasis on news and events
  • add a spotlight section for articles about special events or attractions
  • add RSS and XML feeds for news and events
  • incorporate a content management system by Expression Engine
  • allow faculty members to directly edit their faculty pages
  • maintain the ideals and design principles set forth by the Version Three redesign (see below)

Version Three Redesign

From September 2003 to June 2004, Patrick Madden, Sarah Miller, and Eric Kramer redesigned the English Department website. Grant Allen also assisted with the site from Sept. 2003 - Apr. 2004, working on code stripping and database input. We had two primary goals for the new site design: increased accessibility and increased navigability. In addition to outlining the theory behind this redesign, we'd like to acknowledge the many people and sites that assisted us in creating this site.

Theory and Practice of the Redesign

Accessibility

In their constant battle to attract both web designers and users, popular browsers such as Netscape and Internet Explorer offer proprietary code that will create special effects — but only if a user is viewing the site with the correct browser. The browser wars littered the web with non-standard coding tailored to specific browsers and even specific versions of browsers. Since 1994, the World Wide Web Consortium has campaigned against the use of proprietary code and is working with the major browsers to standardize HTML. By supporting the standard W3C codes, browsers and web designers can ensure sites are viewable across platforms, browser versions, and in non-standard viewing devices such as Palm Pilots and cell phones. To increase accessibility further, the W3C and web browsers have increased support for Cascading Style Sheets (CSS), which allows web designers to separate their content from their design. This separation allows devices that cannot render complex designs — like cell phones — easy access to the content of the site. The use of standard code also ensures that a web site will be viewable in future browsers, since W3C specifications call for browsers to continue supporting previous versions of HTML code even as new features are added.

A major portion of our redesign went into meeting W3C standards for both CSS and HTML coding. We use HTML to control the hierarchical structure of elements on the page, and CSS to control the placement and design of each element. Where some browsers (Internet Explorer) do not support CSS fully, we have used a few code hacks; whenever possible, we avoided design elements that would require such hacks. Because we use CSS to control the site design, we were also able to eliminate much of the JavaScript on the previous version of our site. This decreased the size of our pages — and the download time.

For more information on CSS styling and web-standards coding, look at W3C's introduction to their organization, A List Apart's article on transitioning from table hacks to valid CSS/HTML, and Owen Briggs' note on why validation matters.

Navigability

Our second goal in the site redesign was to increase navigability. We began by restructuring the site's architecture so that the directories and sub-directories more accurately reflected their contents. We also separated files by type (images in their own folder, PDF documents in their own folder) and renamed directories and files to help clarify their contents. We restructured our navigation menu so that every file is accessible either from the menu or from a page on the menu (previously some files were accessible only after visiting two or three other pages).

To help visitors searching for specific information, we added a site-wide search powered by Google's Educational Search. We also added a Directory search feature for faculty, staff, and graduate student contact information and a Course search feature for undergraduate and graduate course descriptions. These two search features were developed in-house and use PHP to search a MySQL database. These searches have been linked to allow visitors to find courses taught by a specific instructor or to give detailed information about the instructor of a specific course. Between the improved navigation menu and these detailed search features, site visitors should be able to find information quickly and easily.

A Note on Internet Explorer

Although we used valid HTML and CSS to design this site, Internet Explorer does not fully support CSS styles. A considerable portion of our time was spent working around known Internet Explorer bugs so that the site would be functional for those of you who prefer this browser. In addition, Microsoft is not planning to update Internet Explorer so that it does adhere to web standards; press releases in 2003 announced that Microsoft is stopping development on Macintosh versions and no longer updating stand-alone PC versions of IE. This means the current lack of CSS support will continue to plague designers until Microsoft releases its new operating system. While Internet Explorer stagnates itself and frustrates web designers, other popular browsers such as Netscape and Safari will continue to update and offer new, web-standard features. This is not a case of proprietary coding wars. Microsoft's decision to quit developing IE for Mac and to cease updating IE for PC limits your browsing experience to an already out-dated browser platform that does not fully support internet standards as it is.

Code Help

In the spirit of Open Source coding, we gratefully acknowledge the origins of code we have used and adapted for this site:

CSS Help

  • Patrick Griffiths and Dan Webb's Suckerfish Dropdown menus (from A List Apart) were adapted for this site's pop-out menus (so they would work on Internet Explorer, whose CSS support is incomplete).
  • Adam Kalsey's CSS Tabs with Submenus were adapted for the expanded submenus in certain sections of the site (i.e. this page, under "Technology").

PHP/Database Help

  • TDavid's rotating background colors, date information from PHP.net, and Dan Benjamin's article on randomizing images were used to create the seasonal rotating banner images.
  • The striped results tables on the course catalog pages were adapted from David F. Miller's A List Apart article on CSS Zebra Striping (some PHP script was added to determine which rows should have the colored background).
  • Matthew Mullenweg's Autop function (from PhotoMatt.net) and an adapted Autoli function were used to format information retrieved from the course catalog and directory databases.
  • Matt Wade's code for multi-column layout of search results was used in the directory pages (from Codewalkers).
  • The following sites were helpful during the entire PHP/Database development process: the tutorials and forums at Codewalkers, the forums at Dev Shed, the PHP manual at PHP.net , the forums and code library at PHP Builder, and the forums at PHP Freaks.

Additional Help