Logging On
Karl Stolley, Kathie Gosset, and Douglas Eyman, Kairos Redesign Team
The Whys and Wherefores of the 3rd Kairos Design
Karl Stolley, Kathie Gossett, & Douglas Eyman
Issue 13.1 features the debut of the third major design for Kairos—it has been a long time coming and a great deal of thought and work went into the decisions we've made about the relationship between the design of the journal and the role it plays as a leading proponent of digital rhetoric in the field of writing studies.
Design as Rhetoric: A Design History of Kairos
When Kairos launched its first issue in January of 1996, it was clear that the design reflected the possibilities and affordances available at that time. The original editors wanted to be certain that readers would immediately see that the journal published webtexts rather than traditional print articles and that the journal explicitly valued design as an integral element of argumentation for digital rhetoric. In terms of content, design, and function, Kairos was cutting edge. The initial design was color-rich, with a darker series of elements framing the brighter table of contents or content area, and it used frames. Many frames. The second issue also introduced the "remote," which was supposed to provide reader access to the journal's contents as well as a series of online resources such as search engines and online dictionaries. The remote appeared in a separate window and wasn't always accessible to the reader, as it sometimes would be closed or lost. Indeed, one of the flaws of the original design was its lack of accessibility. But in 1995 (the year the journal was designed and implemented), we didn't have a good sense of what was accessible or inaccessible; CSS was available but not supported by browsers at the time, and the question of standards had not yet become a pressing issue for web designers and users.
Over the course of the first three years, the number of frames was scaled back and the information architecture behind the journal's interface underwent a series of structural improvements. In 1999, the first major redesign of the journal (beginning with issue 4.1) eliminated frames from the top-level navigation and content pages and established a cleaner, brighter look. The only frames in this design were used in the branding of the webtexts published in each issue (which now featured a "binder" that ran along the left side of the screen, indicating the volume and issue in which the webtext appeared and providing links back to the main journal site and the issue home page).
The original and second designs were both created by Jason Teague, a talented designer who went on to author several excellent web design books. We lost Jason's talent to the greener (and paying) pastures of industry, which is one of the reasons that the current redesign has taken so long—we had to wait until we could recruit a serious coder who understood both the journal and the importance of standards-compliant infrastructure design and the relationship between design and rhetoric as taken up by the mission of Kairos.
When Karl Stolley joined the staff as co-editor of Inventio, we discovered that we had found the person who could do the heavy lifting of the redesign coding while also championing standards and pushing our field to pay more attention to the rhetorics of coding and design. Our Topoi Assistant Editor Kathie Gossett was selected to serve as program manager and to guide the several research projects that were to inform the work of developing the new design. Douglas Eyman, Kairos Senior Editor, rounded out the initial design team.
For the past several years, the editors have been interested in implementing a series of key improvements for the journal, aimed at improving both usability and usefulness for readers and scholars. In particular, we wanted the redesign to provide a platform that would allow us to
- include metadata in the design specs
- remove frames altogether
- provide tools for readers and writers
- maintain an open design space for authors
Redesign Project Implementation
The team decided early on that the redesign would follow, as closely as possible, the World Wide Web Consortium (W3C) standards for the XHTML and CSS web languages. In addition to reflecting practices outlined by the W3C, the team also took into account recommended practices by leading web design groups like the Web Standards Project (WaSP), and even Karl's Lo-Fi Manifesto, from the special Kairos issues on Manifestos. This attention to open standards, and the issues of accessibility, cross-browser and cross-platform compatibility that standards engender makes Kairos a leading example among online journals.
While the Kairos redesign is most obviously cosmetic, given its new visual design, many of the more exciting changes are below the surface of the visible page. The team made as many efforts as possible to ensure that all of the journal's pages follow the rules for XHTML 1.0 Strict (although work continues on bringing some legacy markup in line with XHTML). This is a major structural change, improving on design practices of the past (e.g., using tables for page layout, or placing visual attributes for colors, etc. in the HTML) while deliberately making further structural and design enhancements easier than ever. And as we discuss below, this new structure has significant implications for the ongoing development of the journal.
The visual redesign is rooted in the structural overhaul of the site's XHTML. One of the lingering myths about web design is that CSS solves all design problems on its own. But CSS relies entirely on a well-structured XHTML document to make everything from typography to complicated layouts possible. And while work continues to make sure the design works in legacy versions of Internet Explorer, the CSS was designed with standards-compliant browsers like Firefox and Safari in mind. This keeps the journal moving forward, adopting the most current design practices—while explicitly acknowledging the fact that the journal must continue to serve the needs of users who continue to use older browsers.
The visual design itself is deliberately austere: The most important parts of the journal are still its webtexts, which are now more explicitly acknowledged by the clickable thumbnail images on the issue table of contents pages. Eventually, these thumbnails will also be used in RSS feeds for the journal, allowing Kairos's readers to syndicate Table of Contents content on their own blogs and websites. The new visual design will continue to evolve, of course. And better still, the CSS design scheme uses multiple per-issue CSS files, allowing the journal editors to control any aspect of the visual design they require for individual issues. This could include anything from swapping in a new color scheme to making radical adjustments to the layout. And all of this happens without anyone having to touch the XHTML structure. The visual design of the journal is now completely independent from the webtexts it publishes: Editors can work with the design as much as they would like.
At the same time, the new Kairos design is more accessible than ever to adaptive technologies: Its pure structural use of XHTML will work seamlessly with screen readers, like JAWS, just as it will with Braille readers. And because search engines rely on the same clean structure that adaptive technologies do, Kairos's findability is also going to see a marked improvement. Eventually, the design team will work up a simple style sheet that will work with mobile devices, like cell phones and PDAs, which will present the journal in a design suited to small screens.
But perhaps the feature of the redesign that we are most proud of is the branding of Kairos webtexts through the new reader toolbar, which replaces the HTML frameset that the journal has used to brand webtexts for so many years. Framesets are notorious for being hurdles to accessibility, and are completely incompatible with the preferred XHTML 1.0 Strict standard for page markup.
The challenge with the toolbar, though, was to create something that would do the branding work of a frameset, but that could also be edited, expanded, and changed from a single piece of code. By extension, the toolbar needed to be easily added to webtexts, and work with the range of content—from Flash movies to basic HTML pages—that comprise Kairos webtexts. But beyond simply branding the journal, we wanted the new toolbar to provide a standard citation for the webtext being viewed. And eventually, we want the toolbar to accomodate more advanced functionality like note-taking and public comments on webtexts.
Karl began using the MooTools JavaScript library to sketch out a solution, one that would use design principles similar to the Yahoo! Media Player toolbar. The main feature of the Yahoo! toolbar is that it could be added to virtually any web page by cutting and pasting a single call to JavaScript in the head area of an HTML document.
The Kairos toolbar adds itself structurally to the HTML of any webtext (meaning that it should still be accessible to adaptive technologies that support JavaScript and the Document Object Model, or DOM), and even calls up toolbar-specific graphics and CSS to provide styling. This, coupled with Doug's development of a metadata scheme based on Dublin Core, makes the toolbar function.
Mousing over the logo expands the toolbar to reveal the journal's name and current issue, with links to both the journal home page and the current webtext's respective Table of Contents. One of the best design decisions that previous Kairos designers made was to use a consistent directory/folder structure for each issue. The toolbar, in other words, looks for and uses, say /13.1/ from the URL to both build the citation and to provide links to the appropriate table of contents. This is why the toolbar can be used for all webtexts to come (well, up through volume 999, unless the code is tweaked a bit) while also being retrofitted to past webtexts.
And in an example of the philosophy of the Kairos redesign, any required changes to the toolbar can be accomplished by editing a single JavaScript file and a set of CSS files. Those changes will then be reflected across the entire journal.
Anticipating (and Making) the Future
We are obviously very proud of our work on the redesign. At the same time, we urge Kairos's readers to view it in the same light we do: not as a finished project, but as a marker or a pause within a larger series of changes that will continue indefinitely into the journal's future.
Part of this view is simply pragmatic: We will continue to discover bugs and shortcomings in the design that will have to be addressed. But the larger part of this view falls squarely within the Kairos ethos of tirelessly working to move the important areas of digital rhetoric, technology, and pedagogy forward within our field. We want the journal to reflect best practices in design at any given moment: This alone, we hope, will inspire others to see digital production as always a moving target. No one ever fully learns or implements best practices because those practices shift over time.
Nevertheless, we have made a number of choices in the redesign to not just anticipate the future, but to make it: The 13.1 issue release version of the journal's web pages are still static XHTML. However, Karl has already written most of a PHP-based system that will allow global changes to Kairos's pages (e.g., adding or rearranging elements in the navigation) from a single source. The way that the static XHTML has been structured will make the PHP switch simple; the more complex work will be to implement the PHP in such a way as to make it invisible by not affecting any of the URLs. But we have a plan for this, too.
And just as we wrote XHTML deliberately to accommodate PHP, the PHP has also been written with a future, widespread use of databases in mind. Eventually, all of the journal's core content will be pulled from a database, making it possible for the journal's staff to quickly and easily edit content about everything from the submission process to the editorial board list. Going even further into the future, we have plans in the works for building an entire system to handle webtexts from the earliest author queries, through the review and editing processes, up through the actual publication of webtexts in each issue of the journal.
Those later steps are a ways off, though, even as their planning is going on as we write about the launch of the redesign. We hope that you will share your views—positive and negative—as the redesign of Kairos continues to emerge.
