When first beginning construction on this website, I knew that I wanted to keep it very simple and base, using the same methodology I had for the Mini Zen project: that simple elegance and carefully placed and thought out content is far more effective stylistically and from the users perspective than overloading the site with too much pizzazz, flash, and needless content or fluff. Keeping this in mind, I set to work designing the basic style and structure of the site. That is, a basic home page with links to sub-pages with more information. A specific link would take the user to a page with that title and subject matter. It is a simple hierarchy of links all stemming from the main page.

In the initial and middle stages of this project, I had very normal content choices on the site. A link to more about me, some miscellaneous items, a page hosting some of my art, another page hosting a link to my music project, and a final page hosting some examples of my work. Then I started to reconsider. I really didn't have a lot to showcase. I am only a freshman, and the idea that I would be making this site for future reference for possible employers, hosting my resume, etc didn't seem very fitting. After all, I don't even have a resume yet, and I'm not currently looking for a career. So I decided that I should make this site more original, filled with content I thought would be neat to include. I do have some examples of some of my work (three papers I wrote for an East Asian studies class), but that is only because I am very interested in that field. I figured that I would most likely maintain this site for quite a while, it is free webspace after all, and that in a few years I would post my resume, take some of the not unprofessional, but non-technical content off, and replace it with something that would help me in landing a job. For now though, I just want to have fun with the site, and explore and experiment with different styles, coding, and content.

Having my goal of keeping this sites design very simple and precise allowed for a relative ease in the design process. I knew I didn't want to borrow any code, or model it off of the course/mini Zen description site, so I began to work on the basic menu style homepage. I used a color I thought was very striking, and also just a cool color for the link buttons. In the beginning I was working with this mono-color layout. Although, right at the end of the project I decided to go with a multi-color scheme, making every page color coded. I also wanted to keep a relative theme of bad jokes throughout the site, evident in the header and footer. For the pages lower in the hierarchy, I would have the header be a larger version of the original link button that takes the user to that page, the content would be underneath, and the footer would be a horizontal menu, that I eventually moved to the top of the page as a subtitle, linking the user back to the home page, and all of the other pages on the site. This was the first time I ever made a horizontal menu and it was quite exciting, and not very difficult at all. With the basic design out of the way, I wanted to add some detailed touches here and there. On the homepage I coded some JavaScript that had the text on link buttons change color on mouse over, and give a brief description of the content behind the link to the side (although this only worked in Opera and IE7 for some reason I couldn't determine). Then, on the content pages, I added some code so that the links in the footer menu would change color on mouse over. I then added this code to all links on the site, except for three that were colored something different than the standard black. Little things here and there that I think add a sense of professionalism and expertise to the site.

One problem I came across that I was able to fix was the issue with JavaScript and Mozilla Firefox. I did some research on the subject and learned that Mozilla/Firefox uses a textContent property to access and set the text of an HTML object, where most other browsers (Opera and IE) use an innerText property to do the same thing. After further research, I also learned of a solution to emulate the innerText property of most browsers on all HTML content in Mozilla/Firefox too. I was beginning to criticize Mozilla/Firefox but using this solution is allowable because of Mozilla/Firefox’s extensibility features. This solution is a simple script viewable on the source code.

Some problems I encountered that I wasn’t able to fix were first, an issue with the three papers on the work page. I originally wanted them to open in a new window with the “target=_blank” tag, but when I did that they would show up in Chinese for some reason. I have no idea why they appear appropriately in English when I have them open in the same window. The last problem I had isn’t really a problem, but more of an issue of time and energy. I wanted to have a blog, sometimes fake and sometimes real on the site, and I didn’t want to link to some lame site like Blogger or LiveJournal, and I didn’t want to get really knee deep and mess with blogging programs so I ended up having a blog with no archiving, made with normal code. I just have to remember when I post to it to write the code above the pre-existing text, and not below. This was the basic design process I went through for this project.