Adventures in Designing and Developing a

Custom Blog

By Randy Hook, Programmer

Bursting at the seams with anecdotal hyperbole, one of our team members was in need of a medium to share his witticisms. A blog was the perfect answer, so our graphic designer got right to work on a few prototypes. The end result was a playful mix of clever graphics, based on the blog’s title, Nibbling the Edges, set among a sea of vibrant colors and gradients.

She then handed the design to the development team for integration into the WordPress blogging platform. Now, graphic designers are normally not concerned with the feasibility of translating their pure design into the nuts and bolts of website mechanics, nor should they be. A designer who has been forced to think of block type elements, floating divs, repeatable gradients, and the like will inevitably surrender creativity to a rigid box model. That being said, this blog design concept our designer handed us was the most challenging site design yet.

“Doesn’t she understand how hard it is going to be to accomplish this?” was the first thought. But we on the development team couldn’t help being both impressed by the whimsical design and excited for the challenge. We loaded the prototype and proceeded to determine the best way to slice the layout into manageable pieces that could be easily interpreted by a web browser. We experimented with using transparent images to deal with the heavy number of irregular-shaped graphics on top of the vertical gradient that comprised the background of the site. We also experimented with managing the location of different elements, as if the site was a flexible width, allowing the background gradient to extend horizontally. Both approaches were becoming too complex, so we went back to the drawing board.

As is the case with most endeavors, a simpler solution eventually presented itself. The prototype was sliced into two sets of containers: an outer and an inner. The outer container is centrally fixed onto the site’s background. The inner container is set into the outer container, but allowed to grow vertically to accommodate the varying blog posts and sidebar widgets. Inner border images are set on top of the vertically repeatable background, allowing a seamless transition from the fixed background of the outer container to the dynamic background of the inner container.

The second major challenge involved the widgets in the sidebar. The plan called for the sidebar to contain a few of the widgets provided by the default WordPress installation as well as a widget to display the author’s latest tweets. Normally, these widgets could have been installed with a couple of mouse clicks, but again, the designer had opted for a graphic treatment of the widget titles. WordPress widgets do not allow for graphic titles, so we began our journey to learn how to write our own widgets.

There are several articles out there that describe how to write widgets, most of them excellent, but also incomplete in some form. After reading, rereading, and experimenting with several methods, we finally came out with a custom widget. The only real distinction from the built-in widgets is that the title is allowed to be a graphic. However, along the way, we learned the intricacies of widget creation and how to write a control panel for one as well.

We are very pleased with the final product and it shines even more as it fills up with material from our “anecdotal observationalist”. Check it out at http://nibblingtheedges.com/ and let us know what you think.

Return