UltraZen II

The ideal

I decided to improve upon my most original layout (UltraZen I) and spawn off version two in its name. UltraZen II continues the minimalist ideal that I held in mind when I designed the first original layout of this site. It uses unfinished lines to imply the text’s boundaries, letting our imagination fly while keeping the presentation neat and uncluttered. This choice is a reflection of my chaotic nature, where constraints serves to accentuate my raw nature. Take a look at the comparison between Ultra Zen I and Ultra Zen II. See the similarity in the usage of lines?

Ultra Zen IUltra Zen II
Layout

Several changes are made in the layout department. As you’ve probably noticed, the thumbnails are bigger, but just big enough so that I can still fit two of them side by side per row. It always irks me that the default thumbnail size is so small that I can barely tell what’s being shown. But at the same time, I don’t want a full blown image that will take over the whole page. So the compromise is what you see here. Half half. Since I don’t post pictures often, I can afford to have bigger thumbnails that hogs bandwidth.

The overall color scheme unfortunately, have to remain grayish for the moment. I still haven’t figured out how to correctly combine green, beige, brown, black and white in the right way to generate a sense of zen. A frank reminder of my deficiencies in color matching. The choice of dark gray is to help monitors save energy around the world. Sadly what started as a noble act ended up being tainted by stupidity. My researches in LCD technology work reveals that black requires more electricity than white. This is due to the fact that LCD’s back light is always on and black is  achieved by using electricity to give light a spin so that it became polarized and in the process blocked out by the polarizing filter. In its natural state (white) it doesn’t need the electricity to give light a spin.

Also note that the white color is used primarily on the side bar, header and footer while leaving the posts and contents with a darker and grayer counter part. This is done to create depth in an otherwise 2D screen. It makes the site looks like there’s a frame on top of the paper that’s sitting beneath. The positioning of the gray lines also coincides with the white lines to create a drop shadow effect.

Smaller changes overall from the font choice to color contrast and consistency of positioning across all pages. Overall, there’s more thoughts into everything.


Architecture

I made Ultra Zen II after porting my database to mySQL5 and switching to WordPress 2.3.x. I prefer making changes in leaps, opting to save more time than spending hours tweaking each new version which will probably be outdated within a month. The end-of-support for mySQL4 just happened to be in concert with wordpress’s upgrade to version 2.3. So I did it in one batch. Spent hours figuring out why things are not working and got everything solved.

Technicality

The biggest change in Ultra Zen II is in its structuring. I made a big effort in cleaning and restructuring the archive. When you choose one of the selections, the sidebar will display a title of all the posts under that selection while the main block will show a list of posts with excerpts from the content. This is done so that you can quickly get a feel of the selection you made. Then, if you choose to go deeper, you can skim through the beginning of each posts until something catches your eye.

I also added a form (provided by my host) in the about page, while accidentally erasing all the information that was there before. In addition, I further emphasized the fact that UltraCrepidate is actually the combination of two words by capitalizing the first letter of each word. Ultra meaning “in extreme” and Crepidate means “to criticize” in latin. Together, they form the meaning of UltraCrepidate: To criticize beyond one’s domain of competence. This year, I am emphasizing the word’s primary meaning as a reminder and reality check for myself.

Lastly, I only used one small gif image for the layout in order to reduce the bandwidth usage on my site. Everything you see is generated by html code, the only place where I am forced to use the gif is in the two major vertical lines running from top to bottom. Due to the dynamic nature of the length of a page, the returned value for height is null. I should probably write a javascript code if I want to be 1337, but why bother wasting my time on it?

Development Story

I can’t stand only finishing a small piece of the site at a time anymore and decided to invest the whole day to wrap up all the different codes and functions. I read a lot of programming jargon and actually meddled around with the source to add some functionalities. I should read up on wordpress API in the future so I can port my modifications to future versions in a plugin.

Unfinished

By the end of developing Ultra Zen version II, I already got sick and tired of the layout. In addition to that, there are a lot of other functionalities that I wish to add to the site which will heavily impact the layout. First is a random photo album on the side bar and second is a list of recent comments. These, on top of the new color scheme will make up the major part of the effort.

Structurally speaking, I will be attempting to change how the file is stored on my site, crossing my fingers that this won’t impact anything. Once that’s done, I will enable htrewrite for a better looking link as well as using htaccess to forward all my feeds to feed burner. Apparently, someone’s been using my content through feeds and I only noticed that because I had feed burner plugin installed. But that plugin isn’t perfect and left some of the feeds unprotected.

Categorizing and Tagging are still ongoing. This is a boring and mundane tasks that I cannot finish in one day. I believe it should be done by the time UltraZen III gets completed… I hope.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>