The New WPLover Redesign (and the Thoughts Behind it)

Hey there! WPLover is now sporting a brand new theme (for the RSS subscriber folks, come take a look!) Aesthetically I do not have a problem with the previous theme, and it’s foolish to redesign just for the sake of having a new look, but there are various things I want to improve and it turns out the best way is to build a new theme. Here are some thoughts and notes that come with this redesign.

Branding and Refocusing Efforts

For the last few months I have wanted to move the focus of this blog, from a WordPress news link blog to a more article-oriented, design and development related one (but still with interesting link posts from time to time). The previous theme felt like a half-hearted effort to bridge between the two, and I think it’s high time to straighten the focus immediately and make a theme that imply such change.

From the start I didn’t have a set rule whether I should call this place “WPLover”, “WP Lover”, “wplover”, or what have you. That was an oversight that I want to fix along with this redesign, and I have decided to use “WPLover” and added a logo for it:

WPLover logo

A heart symbol is admittedly the most predictable choice for something called WPLover, but I believe the shape is unique enough to stand out on its own. Also, to my eyes the shape represents a quill, for learning and development, and a butterfly wing, for the beauty aspect of a design. I did this logo myself, and as my own client I say I’m pretty happy with it.

The tagline, not so much (so generic!), but I figure I can change that when I come up with something more interesting. For now, it does it job pretty well (that is to better explain the site’s focus), and I’d rather launch the new design quickly than wait for the perfect tagline.

A Better Layout

Layout-wise, the previous theme already tried to reflect the site’s focus by having a large, main articles area while putting the links on the sidebar. In practice, though, I found that a three columns layout was ineffective.

WPLover theme Damage Control screenshot

Ineffective how? Google Analytics showed that the contents on both sidebars didn’t get a lot of clicks. This was especially true for the rightmost sidebar where the latest link posts were. I concluded that the area wasn’t needed, and the space could be better used to aid readability for the two other columns. Also, I didn’t have that many contents that needed to be put on a sidebar anyway, so having two dedicated sidebars was an overkill.

That’s why I opt to go with 2-columns instead. With a much bigger main content area, I can give better focus and readability for the articles.

Lastly I still wanted to showcase a list of latest link posts on the layout, and I decided to put it on the footer area. That way it becomes it a sort of bonus content for those interested enough to read to the bottom. According to my stats these links get read the most by RSS subscribers anyway, so a change of position in the new layout should not have a negative effect.

WPLover theme Sweet Spot links list area.

An Opportunity to Learn New Things

I’ve been wanting to try the jQuery Masonry layout plugin, and the links list area is good match for it. WooThemes also has a theme called Mortar that’s build with this plugin as the backbone, and I did learn a lot from the theme demo.

Another neat jQuery trick I learn is setting a hover class for everything. The latest links area, while neat, can be a bit confusing to read due the way Masonry stack things. I want to give visitors a visual aid to help them read that area, and changing a link box’s background color when hovered is the solution I came up with. The small jQuery tips on the article above helped me achieve that.

Constraints for the New Design

To keep the redesign effort focused and not waste time, I came up with a bunch of constraints for it:

  • Not start everything from scratch. I reused the majority of the PHP codes from the previous theme (only a few tweaks for some HTML), and in practice the development was akin to a CSS Zen Garden experience: the HTML layout is the same with the previous theme layout, but it looks totally different thanks to the magic of CSS.
  • Keep the 960px total layout width. This is because I already have a specifically-designed Page from the previous theme (the Pico theme landing page). By using the same width, I didn’t have to worry about changing that Page’s design.
  • Ignore IE6. The constraint I’m so happy with. The design should look correct on all modern browsers, and that’s all I wish for.

Thanks to those constraints, this theme could be finished in under a week, from design to implementation and testing.

A Work in Progress

I like to see this blog’s design as a continuous experiment, so while the current theme is already complete as it is, I’m keeping it open for more tweaks and realigns in the future. I’m releasing it immediately so I can see how it works in reality, and will learn and make changes from there.

Those are the thoughts that come with this current design. Now I sit back and see whether it works as expected. Thanks for reading this far, and I’d love to hear what you guys think about it!

You may also like...

14 Responses

  1. Remkus says:

    Nice reboot. I like it, although I’m wondering if having the sidebar go all the way down alongside the post would balance out the design a bit more on the single post view ..

    Loving the whitespace and overall minimalistic style though.

  2. Jim Gaudet says:

    I would be interested in your analytics about the single sidebar after you have this design for a while.

    I do like the new look. The colors are very soothing and easy for me. Great job.

  3. Darren says:

    Really liking this, man. Great use of Masonry as well.

  4. Devin Price says:

    I really like the new design. It uses whitespace really well- feels very neat and readable.

    I also think the links section is a great idea. Do you find this generates a lot of incoming traffic, or is more just for people that are already on your site to find new resources?

  5. Christopher says:

    Loving the look. Any chance of a tutorial on the masonry and wordpress integration?

  6. anima says:

    hfz, man, this is beautiful! :D

  7. Hafiz Rahman says:

    Remkus:
    thanks, my idea here is to only white main content scrolling down on long articles so reader can focus on the writing.

    Darren:
    Happy to hear you like it!

    Devin Price:
    The links section do show up on search engine results from time to time (especially for early, breaking news) but I won’t say a lot: the articles and themes generate the most traffic here. The links are mostly updated for subscribers and simply because I like finding and sharing new stuff.

    Christopher:
    Hey there, thank you. I’ll consider it, any specific thing you need to know about the integration?

    anima:
    Cheers :)

  8. Christopher says:

    Nothing in particular. I just find it phenomenally instructive to watch someone’s process in implementation.

  9. ibnoe says:

    as i said… “damn good!!”..
    *waiting the other gpl version!! :P

  10. Daus says:

    Pretty slick. Moreover, I love how you explain the thoughts behind it.

    Great job.

  11. joko says:

    ur page navigation in

    http://www.wplover.com/themes/pico

    have problem.

  12. it jobs are very much in demand these days because of technology boom;”~

  13. i like it jobs because it is a high paying job and you work in an air conditioned office ~;-

css.php