Context

For ENGL 6030: Web Design and Usability, my group had the task of redesigning the Southeastern Conference on Linguistics (SECOL) website. For the task, we invented a location for SECOL 2009. My part of the group effort involved coding the HTML and CSS backbone for the site. The other three members would supply the content via e-mail which I would plug into the site. Creating this site was a vastly different task than creating an already designed site. I had no template or previous design to use-- I had to create everything for the site using my own techniques and creativity.

Audience

The primary audience for the site was other SECOL members interested in the conference. They would visit the site for key information, such as Calls for Papers, locations, and schedules. Since the technology expertise would range among the SECOL members, we attempted to make the page as straightforward as possible. The links mimicked tabs on a folder to ease navigation, the registration form was an editable PDF that may be submitted through the website, and schedules were available in various forms and formats.

Aside from the end-user audience, I also had to consider the person who would edit the page in the future. Dr. Sabino requested the page to be editable in Frontpage, so I added code to allow her that functionality. Though she may seem to be an authoritative audience as she has final say over whether the page is used or not, I see her as more of an invisible colleague on the project. I was assigned to create a website that will then be taken over by another person. The content that my group and I place on the website is not real (aside from historical information)-- Dr. Sabino would be providing the content. The site will not be finished when Dr. Sabino takes over, but in a rough draft phase. In this regard, she is part of our group, the next step in the design process. Like the other MTPC course work samples, the teacher of the course is the authoritative audience. While Dr. Sabino may or may not use the website, Dr. Yeats has final say on how effective our version is. And since Dr. Yeats is a technical communicator, he is firmly rooted in user-centered design. He also had a more direct part of the design process through memos, schedules, and proposals we presented to him during the project.

Process

My first task was to develop a rough design based on a preliminary meeting. Since I had no template, I dreamed up a scheme that would fit our desired product, but would be feasible for me. During our next brainstorming session, I displayed the page I created on an overhead projector, alternating between the live website and the HTML/CSS code. While we all talked about the design, I was able to move and augment the code so we could see a fluid, accurate representation of the webpage. Seeing the page transform on the screen allowed us to try new things, leading us to a design we all agreed on. It was my job then to streamline the site and make it work.

After agreeing on a tabbed folder style page, I began to augment the HTML/CSS to create our vision. One new CSS technique I taught myself for the site was the tab navigation system. The tabs at the top were highlighted depending on the visitor. The active page had a tab that appears part of the page, while the other tabs were darker, as to appear behind the page. This tabbed folder navigation system fitted SECOL's personality as a scholarly organization.

I learned an effective method for creating a tab menu. Aside from a specific tag in the HTML code, the HTML code (not the content) is identical throughout the site. The body tag signals to the CSS to use the specific active tab for that page. When I was asked to create a new tab, I only had to copy/paste one of the previous tab's HTML code and change the class and reference. Then in the CSS, I would add that class to the navigation list. The tab would be created. For the tab to function like the others, I would insert a specific tag into the new page. With this tab system, a person with limited coding ability could add a new, functional tab. The person taking over may not understand what exactly is happening, but it is a process that can be duplicated verbatim if shown a few times.

Reflections

This is useful since the person taking over the website asked us to ensure it could be editable in Frontpage. After showing her once how to do it, she would be able to maintain the navigation for the conference. The remaining element of the page to be updated would be the actual content. To facilitate this, I added comments into the HTML to show where she may add/edit/delete content.

Since we were limited by time and since SECOL may not even use the page, I did not make all the comments/additions I would prefer to make. If this were a contracted job, I would have spent more time preparing it to be taken over. For example, I would have inserted comments for all the elements in the HTML code and for all the parts of the CSS (aside from the already implemented section comments). I would have also created a few headings so the person would have pre-built styles to use while developing content for the webpage.

Aside from creating a site that was fully functional with the capability of future revision through Frontpage, I also had to manage group created content for the page. Group members sent me HTML files to incorporate into the website. These files varied from easily adaptable to difficult or convoluted. Although the varied file formats led to difficulty in managing some of the pages, the formats forced me to adapt other content for the page, an ability invaluable for a group-focused corporate world. Our group certainly had a "finished text [that was] the product of an interactive and negotiated exchange among the writers." (Johnson) Although I didn't write the content and they didn't write an excessive amount of HTML, we both had to negotiate our own contributions to fit the other's medium. I had to alter the design of the site to ensure the content fit as it should, while they had to format their text to fit into the overall site design.