August 20, 2009

Rhymes with design

From January to present, I have been working at the University of Arizona's Southwest Environmental Health Sciences Center, located in the College of Pharmacy. I am specifically within the Community Outreach and Education Core and have been doing a variety of tasks, but mostly web design.

Since June, I have mainly been focused on restructuring the architecture of the main website used by The Center, and then re-designing all the individual pages, when applicable. Although I have also done some reference, tutorial creation, and a little bit of instruction, this is the bulk of my job.

Previously, I completely re-designed the Community Outreach website from scratch. You can read my official paper on how I planned that out here (, with sample screen shots of the new design embedded. In accordance with user-friendliness and tenets of design, the goal was cleaner organization, crisper design, and users (most with slow internet connections) had to be kept in mind, which is why everything is in HTML only and all the previous drop down menus had been eliminated. The older site is still up if you'd like to view it ( -- other graduate interns are working on posting the new lesson plan pages, which means it will take awhile longer for the new site to go live.

In contrast, the SWEHSC site I am finishing up presently is meant for researchers mostly, but also the public interested in Center news. The persistent navigation was created with JavaScript, and all pages are PHP compatible. The main problem with this site was the architecture, rather than the design (or both). The previous Webmaster did not fully understand templates, so files were created, but not a single page was made from them. To explain the glory of templates, let's say I wanted to change the URL of one link in the persistent navigation; if all my pages were made from templates, I would only have to open the template and make the adjustment, and then all the pages made from that template would automatically update. If I did not use templates, then depending on how big my site was, I might really need to clear my appointment book for the day (or two) and hunker down so I could make this one change in every single webpage. The site I am working on is quite large, so having no templates in use had become very problematic for anyone needing to make updates, which is why I was asked to begin work on this.

The project doesn't just end there though, because all of the files and folders were not organized very well. Every mini-site had a folder, including a folder for images, plus an image folder with folders inside that, and then another image folder in the templates folder. What's more, some mini-sites were designated multiple site folders when only one was needed; images and pages were not saved with descriptive-enough names, and individual page design was not always consistent. So, it's understandable someone was needed to take this on!

Through this, I have been learning a great deal and re-enforcing many previous held beliefs about designing a web site. Some ideas I can share:

  • Plan first, do later. You have to have a plan first and foremost, and shouldn't begin designing a thing until this is solidified. This plan should extend to the site architecture in regards to folders and files -- to the template design -- to the individual design of the pages.

  • If you can be anal from the start, do it. It's messy to start moving items in and out of folders, as well as deleting and synchronizing the site. If you make a solid plan suitable for the present *and* the future before getting embroiled in many pages, you should be solid, free to just enjoy the individual page design.

  • Always think of who is using your site. The look, the organization, and the formatting/code should fit this group(s). Don't create an enormous website for teachers in poorer districts with limited Internet and slow connections with JavaScript, drop down menus all over the place, and slow-to-load images.

  • In connection with thinking of who is using your site, also consider those with accessibility needs. Always use the alt tag for images for people with JAWS readers, consider those with color blindness, trying not to layer red and green, for example. I myself still have more to learn about accessibility, but taking a course and keeping this in mind is important, and often required.

Those are the main points that have struck home for me through this project and the previous website I worked on. Once the site is finished (next week), I will post a link to share to hopefully better illustrate what I've said here.