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:
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.
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.
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!
