It was a rather quick project thanks to the detailed Photoshop document provided as a spec for the front and single post pages. I started by creating a child theme from WordPress’s default Twentyten theme. The advantage of using a child theme is that all of your theme modifications are isolated in the child theme directory and are preserved when the theme is updated. Knowing that the way WordPress handles images in due for a revision in an upcoming version, I wanted to position Sekonic’s blog to take advantage of any new image handling features WordPress introduces via the default theme.

This was the first blog on which I implemented a Featured Post capability and I combined that with one of my favorite theme mods: the excerpt switch, to provide the post author with finer control of what appears on the blog’s front page. If a post has a featured image, then the medium-sized version of that image appears on the front page above the post’s body or excerpt. A featured image can be one of the images appearing in the post, an image from the site’s Media Library or an external image referenced by a URL.

Matt also gave me the freedom to use CSS3 on the blog to create the rounded corners and drop shadows in the design spec. To achieve these kinds of effects without using the CSS3 border-radius and box-shadow properties, a designer must create three overlapping division elements with different background images for the top, bottom and sides of a box. With CSS3, only a single element is needed and no background images have to be loaded. The disadvantage is that border-radius and box-shadow are recognized by the current versions of Firefox, Safari, Opera and Chrome but not by Internet Explorer. IE9, now in beta release, does support these properties so it’s only a matter of a few months time before IE users get the full design treatment.

Then, just for fun, I added CSS3 transitions to the navigation tabs. The idea behind CSS3 transitions is that when an element’s property changes (e.g: the background and text color of an navigation tab when the mouse hovers over it, ) the duration and other aspects of the transition can be controlled.  For the Sekonic Blog’s navigation tabs, I specified a 1.5 second duration from the base state (dark background, light-blue text) to the hover state (gray background, white text with drop-shadows) to visually reflect the blog’s tagline: “Control Light”.

I hope you enjoy the Sekonic blog. Building a website with such good writing and compelling images was a real pleasure for me.

I built the Humintell.com website in WordPress on top of Minimal, a free theme from The WordPress Theme Shop that features variable width columns and other nice enhancements. The wonderful graphic design, typography and layout is from Dean Meyers, who added some of the playful visual effects used on the site. Dean Landsman of the Landsman Communications Group integrated the various online pieces into a coherent whole, creating/editing much of the initial content.

Congratulations, Humintell! And thanks to Howard Greenstein of The Harbrooke Group for referring me to Landsman.

Howard proposed a robust set of features to showcase their familiarity with leading edge, social media technologies and services. The specifications called for an integrated BBs, an event manager, feature-rich videos, a Flash-powered header with a customized navigation menu tying it all together. Howard and I knew we were pushing the limits of WordPress and that’s what the client wanted to show off.

We started with a three column theme, Seashore by Sadish Bala. I added a video presentation space on top of the  sidebars and a game space below. With a bit of work, I was able to shoehorn the custom flash video the lawyers designed into the header code and replaced the generated navigation menu with a two-level structure.

The four lawyers were already blogging on other sites. This was their first opportunity, not only to write under their own brand, but to actually craft that brand as publishers and editors. As they began to post articles, they became concerned about their authorship rights —they’re IP lawyers, remember, and important ones at that! So, as we neared completion of the project, new feature requests started creeping in.

They wanted special lawyer profile pages so they could edit in additional content about themselves. These page would feature a portrait image and an expanded contact section with a download-able, virtual address card. For these special pages, I cloned the standard single page template and modified it to fetch the page author’s portrait photo from a sub directory of /wp-content. I setup custom fields for the contact information and displayed those next to the portrait image. Following that, I formatted a box to display the most recent posts by that author. Finally, I displayed whatever content they wanted to add via the post editor. Click here to see some of the code.

The head partner of the IP division liked the profile page so much that he wanted a special version just for himself that also displayed  any press articles written about him. I figured out how to accomplish that using a custom post field and some more template programming.

They also wanted to post co-authored articles. I know that there was third-party plug-in that did something like that, but at this late stage of the project, it was easier to add more template modifications to get exactly the functionality the client wanted. The solution we devised features a double portrait image, double email links and a hook to pick up the post for the special lawyer profile pages.

It’s been exciting to watch this blog progress from it’s initial launch last month. Everything we did is being used by the client and it’s all working well.