New Design Launched!

The design of this site, although it may not appear as such, has probably over 200 combined hours of time wrapped up in it. It started as a mock up drawn in photoshop by my close friend Jin, and the rest was left to me. The goal was simple. I wanted to create something fairly minimal, while still having room for lots of extraneous content, and I wanted it to be very unlike anything other blog I had seen.

I am quite proud of this design for some reason, I feel it is one of the most unique layouts out there, and is done fully in html/css, there are some additional features built in thanks to Javascript / jQuery, but those are not required to have the page render with full functionality. I feel the goals mentioned above were met with overwhelming success.

I haven’t done a design so unconventional ever before, and it was also my first WordPress template. Looking at the mock up over 3 weeks ago, I thought it would be a cinch, but it turned out to be quite the opposite. I am afraid that going with such a bold layout will lead to a “love/hate” relationship amongst my viewers. It is so unconventional that people are either going to think it is amazing and fun to use, or simple hate it since it doesn’t follow the standard blog layout.

HTML / CSS

The html is defined as XHTML 1.0 Transitional, and fully validates. There are over 1000 lines of valid css which make up the core functionality. There is a custom CSS file for Print, and Mobile as well. One css file takes care of all browsers, in which the page renders nearly identically.

The original design was done using my Mac, and Safari, in which my font of choice was Lucida Sans, that didn’t seem to look right on Windows based machines so I had to change it to Verdana. I think it looks alright, but I still enjoy viewing the site most from my Mac.

Several small issues arose within the design early on. Since I was concerned with making it so cross-browser/cross-os compliant, I had to overcome a few obstacles.

Fonts: As mentioned above, I wont up going with Verdana as my font choice as it was designed for the screen. This font seems to work well on most browsers and OS’s, unlike my original choice of Lucida Sans.

CSS: Max-width and Position: Fixed elements do not work across the board. Most of this was fixed using Javascript which I will detail below, but when JS is turned off, the page still works fine, it just looks a bit different. The footer should push to the bottom of the content, and the main content area will fill out to the right side of the screen.

Other then those small issues, the css is valid, and I did not need to make use of specific browser stylesheets. There is a lot of style applied to the page since there are so many elements which look different, aiding the effect of randomness I was going for.

If the stylesheet is disabled, the style-less page looks as it should. I used primarily core html elements to compose the page for SEO purposes as well as compatibility reasons.

Javascript / jQuery

I employed the use of two Javascript files. One is strictly for IE < 7, the other is for everyone. Essentially the features laid out in these files will become totally invisible if Javascript is turned off, and the page will still function perfectly. This was crucial to me since the idea of having my page totally unusable in any situation was unacceptable.

For IE the Javascript basically does 2 things: Positions and adjusts the position of the footer, to emulate a position: fixed format, and makes the width of the content area set to be equal to that of the current “max-width” setting, unless the window is smaller. This means that if I go into my stylesheet and alter the max-width setting for the content div, the javascript for IE adjusts accordingly, since it pulls the value for the width directly from the CSS. If you have Javascript off in IE, the footer will simply not be fixed the page width will become fluid. It is not my intended viewing scheme, but it works. The last thing fixed in the Javascript for IE is that it sets the background style to something which does not use a translucent PNG image.

In general, the Javascript does several things. Firstly, it handles the footer, this being the opening and closing of it, and the tabbed effect inside it. If the user has Javascript disabled, the button to toggle the footer open disappears and it is as if it was never there. Second, it handles switching the view from comments to trackbacks at the end of a post. If the user has Javascript disabled here, the trackbacks will be listed after the comments. Lastly, it handles some page reformatting based on window size.

If the browser window is very narrow, it will get rid of the twitter column, and change the logo to something smaller such that it will not appear above the content. In this state, if you open and close the footer, the image does not switch back to something too large.

If the browser window is very short, it will make the logo image change to the secondary image, so that it will not appear above the widget area. Again, when you open and close the footer, it will not interfere with the image.

If the browser window is sufficiently large, more posts will show up on the front page, to fill it out.

If you have javascript disabled, the page still looks ok In 1024×768, but you will not get any of the dynamic features to change the types of content shown, so the page might look very squished.

WordPress Template

For the template, I basically designed it as if I was going to sell it. I could have built it around on the features I needed, or intended to use, but I built it to be more expandable, taking into account basically anything a blogger would use.

The top area, the two left columns, and the 3 sections inside the footer are fully “Widgetized”. This means I, or anyone, could put whatever content into those regions they wanted to, without altering the template. In the absence of any defined widgets, default content appears.

The navigation is based on published pages, and there is an area which will accommodate listing child pages in their existence. Much like how you found this page.

Post listings, archive listings, search results, etc, are all based on excerpt view. In the absence of a defined excerpt, the first 55 words of the post is taken. The width of the excerpt boxes and post meta boxes is randomized within the template by php, to create a more random feel.

Almost all elements of a post have been styled, even the ones I do not use.

The background image is a translucent PNG going from a grey color to transparent. Within the theme options page I created you can choose this color to be anything. At this time it is orange. If you do not define a color, it defaults to this shade of orange. You can also change the primary link color, defaults to red, in a similar manner.

Also on the theme options page, you can set your feedburner email feed url, to set where the “Subscribe Via Email” link points to.

Lastly, you can set your twitter ID. The twitter functionality is built into the template so no plugin is required.

Basically, anyone could use this template, and it would offer full wordpress functionality. While I did not need to go this far with it, I will likely release this template into the wild after I have used it myself for a good enough period of time.

Thanks for reading, I hope you enjoy using this design, it was quite a lot of work!

(I also created a page out of this post)