Re-Designing the CWRL Web Site: A Look to the Future
Introduction
In the summer of 2003, the CWRL began what is turning into a two-year process of re-designing its web site. The process began with a desire to make the site accessible according to a University of Texas mandate that all "web pages published or hosted by the university . . . comply with the university's web Accessibility Standard." Included as part of the University’s web Guidelines, the accessibility section, entitled “Information Anytime, Anywhere, for Anyone,” has a threefold purpose:
• Provide an accessible web presence that enables all members of the university community full access to university information, programs and activities offered through the web.
• Establish minimum accessibility standards for web pages.
• Encourage web publishers to exceed minimum accessibility standards in ways that befit a first-class university. ( http://www.utexas.edu/web/guidelines/accessibility.html)
With this new mandate, and a call to “exceed minimum accessibility standards,” the staff realized that we now had an opportunity to not only make the site more accessible, but to do what we had been discussing for the better part of the Spring 2003 semester:
• move the old site out of Cold Fusion and into static HTML or SHTML pages so that future designers would not have as great a learning curve;
• present a more professional image of the lab, where new users could immediately learn about the lab, its members, and their activities;
• re-design the look of the page so that it wasn’t as image-heavy;
• re-design the site structure so it was more usable according to latest usability theories.
With these goals in mind, we began looking around the web and in books to learn about the latest in web design, usability, and site organization. Our searches led us to three designers in particular: Jeffrey Zeldman and Eric Meyer, experts in designing pages with Cascading Style Sheets (CSS) who are committed to web Design Standards; and Jakob Nielson, the foremost expert on web usability. From these three designers, we learned about the benefits of CSS design, about having a table-less layout structure, about intuitive site organization, and about other designers who were experimenting with the kinds of things we were interesting in doing -- all in an open source community where code and ideas are freely shared with other designers.
We were also inspired by the blog phenomenon that, as we all know, has taken the web by storm. We liked the fact that the pages could be updated quickly; that even though they were text based and sometimes link-heavy, the pages did not seem to overwhelm the reader; and that their designs were founded on the principles of web standards: accessible pages built using style sheets and XHTML.
The Re-design Process
When the re-design team sat down to consider where to start, we were confronted with what turned out to be the most time-consuming, frustrating, and, ultimately, most important part of the re-design process: unpacking the current site’s design structure. While prior versions of the CWRL home page made it look as if the site was nicely organized into clearly defined nodes (see figures 1 and 2, “Prior CWRL Home Pages”), behind the curtains the structure was a disaster – which can only be expected after several years of different developers working with and adding to the site. There were broken links and links that were repeated on different pages and in different nodes. Content was duplicated across nodes. There were unfinished pages, and outdated pages. So, we broke the unpacking into sections, with each of us unpacking a different node. The results looked more like a maze than anything resembling an organizational structure (for example, see figure 3, “Staffing Node of Old CWRL Site”).
Our initial proposed re-design contained the following sections:
• About the CWRL
• Student Resources
• Teaching Resources
• Staffing Resources
• Technology and Pedagogy
• Proctor Manual
• Professional Development
We presented our re-design to the summer staff with two pages of explanations and goals, which included:
• The home page will not just be a list of links, but will have several different features, from a description of what the CWRL is, to important events, to extracts from newsletter articles and white papers.
• Each section front page will have a textual description of that section instead of just links.
• Each page will have a link for “accessibility instructions for people with disabilities,” which explains the site architecture and what accessibility features the site has
• All changes are to be made after determining the specific audience for each section, and the suspected goals of the user when looking for information: for example, if a user is looking for information on how to use a certain software application, that user – no matter if s/he is a teacher, will most likely go to the Tech and Tutorials section, not the Teaching Resources section.
After our meeting – in which it was decided that the CWRL would take a lead role in advocating for designing web pages that are accessible for people with disabilities – we came back with the structure that we have today. In the new structure, we brought the Proctor Manual into the Staffing Resources, where it belongs, and created an Accessibility Section, which contains accessibility tutorials created by members of the lab (see figure 4, “Current CWRL Site Structure”).
Why Web Standards and Cascading Style Sheets?
We began the process of re-designing the CWRL web site with a look to the future, considering where the lab was going to be heading in the next few years, and what kinds of technology people are going to be using to design future web pages. We wanted a web site that would not only present information about innovative teaching and learning, but also represent innovative design itself. During our research into current design trends, we came across a startling statement:
An equal opportunity disease afflicts nearly every site now on the web, from the humblest personal home pages to the multimillion-dollar sites of corporate giants. Cunning and insidious, the disease goes largely unrecognized because it is based in industry norms. Although their owners and managers might not know it yet, 99.9% of all websites are obsolete.
These sites might look and work all right in mainstream, desktop browsers. . . . But outside these fault-tolerant environments, the symptoms of disease and decay have already started to appear.
In “off-brand” browsers, in screen readers used by people with disabilities, and in increasingly popular nontraditional devices from Palm Pilots to web-enabled cell phones, many of these sites have never worked and still don’t. . . . (Zeldman, Designing With Web Standards)
Hyperbole aside, when we read this statement we knew that the CWRL web site was one of those 99.9% of sites that were “obsolete.”
This important recognition brought us into the world of web Standards, which, according to the web Standards Project, are a set of “technologies . . . carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web.” Examples of those “technologies” include: Structural Languages, such as XHTML and XML; Presentation Languages, such as CSS, CSS2, and CSS3; and “emerging standards, such as those for television– and PDA–based browsers” (http://www.webstandards.org/about/). Problems began because “though leading browser makers have been involved in the creation of web standards since W3C [World Wide web Consortium] was formed, for many years compliance was observed in the breach. By releasing browsers that failed to uniformly support standards, manufacturers needlessly fragmented the web, injuring designers, developers, users, and businesses alike” (http://www.webstandards.org/about/). A lack of standards-compliant browsers resulted in designers’ essentially ignoring standards. Those that did – and do – design with standards realized the difficulty of their task because their pages rendered differently in different browsers. Ironically, that fact that browsers are not consistent in their standards compliance has fueled the open creativity of the online community, where designers share CSS “hacks” – innovative workarounds that result in pages looking the same across browsers despite their compliance differences.
Ultimately, designing according to web Standards means designing pages as they were meant to be designed: content and structure are independent of each other and in separate documents; Cascading Style Sheets are employed to control presentation; and pages are coded with accessibility in mind and not as an afterthought. These ideals closely resemble the CWRL’s goals at the beginning of the re-design project, and were complemented by the vibrant, open online web standards community. Not only is the community dedicated to advancing web standards use, it is a place where designers share their code and ideas, and encourage experimentation. Sites like A List Apart and The CSS Zen Gardenconsistently challenge designers to try new, innovative ideas, and to build those innovations into their own sites.
Employing web Standards and, in particular, style sheets provided the design team with the flexibility and freedom to experiment with the new design, and as a result, the site has new layout (see figure 5, “Current CWRL Site”) with the following features:
• Accessible for people with disabilities according to Section 508, and Priorities 1, 2, and 3 of the W3C – far exceeding the university’s guidelines
• Validates as acceptable CSS and XHTML design
• Site skins that provide users with an ability to select the appearance of the site
• A large text version of the site
• A new organizational structure, with new Professional Development and Accessibility sections
• A style sheet for the printer, which strips off all navigation and sub-navigation links and prints only the page content
• A new site map structured according to Jakob Neilson’s recommendations
The web site placed second overall and first at UT in the annual AIR-University web accessibility competition. The design team is one of several profiled in the story entitled "Record number compete in 2003 AIR-U competition.”
Professionalization and the Future of the CWRL Site
One of the primary goals of the re-design was to create a Professional Development section; but, over time, the exact nature of that section has been difficult to pin down. One of the original ideas for the section was to have an assignment archive – a robust collection of computer classroom-related assignments, with corresponding samples of student work. The idea of an assignment database led me to conceive of what I call CWRL IDeAS, or the CWRL Innovative Design Archives, which would house not just assignments, but also student work, and links to new and interesting web design ideas. We also thought that part of the section should provide information on calls for papers, conferences, grants, etc. Then we thought it would be nice to include a page or two that would highlight instructors’ current scholarly work – titles and abstracts of conference presentations and journal articles. We also wanted to have a way to highlight the articles in the CWRL Newsletter, instructor blogs, and other important announcements in a way that would work well with the structure of the site.
These ideas generated questions:
• What actually is the goal of the site?
• Who is the audience?
• What do we want the audience to get out of the site?
• Who are we going to send to the site?
• How can the site better place the CWRL into the field of Computers and English?
In discussing the answers to these questions, we have again decided to re-design the structure and layout of the site, but this time have the site framed by the idea that we want the site to showcase the innovative ideas – teaching, design, scholarship – that are coming out of the lab, and not what the site current showcases: how-tos, tutorials, etc. Those features will be a part of the site – they are necessary for the lab to function – but if we want to present ourselves more professionally, we need to have the site represent that professionalism.
Concluding Thoughts
When we started the re-design process we were aware that the new site would affect the image of the lab online; we did not, however, anticipate how our new design theories would alter the how we present design to our instructors during orientation, cohorts, and workshops. Future lab administrators should be aware of how the ideas behind the re-design are felt in other aspects of life in the lab, notably in instructor web sites and how instructors’ feel about their web site design skills. With the new web site came a great deal of enthusiasm for table-less layout and CSS, and in orientation we advocated those techniques. In hindsight, that may not have been the best suggestion. In short, we failed to understand the steep learning curve associated with CSS and web standards design. The ideas behind CSS and designing with web standards are not hard to grasp; but the fact that pages do not render consistently across browsers necessitates a great deal of patience and time to fix bugs with hacks that can be found only online. Time and patience are not on the side of graduate student instructors one week before classes start. We tried to alleviate some of the growing pains associated with learning CSS by providing templates teachers could build on for their own course web pages. These helped a little, but because the templates were designed using CSS for layout, instructors were quickly frustrated when even the simplest design element – adding text – destroyed the layout in ways they were unable to fix. Ultimately because instructors could create excellent course-specific pages in less time using Dreamweaver’s What You See is What You Get (WYSiWYG) interface, few instructors used the templates. Indeed, according to Andy Budd, “In my experience, there is probably around a 6-12 month learning curve from knowing basic CSS to actually being able to develop CSS based sites competently” (http://www.andybudd.com/archives/2004/05/an_objective_look_at_table_based_vs_css_based_design/).
So, a question remains: How do we advocate for web standards when we know the learning curve for instructors is going to be greater than they have time for? I suggest we introduce instructors to a “hybrid layout,” in which tables are still used for layout, but CSS is used for presentation elements (font color, font size, background color, background images, etc.). Hybrid layouts alleviate almost all cross-browser problems, and will bring instructors to web standards more slowly by first gaining experience with the more style-specific elements of style sheets. Because WYSiWYGs design most pages with tables by default, hybrid layouts also have the advantage of being more WYSiWYG-friendly, which is important for instructors who do not know HTML or XHTML.
In our excitement to bring the future of web design to the CWRL site, we overlooked our primary reason for re-designing the site in the first place: to “move the old site out of Cold Fusion and into static HTML or SHTML pages so that future designers would not have as great a learning curve.” We also overlooked the primary concern of the majority of our instructors (many of whom are first introduced to web design during orientation): to have their course content online for the first class day and hope that their students are able to use the course site to enhance their learning and class experience. Practicality and functionality are two necessary and essential parts of an early designer’s web site; aesthetics come later; and structural intricacies come even later. Unfortunately, CSS-based layouts, while often beautiful, do not serve instructors well at first. The frustration that comes with CSS-based layout can often alienate those who we hope will eventually want to learn more about design so their future course pages can be more interesting and interactive. In short: “Table based design will be around for a long time. To encourage developer buy-in we need to lead by example and help reduce the barriers to entry. Not create new barriers. We need to be honest and up-front about the benefits as well as the cost. Developing CSS sites can be hard and it can time consuming. In certain circumstances using tables for layout can make much more sense than CSS” (http://www.andybudd.com/archives/2004/05/an_objective_look_at_table_based_vs_css_based_design/).
