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.

Their marketing director was looking for new ways to connect with their current clients and customer base but didn’t have to budget to do a full redesign of their web site. Recreating the current site’s structure and design in WordPress, adding social sharing and other functionality with plugins and widgets  looked like the solution but there would be challenges in the project.

• There were over 300 html files on the existing site without much organization. A major overhaul of the web site had apparently been done 6 or 7 years ago but the earlier generation of files had not been deleted. Internal links and navigation menus were a mess.
• A two column front page that pulled post lists from different categories needed to be built and it had to be editable by the client. Templates for other special page types would need to be created.
• Oradell needed a way to manage their busy calendar of events which included everything from special lectures to pet bereavement group session at multiple locations.
• A large amount of content had been collected over the years that needed curating and conversion including profiles and pictures of 100 doctors and staff. I would need to duplicate their doctor-popup windows.

Lisa Davis, Oradell’s director of marketing and I worked our way through the content sorting the pages into a navigable hierarchy. We played with the front page’s features and layout over the course of the project until it finally looked and felt right. I built a special template for the Services & Staff pages that included a dynamically generated menu of all of the hospital’s departments. Each department’s page is a child page of the Services & Staff page.

I installed the WordPress events manager. This is a powerful piece of programming. It’s highly configurable and easy to use but, otoh, required a lot of configuration for Oradell’s requirements.

The most fun was writing shortcodes – one to show posts from a specific category in the content of a page and another to insert a doctor or staff profile in a post or page. The first  shortcode:

[showposts category="featured" display="title"]

in the content of a page produces a listing of permalinked post titles in the “featured” category. The other choices for the display option are “excerpt” and “post”. These are used throughout the site.

The doctor shortcode was more complicated because doctor information needed to be displayed in different contexts with different requirements: in the body of a post, on the various departments pages and in the complete directory of personnel. For each doctor or staff member, the profile consisted of the person’s name, academic credentials, job title, image and bio. Since several of their doctors were interested in blogging, I decided to register all the doctors and staff as blog contributors and use the extra IM user fields to store the titles and credentials. For example, using this shortcode in a post:

[doctor name="John Dolittle" role="true" creds="true" hide="false"]

will cause Dr. Dolittle’s (not an real Oradell employee) complete profile to be inserted, including his credentials and job title following his name plus the bio with a left-aligned photograph. Setting the hide parameter to “true” will hide the bio and photo but with a jQuery toggle, Somewhat like this:

John Dolittle, DVM, MD – Chief of Staff

Dr. John Dolittle lives in a little town called, Puddleby-on-the-Marsh in a little house on the edge of the town. The house was quite small; but his garden was very large and had a wide lawn and stone seats and weeping-willows hanging over. He is very fond of animals and keeps many kinds of pets. Besides the gold-fish in the pond at the bottom of his garden, he has rabbits in the pantry, white mice in his piano, a squirrel in the linen closet and a hedgehog in the cellar.

All in all, I liked working on the new Oradell website. It presented interesting challenges and the people I worked with were wonderful.

Even though I gave her my standard disclaimer that I am an information architect, not a graphics designer, she gave me full reign on changing any design elements. “Just don’t make me look at a bunch of themes!” was her only requirement.

“That’s fine.” I replied. “you’re already using the MistyLook theme which I like so much that I’ve used it on my own site.” All that was needed design-wise was a change from MistyLook’s muted grays and greens to patriotic reds, whites and blues.

The big unknown in estimating the time and cost of this project was podcasting. The vast majority of Joyce’s posts consist of transcripts following an audio player control. Joyce complained about the difficulty she and her producer, Wayne, had in getting each podcast attached to a WordPress.com post. I hadn’t done much work with podcasts so I couldn’t tell if the problems stemmed from her methodology or from a problem with WordPress.com itself. The only way to find out was to copy one of her audio files and try to setup podcasting on my development site.  I started with PodPress, one of the more popular podcasting plugins. It worked like a charm.

Building a replacement WordPress site is not as straight forward as it might seem. A WordPress installation internalizes its URL. By that I mean the site’s full URL is stored in the database in several places and this complicates creating a new WordPress instance on any address other than the final production URL. There are two ways around this problem, both of which present difficulties.

1. Build the site on a temporary URL and convert to the production URL at launch time.
2. Modify the local DNS on a development machine in order to install the site on the production URL.

The first approach is easier up to the conversion point. The conversion requires dumping the database, running it through a filter to change the internal URLs and reloading. It’s kind of scary since it essentially means killing and resurrecting the site, then waiting a few nail-biting hours for the DNS change to propagate across the Internet before you know if the conversion was successful or not.

The second approach is safer but  has the downside that the new site cannot be seen by the client unless she also has a spare machine on which she can modify her local DNS. Even if that’s the case, modifying your local DNS is not trivial, especially on a Windows PC where, if you don’t do it right, you can screw up your entire Internet access.

Still, whenever possible, I use the second approach and send emails with screenshots when I need the client’s input. I did this with Reimagine America but, instead of email, Joyce and I communicated using Skype, taking advantage of its screen sharing and file transfers capabilities to work together on the design and layout.

For Reimagine America’s front page, I imported the showposts shortcode function I used on Oradell.com. This allowed Joyce to choose which topics (WordPress categories) to feature, how many posts to show in each topic and whether to show just the title or the title and excerpt.

As a bonus, I also copied the “Show All Articles” page that I developed for Profoto-USA extending it with the ability to sort by category as well as by date and title. I find having a page with the full index of all post titles an important addition to any blog. Click on the screen shot to the right to see the page in action. 

Someone had started a blog for Profoto-USA using a customized theme but left it an unfinished mess. The sidebar was all screwed up, the more tag wasn’t working, there were no social-sharing functions and no control over the main menu – to name just a few of the problems. Profoto-USA is about the importance of good photographic lighting with dozens of interesting articles (some of the best authored by Ron) illustrated with beautiful photographs. Please click the screenshot below to check it out.

Fixing the sidebar, installing social sharing widgets and enabling the WP 3.0 menu manager was straight forward. The real challenge was finding a way to give authors more control over the content. The more tag, mentioned above, provides the ability to place a marker in a post so that on the blog’s front page, the post is displayed up to the marker, followed by a link to the rest of the article. I got that working but it wasn’t enough to manage the huge amount of content. The beginning paragraphs of a post often do not make the best summary, especially with long magazine-style articles. WordPress provides the ability to hand-craft a article summary, called an excerpt, but this feature has to be coded into the theme. Some themes show post excerpts on their front page; some show full posts (up to the first more tag.) I decided to give Profoto-USA the choice of which to use on a per-post basis using a custom field.

The previous developer had hard-coded a modified Recent Posts sidebar widget that showed, for each post, the post title and a linked thumbnail image. The thumbnails are large: 304 x 190 pixels, and only the first two or three appeared “above the fold.” The obvious solution was to use a sideshow plugin that cycled through the thumbnail photographs. Now, I’ve used a number of such plugins before and the general problem with them is that they only do what the plugin author designed them to do plus whatever user configurable options that author cares to code in. Imho – most of them fall short. Since most of the code for fetching the post data was already working, I decided to use some jQuery to add the animation effects and navigation controls to make it into a sideshow (click for nerdy technical details.)

<div id="post-slides">
    <div class="post-slide">  <!-- first slide -->
        <a href=..." title="..."><img ... /></a>
        <h3><a href=".." title="...">...</a></h3>
    </div>

    <div class="post-slide">  <!-- second slide -->
        ...
    </div>

    ...
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#post-slides').show().cycle({
            fx: 'fade',
            speed: 1000,
            timeout: 10000,
            next: '#next_slide',
            prev: '#prev_slide'
        });
    });
</script>

<h4>Recent Articles</h4>
 <div id="slideshow-nav">
   <div id="prev_slide">
     <a href="#" title="previous article">&lt;&lt;</a>
   </div>
   <div id="next_slide">
     <a href="#" title="next article">&gt;&gt;</a>
   </div>
 </div>

This took much less time than I anticipated – less time than it would have taken to find and configure a plugin to the client’s specifications. With the extra time on my hands, I decided to give Profoto-USA a feature they didn’t ask for but felt the site definitely needed: an index to all articles showing only the permalinked titles and the meta-info line with author and publication date. I added it to the footer menu without telling them about it.

This site was a blast to work on. I had done a couple of other small repair and rescue jobs for Tom. He is wonderful client; tech-savvy and patient, he pushed for solutions that stretched my skill set and forced me to learn new techniques. Some of the interesting features of onPhilanthropy.com include: customized widget headings, a revamped advertising manager, a Twitter slurp and feeds from companion sites such as, DotOrgJobs.com.

If you are in the dot-org space, please visit onPhilanthropy and check out how good technology can advance good causes. And, of course, feedback is always welcomed.

As with another law firm blog I recently built, the Air Safety And Law authors wanted thumbnail versions of their portrait photos to appear with the articles they published.  Instead of hacking the template files as I had done with the previous site, however, I formalized the technique and wrote a WordPress filter. Read my recent article on how this works.

Once Gregory started posting on blog.gpoelaw.com, we realized that his style of writing detailed legalese needed some additional typographic punch so we darkened the text and block justified the paragraphs for additional readability. Under the hood, I added my standard mix of plugins for SEO, Google Analytics and advanced editing.

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.

I first met Ann a few years ago when I answered her ad in Windsurfing Magazine for a Windsurfing singles week in Bonaire. It was a wonderful vacation with get-togethers every evening and optional activities during the day if the wind was too light to sail. Bonaire, a Dutch island off the coast of Venezuela, is for windsurfers and divers; Antigua, in the northeast corner of the Caribbean, has 365 beaches and and a hot nightlife.

A few months ago, we started talking about redoing her website. She wanted a separate destination site for each island and she wanted to be able to post articles, pictures and videos. I discussed with her the various hosting options available and the features and capabilities of WordPress. We decided the best approach was for her to start blogging on a free WordPress.com account to get familiar with the process. Later, if she needed additional technology—Wordpress.com limits what you can add to a site—we could move her blogs to a hosted solution.

The result has been immensely satisfying and quite beautiful to see. Ann has taken to blogging like a reef fish takes to the warm, clear blue waters of Bonaire and posts something new just about every day. She’s found her personal voice in writing posts which makes both sites authentic and appealing. She’s learned quickly the ins and outs of using images and embedding YouTube videos. Every time I visit BonaireBliss.com or AntiguaBliss.com I find something new to make me smile and warm my heart.

Like my own site, KateNasser.com has a static home page. A custom menu provides easy navigation to other pages and sub-pages. The sidebar prominently features her contact information followed by an embedded video clip from one of her speaking engagements. Below that, is a list of her most recent posts. At the bottom of the page is a section showing post excerpts in a special category: “Hot Topics and New Bits.”

What was most fun was teaching Kate how to use YouTube to organize her video playlists and embed them in posts for her site. I also taught her how to use social media services to drive traffic to her site. She’s become an avid twitterer. You can follow her tweets at @KateNasser .

Please take a look at KateNasser.com and let us know if we did as good a job as we think we did.

— Larry