Rebuild 10: Deconstruction of the Reconstruction

In the broad sense, the rebuild of Webdogs 3.0 has now been completed. We do have plans for reorganizing some of the content, so you will see minor changes to the navigation scheme, via the horizontal menu at the top, as we add paths to particular types of site content. We will also be cleaning out some posts and pages that are well past their shelf-life and not archive-worthy.

That said, here’s a recap of how the rebuild was approached and what software and tools were used to make it happen, along with related observations and lessons learned:

WordPress 3.0, the foundation

All of the public websites created by Legal Services of Northern California (LSNC), including this one, have long relied on the WordPress publishing platform. That’s not news. What is news is our migration over to the new WordPress 3.0, which merges the site-stand-alone version of WordPress with WordPress MU, “allowing the management of multiple sites (called Multisite) from one WordPress installation.” This has dramatically simplified the management of our multiple public websites, including the ease of updating the sites with the latest versions of WordPress and WordPress plugins, and giving our multiple editors one login and one dashboard for accessing all the sites.

Building out to HTML5

Once we had the new WordPress backbone in place, the first stage of site reconstruction involved dipping our toes into HTML5 by building a test home page, using several of the new semantic HTML5 markup elements (e.g., article, aside, footer, header, etc.), and then reassuring ourselves that it all would validate, which it did.

Structuring the page-specific markup

Confident that HTML5 “works” on the real web, we started our markup rebuild using Chris Coyier’s BLANK WordPress Theme, which includes among other things a well edited, trimmer functions.php file. (He and Jeff Starr offer a half-dozen other free, very well-coded WordPress themes at their DiW Theme Clubhouse.) The BLANK theme comes coded to XHTML 1.0 Strict. Since we were jumping on the HTML5 bandwagon, we dropped that and went for the HTML5 “upgrade” by declaring the much simpler HTML5 doctype.

That done, we just followed the yellow brick road and built out all new structural markup to support the new Webdogs 3.0 content design. The construction of the header.php file was largely prosaic, but a prudent addition if moving to HTML5 is the addition of an HTML5 IE enabling script that makes older versions of Internet Explorer backward compatible with the newly introduced HTML5 elements.

Adding the WordPress plugins

There were several functional changes we wanted to add to the site, along with some site management tools, that we knew we could accomplish with WordPress plugins. So, we added these plugins:

• Google XML Sitemaps – the current production version is not compatible with the new multisite version of WordPress 3.0, but there is a beta version that does work. Try it. You’ll like it.
• SimplePie Plugin and SimplePie Core – a perennial favorite for presentation of multiple feeds within WordPress, used here for the new side bar. It is no longer updated by the author but it seems to work fine with the latest version of WordPress.
• WP Simple Sitemap – not to be confused with either of the above two plugins, this is what we used to create the browse page, which lists post archives in inverse chronological order, so that visitors can more easily — and visually — scan older posts.
• WP Page Numbers – want a “pager” function for your archive listings? This works. (By the same author as the preceding plugin.)
• WPtouch Pro – how to create a very professional looking cross-device mobile version of your WordPress site within seconds. So far, the vibe is pretty good and worth the charge. But that’s us. How about you? View Webdogs 3.0 on your smartphone and tell us if it works for you.

Sprinkling with CSS3 transitions and box-shadows

Hey, were entitled to have some fun, right? We have gone light on adding CSS3, but we added a few page element transitions, some of which are also layered with box-shadows. A modest coding effort that makes us smile whenever we go into a hover state.

Adding Typekit fonts

Another toe-dip for us was the use of Typekit fonts for post headlines and a few other page elements, such as the heading over the comment form. This is an effortless and free way to add some typographic distinction, with styling control of the font retained in your CSS file.

Exploiting the Google Custom Search API

Truth be told, taking advantage of the Google Custom Search API has been the hardest part of the rebuild. There are easier implementations, especially if one creates a Google custom search engine, relies on a CSE “Get Code” cut-n-paste, and then plops it down into a standard page. But to get firmer control of how the code functions and how results present themselves, well, that takes a lot more work. We’re pleased with our current search function, but admittedly there is more we want to do with it.

The only part of the new site that we had serious trouble styling was the Google-API, dynamically generated search-query text-input field. It didn’t want to do what we wanted and we had to wrestle it to the ground. (And the match is not over!) And there was one other significant CSS styling issue that came up: CSS3 “rounded corners” using the border-radius property. All the major browsers now support border-radius in one form or another, but there is a problem with jagged edges in all of them except Firefox, if the element with the rounded border is set against a dark background and the border itself is noticeably lighter. If you view the Webdogs search input field first in Firefox and then in a different browser, you’ll see the difference. The difference would be even more pronounced had we not implemented this partial solution.

Hope you all enjoy the new site design. Now, on to the rebuild of all the other LSNC sites…