Additional web design projects
In some form or another, I have been designing web pages for the past 7 years or so. I took one class while at Purdue, and mostly tinkered with Dreamweaver. Like many others, I got more sophisticated (at least I thought I was!), and started designing web pages using a series of nested tables created from layouts made in Adobe Photoshop-ImageReady. Within the past year, I finally realized that I was all wrong.
Why was I all wrong? Creating web pages with tables - mixing content with presentation - makes them extremely difficult to update. They are also often inaccessible to many with disabilities, take up more bandwidth, easy to mess up, and an all-around-pain. Using the CorridorDesigner project as a catalyst for pursuing web standards-based web design, I am now committed to designing the correct way: using semantic HTML for content, and cascading style sheets for presentation. Some even argue this is the only professional method for web design.
I start all web designs with a pencil and paper. After determining the major structural elements (navigation, content, etc.), I create thumbnail sketches of possible layouts, and determine how the structural elements will relate to each other. I then create an XHTML template page with mock content and style the data using CSS. First I style layout, then navigation, sections, typography, and color. If I am working on a larger project, I like to modularize reused elements such as navigation into PHP files to make updating easier. Because many of the projects I have worked on are static, I have not jumped heavily into web development (database-driven systems), though I am looking forward to it once I get some more free time.
This webpage
100% hand-coded XHTML and CSS. I resisted the temptation to use the Georgia font for headers, instead using Verdana for Headers and sub-navigation and main navigation (small-caps variant), and Trebuchet for body text. If the fonts don't look so hot, you might try turning on ClearType.
One note: while the XHTML for every page on this site validates, a couple CSS hacks used by the lightbox javascript library used to enlarge pictures don't validate.
Colorado Plateau Chapter - Society for Conservation Biology
I volunteered to redesign the webpage for the Colorado Plateau Chapter of the Society for Conservation Biology. After observing their current webpage, the most important elements they are lacking are:
- Consistent, clear navigation: Primary navigation changes on different pages; some links on primary nav go to external pages,
- Consistent typography: On the home page alone, there are 5 different variants of link fonts, with many other variants applied inconsistently for headings throughout the site.
- Layout consistency: Branding/logo area inconsistent across pages; no rhyme or reason to most design elements.
Semantic coding and CSS can go a long way to fixing consistency problems across a site, but it can be hard for a volunteer group to maintain and consistently update a page if they have to write the HTML themselves. To work around this, I decided a Content Management System (CMS) approach would be best. While I've worked with CMSs such as Mambo before, I decided a Wordpress solution would be best, due to its semantic markup, wide user base, and many plug-ins.
I am currently working on creating a template for the Chapter in my spare time. I will hopefully have the site up and running within a month or so. Sorry, no screen shots quite yet.
The embarrassing past
Everyone has to start somewhere, right? Most of the web pages I made from 1999-2005 were either for bands I was in or personal web pages. Nearly everything was created in Dreamweaver using nested tables, and I only used CSS for styling fonts.
Personal webpage from Purdue, 2004-2005
Page for a band I was in, 2004-2005
Page for a band I was in, 2001-2003