Yeah, the new design + structure is named blogHelper II. Zero creativity I know, but since it doesn’t have any negative impact, well… Anyway, this post might get a bit long, so here’s an outline of what I intend to do with it:

• Explain
  Certain decisions regarding design - whether on the graphical, structural, or usability aspects - were made, so elaboration on those decisions will be covered.
• Point to Resources
  Some stuff I’ve implemented in blogHelper II are described in-depth elsewhere, and so, I’ll point to those resources for those who’d like more details.
• Attribute
  At the same time, I’d like to attribute some of the stuff I’d stolen borrowed while conducting the redesign.

Note that we’ll only be looking at the design aspects in this post. Justification and explanations for how the various view modes are laid out will come right after this.

Now, I’m sure that some of the steps I’ve taken are either obsolete or inefficient. So, hopefully, as you guys point it out, this will become a lesson for both me and others who are here to learn.

Basic Layout

Just like Aaron Brazell at Technosailor, one of the first things I wanted to ensure was that this layout would be optimised for 1024×768 users because my stats show that around 73% of my readers have their monitor resolutions set at this value. Yet, I didn’t want to lose support for 800×600 users (15%) either. So, I opted to go with an elastic design (slightly different from fluid-width designs). This means that the layout will scale according to the size of your screen, up to a maximum and minimum width. In implementing the elastic design, I went with Roger Johansson’s technique as described at 456 Berea Street, where no minimum width was set. By the way, the technique is mostly cross-browser compatible, though a hack had to be used for Internet Explorer (IE) users.

I also chose to go with a relatively minimalistic 3-column layout (not many images, so theme size is only around 40kb or so, even with the Javascript), rather than go for the above-bottom-fold style I had wanted to try earlier. This way, more can be conveyed, and monetization becomes slightly easier as more space becomes available for Text Link Ads, AdBrite, and various other affiliate products (aff links).

Extended Entries and Select View Tab

On the default front page (normal blog view), a maximum of 8 posts have been set to display. But you might have noticed that only the first two are completely displayed, as the last six are shown title-only. Actually, the content of the last six posts has been hidden with Javascript - which was implemented using moo.fx, a lightweight Javascript library (3kb or so). When you press the display button, the content will slide out without reloading the page. The Select View tab has also received this feature, where pressing the “x” will slide it up and thus, hide it instead. Tutorials on how to do this have been featured here before.

Why hide the last six posts? Well, I find 8 full posts on the front page to be very disorderly. But it’s clear that quite a large segment of readers detest clicking the (more…) or (continue…) link if I were to display only excerpts on the front page. So, I opted for this solution. While readers will still have to click the Display button for the whole article, they can rest assured that they will not have to move to another page just to read the article, nor will I artificially inflate my page views and CPM ad revenue.

P.S.: This implementation is not AJAX, as I feel it’s overkill in this situation. Moreover, I’d have to edit all my previous long posts and add the (more…) tag in them to use an AJAX implementation. But if you do want to use AJAX, check out the Ajaxified Expand Post NOW plugin for WordPress.

Select View Info Popup

Firefox, Opera 7, and perhaps even Safari users that hover over the rounded squares in the Select View tab on the top right hand corner will notice that an informational CSS popup will emerge, explaining each view mode in more detail. The code used is a modification of an example available at CSSplay, which is explained in detail as CSS Sprites at A List Apart (ALA).

It works by hiding text, which is then displayed only when a user hovers over a targeted area. Normally, the technique is cross-browser compatible (except for Opera 9 it seems), i.e. IE-friendly, but my modification of the code has caused some problems with IE (even IE7 Beta 3). So, I’ve disabled it for IE users for now.

Icons

Instead of slaving over icon design, or digging through the various icon repositories for a few blog-centric icons, I decided to go with FamFamFam’s cool Silk icon set (freely distributed under a Creative Commons Attribution license). I’ve to admit though that I defaced a number of them by enlarging them from their default 16×16 size to 22×22 for the Select View tab at the top right hand corner, with only some touching up being done.

Conclusion

My aim was to create something simple and usable, with a sufficiently “modern” look to last at least half a year. More importantly, I wanted to see whether I could actually implement the alternative blog views (or structures) first discussed by Chris Pearson. So far, I think I’ve fulfilled those aims to a large degree - though there’s certainly a lot of room for improvement.

If you found this post useful, keep updated with future posts by subscribing to blogHelper (for free) through RSS or email.