The goal for work this semester is to achieve a fully functional version of our virtual course catalog website, which has been completely redesigned from the ground up. This iteration is intended to be used as a resource by the department this semester, and so much of the work involved focuses on perfect functionality and fine-tuning.
When first tasked with rebuilding the website, I decided to try out the relatively new HTML5 website editor called Wix. Wix proved to be highly versatile, allowing me to fully customize the aesthetic of the site and rebuild the same website elements with very little hassle. The resulting rebuild can be seen in the image below.
The textured background and theme customization was incredibly easy and very useful. Unfortunately, as a free service, Wix kept some of its abilities behind a paywall. We weren't able to fully customize the drop menus the way we wanted, and we noticed some other technical issues as well. We decided that Wix had definitely proven to be a useful tool, but we would look at our other options before committing to a full site rebuild using this technology.
Weebly is a popular free website building client praised for its ease of use and capability in terms of building professional looking websites. While it is not quite as capable as Wix in terms of placing elements completely freely and all-but-absolute aesthetic control, many of Weebly's advantages go hand-in-hand with its constraints. As our school careers have brought us to use Weebly many times before already, we decided it would be our next choice at attempting the website rebuild.
Weebly allowed us to build the site exactly as we had envisioned it from the start. With some tinkering, we were even able to get the drop down menus to function precisely as we intended, and our course catalog was looking better than ever. Below is an image of the website as it existed as 10/18/13.
Now that we had the functionality of the site down, we spent most of our time focused on filling the site which as much applicable information as possible, with intentions to tinker further with the aesthetic of the site (it looked sort of bland). Though Weebly's engine doesn't necessarily let you do too much graphical customization inherently, it does allow you to edit the HTML of the site, which is likely where we would go to do most of our aesthetic work.
Reflection & Current Version as of Semester Completion
After rebuilding the site using the Weebly engine and deciding that we were happy with the level of functionality and customizability I invested most of my time into filling the website with the abundance of information at our disposal and tinkering with the site aesthetic. Compared to last semester's website version, Weebly allowed me to do some really neat stuff with the website without having to invest hours upon hours to accomplish even the most simple of tasks, such as centering elements or changing color schemes (things like this slowed me down tremendously). Using Weebly's engine I was able to place all of the information and other elements exactly as we envisioned, finally creating the electronic Writing Arts course catalog that we had set out to accomplish from the start.
Once all of the basic class information was in place, such as course descriptions, completed class videos, and CRN numbers, I was able to spend some time tinkering with the look of the site. Even after completing last semester's website iteration, I was very unhappy with the way the website turned out aesthetically. Though I had truly invested countless hours just to make the website look the way it did, I knew that it didn't look quite as professional or polished as I would have liked it to. For me to be able to customize the website so fluidly with Weebly was a breath of fresh air, and so I tried to take full advantage of it. We had already picked a very clean template to build the website on, but I wanted to increase the color presence throughout the theme to make it feel less bland. To do this, I edited the CSS code of the site to include colored menu links as well as a colored box for the users current page. This small feature is something that made the website feel very unfamiliar when it was missing - any professional website you visit has an indicator on the menu bar for the users current page, so I wanted to make sure our website had one that was clearly visible and suited to the website's theme.
After tinkering with the CSS color scheming, we decided that the website definitely needed some sort of textured wallpaper, as the plain white background very pretty boring. I toyed with a few ideas, and even managed to get the wallpaper from the beginning of the semester's Wix website iteration to see if it would look good on our Weebly site. While it looked significantly better than the plain white wallpaper, it still wasn't quite what we were looking for. We wanted something representative of the major (we were really trying to stick with a notebook paper kind of theme) while also subtle and not intrusive. I whipped up a crinkled paper effect in Photoshop, giving us the "wrinkled" paper look we have on the website today. By reducing the transparency enough, something that took several attempts to get just right, we were satisfied in that we could see the "wrinkled" texture enough to give the site personality without distracting the user or being too obtrusive.
Now that we were satisfied with the clean and professional aesthetic of the site, I concentrated my efforts once more into filling the website with as much information as I could. The first step I took was to include course prerequisites, something that is a definite necessity for a hopeful course catalog like our own. After filling in all course prerequisites I felt that the site should be able to link back to Rowan's website for reference as much as possible. At this point I set out to link each class's page with its official Rowan catalog entry on the school's website, provided below the course video (or placeholder image, as seen to the right) for easy access and instant reference.
Perhaps the most important part of the new information on our site, since our project was being undertaken at the same time as the adoption of the new major structure, we were able to provide extensive and thorough information about each of the new writing specializations. With a specific New Media, Creative Writing, and Professional Writing specialization page we were able to provide students with a concise breakdown and explanation of the new specializations, including a list of all of the course options within that specialization. This was exciting for me because I felt that our website had something unique to offer students, as our website was the only unified, clearly visual representation of the latest Writing Arts major, with all of the necessary information available at users' fingertips. Perhaps even more exciting, during our pursuit of information for the new writing specializations to put on our site, I found that there did not currently exist any short blurbs describing each specialization specifically. By reaching out to Dr. Tweedie and the respective specialization heads, we were able to create a conversation about this situation and have it addressed, serving a purpose for the Writing Arts community as a whole.