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 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.
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.
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.
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)