When your website means business.

«Return to Blog List Design Challenge: Developing a Grid that Integrates “Traditional Website” Pages with a Blog

Business websites that include both “traditional website” pages and a blog are becoming more common. It seems that most people want their business web site pages to be in the traditional “subnav-left/content-right” configuration. At the same time, they want their blog pages in the common “posts-left/sidebar-right” configuration (I prefer that myself). For months, I’ve tried to modify 2- and 3-column WordPress blog themes to accommodate both, without much success. The results never looked very integrated; there were too many compromises in favor of either the blog or the website at the other’s expense.

I didn’t feel I could present WordPress as a CMS option for businesses unless this issue was resolved. Sure, there were premium business themes, but most of them looked odd to me as well.

How does this work in the wild? You are reading a blog post on a page with an irregular-width 4-column grid. If you select any of the nav areas other than “EvoBloggito” above, you will see how the grid underlays a traditional web page configuration.Finally, it dawned on me that a 4-column grid was the answer. Not a 4-column grid with equal-width columns: that still resulted in some strange geometry for the blog. Instead, I developed an irregular-width 4-column grid. This approach allowed the preferred configurations for traditional website pages (green shading on the illustration) and for a blog (red shading). These two very different page configurations are visually tied together by adhering to the grid in both the header and footer elements.

The precise measurements for the grid are somewhat flexible, and the concept itself is very simple. But, like many simple concepts, it solve a number of layout issues. Does the grid have limits? Of course it does: grid systems create limits.

One of the issues a designer using this system has to look out for is the choice of appropriate content for each of the 4 footer areas. Too much or too little content in any of them can ruin an otherwise well-planned layout. I’ve been using the system for almost a couple of months, however, and on balance, the system seems to resolve a lot more issues than it creates.

I’ve almost completed a WordPress theme based on the grid; hopefully can release before October. If you subscribe to my RSS feed or sign up for my newsletter, you’ll be notified when it’s ready.

ShareShare on FacebookShare on Google+Share on RedditTweet about this on TwitterShare on LinkedInEmail this to someone

Tags: ,

Comments are closed.