LSNC Regulation Summaries: Variations on a Theme

We have implemented the first real iteration of the new LSNC site redesign: LSNC Regulation Summaries (née Regs @ LSNC.net), a subsite of Legal Services of Northern California’s home site. Of the LSNC sites we are in the process of rebuilding, this is the easiest to do, since it is just a collection of hundreds of straight-up post items, plus only two simple custom pages — an about page and a search result page, the latter being the content-target page for the Google custom search API. (For the record, LSNC has posted 954 regulation summaries since 2004.)

Those following the recent rebuild series of articles here will recognize the source of many of the design elements. I won’t go into those again.

That said, I do want to mention the virtuous cycle that comes with rebuilding all our sites on the WordPress 3.x multisite platform, while reaping the benefits of core web standards now more widely implemented by all major web browsers.

First, with WordPress we have been able to build a core set of new “LSNC” theme files that, for the first time, will be uniform and standardized across all of our sites, with the added advantage of a unified network administrative panel and single login for editors to all the sites to which they add content. Adding plugins and updating the core WordPress application is also now way easier since it can be done once for all our sites.

Second, because everything is being rebuilt on the WordPress platform, we are able to use the wondrous WPtouch Pro plugin, which makes deployment of a mobile-ready site quite effortless. You can view two slightly different implementations we’ve done of WPtouch by viewing Webdogs 3.0 and Regulation Summaries on your smartphone. This is a plugin that we can turn on and configure in about 30 seconds for all other LSNC sites, as we roll the new design out.

Third, I cannot overstate how much the adoption of web standards has simplified the development and made vastly more predictable the results of our CSS code. Setting aside for the moment the proprietary CSS property values one still has to use to implement CSS3 box-shadow and border-radius (rounded corner) effects, I was somewhat stunned to discover that the only other design element in the entire site that required any browser-specific change at all was the search-text input field, which is dynamically generated by the Google search API code. And even that quirk was minimal. I had to make changes to the CSS padding property of that element to make the presentation reasonably uniform among Firefox, Webkit (Chrome and Safari), Opera and IE. Yep, a tweak for one CSS property associated with one CSS selector. That’s it.

WordPress. HTML5. CSS3. Web Standards. Lovin’ it.