20 New Blogs at LawBlogs.ca

One of the best parts of being involved with the Clawbies is learning about new blogs, and seeing just how many different legal topics are being blogged about in Canada. Since our last update in November, we’ve added 20 new blogs to LawBlogs.ca  – and there are even a couple of Clawbies winners and runners-up among them!

As always, if you know of any Canadian law blogs we’re missing, please let us know.

What your error message says about you

I read a humourous post last night, titled Oops! I ruined your life. :) that got me thinking about error messages. The post is about the cutesification of error messages from large technology companies, like Google, but I think the base message is important for any website: make sure your errors are helpful.

Most common error messages a user is likely to see on your site is a 404 error, or ‘page not found’. No matter how careful you are checking broken links and ensuring everything works correctly on your site, users can still trigger one by typing an incorrect URL, or using an old, outdated link to a long-gone page on your site.

On the Stem site, we like to keep things simple: we offer a plain language message, and display a search box for users to try their hand at searching for the content. This way, if the content is actually on the site, they will be able to access it. The message is displayed any time someone tries to access a URL on the site that doesn’t actually exist.

Some basic things to keep in mind when designing 404 errors:

  1. Keep your audience in mind. The average user doesn’t know what ’404′ refers to; however, ‘Page not found’ is understandable, without being condescending to more web-savvy users.
  2. Offer alternatives. Display a search box, a link to the homepage, or even a simplified site map. If possible, you could even show content related to what they may be looking for. You can also include a back button to return users to the last page in their browser history, but this can backfire if the page the user was previously on was not actually on your site.
  3. If possible, offer to help. This is especially important for sites whose sole purpose is to supply information. Include a contact form or email address; there could even be a phone number to encourage users to contact the company and get the information they were looking for.
  4. Lastly, make sure it appears when it should. This may be more of an issue for your dev team, but any time a 404 error is thrown by a website, the tailored message — and not a server error — should appear.

Heinz has a great example of a ‘page not found’ error, as well as a terrible one.

Here is Heinz’s ‘not found’ page:

This error message speaks to Heinz customers. It does not say outright that the page wasn’t found, but, keeping the brand front and centre, they say the page is empty and display an empty ketchup bottle at the bottom (successful product placement without compromising the message). They provide instructions to search the site from the primary navigation. They also display links to main pages, organized by section; even if a user does not see what they were originally looking for, something else on the site could catch their eye. Lastly, the rest of the site’s regular page elements are intact: the site’s design, primary and footer navigation, and company logo. There is a reason this example crops up on many, manybest 404 errors‘ lists.

So, how does Heinz also have a terrible example of a 404 page? The above version is only loaded when you type in a URL ending in .aspx – say, “http://www.heinz.com/404.aspx” or “http://www.heinz.com/stemlegal.aspx” — anything with that file extension. As soon as the file extension is wrong — even by using .asp, another valid file extension used on other websites — you get this:

A completely generic server error. This is what users would see when they mistype/forget the file extension, or follow a really old link that pre-dates the site’s use of ASP .NET (.aspx). It’s not helpful, it’s likely written by developers, and, to many, it’s completely incomprehensible.

A friendly site can quickly become unfriendly when it displays confusing or useless error messages. Don’t forget to extend your copywriting, content strategy and branding even to pages you hope users will never see — you won’t regret it!

 

Google slowed indexing for SOPA protests

If you launched a website yesterday and were wondering why Google’s spider software wasn’t indexing your new site, there’s a reason.  Seems it was a considered decision by Google to maintain current standing in the search engine rankings for those websites protesting U.S. SOPA legislation.

A number of sites, in fact, saw almost no indexing.

Google itself didn’t go black yesterday; at least not the same way Wikipedia and others did.  But they did show support by displaying a black bar across the top of their homepage logo, and perhaps more telling, supported the protesting sites by holding their place in the search index.

Introducing the Greenhouse

We’ve decided, after several weeks of WordPress Wednesdays posts and some feedback from our readers, to move the posts to a new area on the site, the Greenhouse!

The purpose of the Greenhouse is to discuss Stem’s internal projects and experiments, as well as talk about new technologies, and share code experiments that we’ve done on our own, or for various clients. It’s also an opportunity to share the creative stuff we do with our 20% time. WordPress Wednesdays will continue there as a weekly feature.

The Law Firm Web Strategy Blog will continue to be focused on web topics, such as social media, marketing and strategy, that are of immediate interest to those in the legal field.

If you’ve been enjoying the WordPress Wednesdays posts, and would like to be plugged in to the other interesting, nerdy things we’re finding online, please check out the Greenhouse, or subscribe to its RSS feed.

WordPress Wednesdays: Creating Custom Queries in WordPress

WordPress automatically loads the appropriate posts and pages on your site based on its default database queries. However, it’s possible to create custom queries so you can call whatever content you like from the SQL database and run it through the WordPress Loop – the code used to display your WordPress posts — wherever you want on your site. You can do this by tweaking the global $wp_query to change a page’s output, or create your own queries from scratch.

For an out-of-the-box blog, there is rarely a need to alter what WordPress loads on each page. However, custom queries can be helpful when you need more control over the page content – whether it’s hiding or showing specific categories, changing how many posts load on a page, or just excluding a post or two from displaying at all.

Below, we show you a few basic examples of custom queries. As with all template changes, make sure to back up your theme files before making any edits.

Creating a new query

The most basic way to create a new query in WordPress is to use the query_posts() function; this will overwrite what the WordPress query would normally be and replace it with your new query.

The below query would call posts with a specific category. It must be placed before the start of the WordPress Loop:

<?php query_posts( 'cat=4' ); ?>

<!-- Start of WordPress Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Using query_posts() alters the main WordPress Loop – this means it overwrites any other information that would normally be passed to the Loop, like the pagination, or that the page is, say, a category archive.

It’s a good idea to use the wp_reset_query() function after you have used query_posts(), to return the Loop’s default setting:

<?php endwhile; endif; ?>
<!-- End of WordPress Loop -->

<?php wp_reset_query(); ?>

Tweaking the existing query using global variables

WordPress stores the query related to the current page in the global $wp_query object. If you just need to change a page’s query slightly, but still want to maintain the other settings (like pagination), you can append parameters to the global query quite easily.

For example, to restrict the global $wp_query object to only one category, you can merge it with your own array containing this parameter, and then make this new, merged query the page’s new query. Place this PHP before the start of the WordPress Loop, and the page will use your modified query:

<?php
global $wp_query;
$args = array_merge( $wp_query->query, array( 'cat' => '4' ) );
query_posts( $args );

?>

<!-- Start of WordPress Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

You can also use the global $query_string object instead; in this example, we simply appended our own category restriction, and made that the page’s query:

<?php
global $query_string;
query_posts( $query_string . '&cat=4' );
?>

<!-- Start of WordPress Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Because query_posts() is being altered like in the previous example, it’s a good idea to use wp_reset_query() after the Loop:

<?php endwhile; endif; ?>
<!-- End of WordPress Loop -->

<?php wp_reset_query(); ?>

Create a basic custom query

Rather than simply appending values the global $wp_query object, it is also possible to create your own WordPress query from scratch by declaring a new instance of the WP_Query class.

Let’s say you wanted to create a query that would select five posts from a specific category — you would create a new instance of the WP_Query class with your query’s parameters. Unlike the previous example, it is necessary to tweak the Loop code to reference this new query. In the example below, we stored the new query in a variable called $newQuery; then, in each instance of the loop, we prefaced the function with $newQuery-> (ie. $newQuery->have_posts(), $newQuery->the_post(), etc.).

A very basic example of this code would look like  the following:

<?php

$newQuery = new WP_Query(array('posts_per_page'=>'5', 'cat' =>'4'));

// Start of modified WordPress Loop
if ($newQuery->have_posts()) : while ($newQuery-> have_posts()) : $newQuery->the_post(); ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php endwhile; endif; ?>

Because you are creating a new query, rather than altering query_posts(), it’s not necessary to use the wp_reset_query() function.

There are many parameters you can use in your custom query, documented in the WordPress Codex.

Dynamically query childpages of the current page

This last example is a little more complex, but can be very useful when using WordPress as a CMS for a regular site. It uses a custom query, as well as the parent-child relationship you can create in WordPress pages.

When you create a custom query that used its own Loop, like in the example above, it’s possible to nest the custom query inside of the official Loop.

In this scenario, on a section’s landing page, it may be necessary to list the ‘child pages’ within that section — this could be very useful, say, on a ‘Practice Areas’ page to list the specific practice groups and link to them.

Within the page’s loop, you can add a custom query that uses the current page’s ID to query its childpages, and then display an unordered of the childpage titles:

<?php
$childPages = new WP_Query(array('post_parent'=>$post-> ID,'post_type'=>'page'));
if ($childPages->have_posts()) : ?>
<ul>

<?php while ($childPages->have_posts()) : $childPages->the_post(); ?>
<li><?php the_title(); ?></li>

<?php endwhile; ?>
</ul>
<?php endif; ?>

In this example, the Loop’s if statement is used as well, so the surrounding <ul> tags are only displayed if there are actually childpages.

Now, when childpages are added or edited, this information is automatically updated on the parent page as well. For a more advanced example, check out the practice area page on Thorsteinssons’ new website.

We’d love to hear how you use custom queries on your own WordPress site — share your examples in the comments!

Big-picture thinking from a social media guide

As noted on Twitter and blogged by Simon Fodden at Slaw, the Law Society of England & Wales has released a social media guide for lawyers and law firms. Simon observes that there’s very little here to excite the experienced user of social media, but that its target market of social media newbies will find it a useful and illuminating primer on this whole area. If you consider yourself in that group as well, I’d recommend this guide for your review and your firm’s adoption.

Two aspects of the guide stood out for me. One is its refreshing emphasis on strategy, relatively rare in such guides and even more rare in law society advisories. Many social media guides focus too much on the “How to” without paying sufficient attention to the more important “Why bother?” Before undertaking any communication or marketing initiative, you have to be able to state clearly and concisely why you’re doing it, what you hope to get out of it, and how you’ll measure your success. Law societies often get stuck in admonishment mode: don’t do this, don’t do that. It’s nice to see that trap avoided here.

The second interesting aspect of the guide is its multiple references to the law of unintended consequences. In one respect, this reflects the more traditional regulatory concern that something could go terribly wrong, so be careful out there and be home by 11. But from another perspective, this really is a timely and necessary reminder. Lawyers share (and then some) the general human tendency towards tunnel vision, the failure to see the big-picture implications of small actions. This is especially problematic with social media: many lawyers don’t appreciate just how powerful it can be — for good, yes, but very easily for destructively, irredeemably bad. One Tweet, one sentence in a blog post, one line in a Facebook update can easily become “viral” in both senses of the word.

Kudos to the Law Society of England & Wales for a social media guide that gets lawyers thinking about both the exceptional and the mundane, and reminding us that the one thing lawyers crave most — control — is the one thing social media explicitly does not promise.

WordPress Wednesdays: Adding ‘+1′, ‘Tweet’ and ‘Like’ Buttons Without Plugins

This week’s WordPress Wednesday will cover how to add Tweet This, +1 and Like buttons to your WordPress posts… without plugins! Each share button requires a snippet of HTML, a bit of JavaScript, and a quick template edit. As with all site modifications discussed in the WordPress Wednesday series, make sure to back up your theme files before making any edits.

 

Button Placement

The button generators provided by Twitter, Facebook, Google and others typically assume that you will be liking to a static page with a static name, and the HTML they provide reflects this. Thankfully, it’s very easy to tweak and attribute or two to make the code work within WordPress’s post loop.

Stem’s Law Firm Web Strategy Blog uses a basic sharing button set up — the buttons are placed in the loop after the post’s title, and CSS is used to float them to the right:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

<!-- INSERT SOCIAL LINKS HERE -->

<?php the_content(); ?>

<?php endwhile; endif; ?>

When using the same template for pages and posts, it may make sense to tweak the code so the share buttons only appear on the blog posts, but not on the site’s page (unless you’re hoping someone will ‘Like’ your Privacy Policy!). WordPress’s conditional tags allow you to output the share buttons in specific circumstances — in the example below, the buttons would only appear on the homepage, single posts, and any post archive pages, but not on the blog’s ‘pages’:

<?php if(is_home() || is_single() || is_archive()) { ?>

<!-- INSERT SOCIAL LINKS HERE -->

<?php } ?>

 

Different Share Buttons

 

Twitter’s “Tweet This” button

You can use Twitter’s online resources to choose a button type and size that works the best with your blog. After that, you just need to make a couple of adjustments to the code Twitter provides to ensure that the proper link and title is being used when visitors click ‘Tweet This’. There are two attributes — data-url and data-text — that need to be updated to use WordPress template tags for the post’s link (the_permalink()) and post’s title (the_title()). This HTML is added in the WordPress loop, wherever you want the button to appear:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a>

You can then add the below code to an appropriate spot in your template, with the rest of your theme’s JavaScript:

<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
</script>

Using Twitter’s buttons, it’s also possible to automatically add a #hashtag to these tweets using the data-hashtags attribute:

<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-hashtags="stemlegal"Tweet</a>

Unlike the other two buttons we’ll be covering, Twitter only has a horizontal orientation for their button, making some button placement options not work as well as others.

Note: On the Law Firm Web Strategy Blog, we use the TweetMeme Retweet Button plugin — it’s handy because the icon is a little more customizable than the options Twitter provides, but since the code is automatically injected into the posts, it can be trickier to place exactly where you want it.

 

Facebook Like Button

Facebook has a developer’s area that has the code for their Like buttons, as well as their Like Box and Live Stream (amongst many, many other things). The Facebook Like code is similar to the Tweet This code: there is a snippet of HTML that needs to be added inside the loop, and some HTML/JavaScript that needs to be added to the theme.

First, the HTML for the loop, with the data-href attribute updated to use the WordPress the_permalink() tag:

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-width="450" data-show-faces="true"></div>

Facebook asks that you add this right after the opening <body> tag on the page; you can also just add it wherever you include the rest of your JavaScript:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Google +1 Button

Google also has a page for generating your own +1 button. It doesn’t share posts on the user’s Google+ page (yet) but helps visitors publicly endorse content, and can affect your site’s search rankings.

The following code goes where you’d like the +1 button to appear in your post. The href attribute needs to be updated to use WordPress’s the_permalink() template tag:

<g:plusone size="small" annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

The accompanying JavaScript also needs to be added to your template, with your other JavaScript references:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Google’s +1 button, like Facebook’s Like button, has a number of scale and orientation attributes you can play with to better integrate the buttons to your theme’s layout.

What sharing buttons do you use on your blog and why? Please share in the comments below!



WordPress 3.3.1
is now out! It’s a security and maintenance upgrade that includes a fix for a cross-site scripting vulnerability. Don’t forget to upgrade your site!

Congratulations to the 2011 CLawBie Winners

Stem Client Roundup for December 2011

As December draws to an end, here’s a brief look at what our clients were up to during the final days of 2011:

Best wishes from Stem Legal for a happy, healthy, and prosperous New Year!

WordPress Wednesdays: Improving your search results page

In this WW post, we will explain some tricks and tips to make your WordPress search results friendlier, and more helpful for your users.

There are a number of plugins that have built boasting their improvements to WordPress’s out-of-the-box search, but some simple tweaks can be done to refine your results, and improve the search result’s page interface.

The below examples involve editing your template files, so make sure to back everything up before making any changes!

Display the search term on the results page

On the search page, a simple UI tweak can be adding the search term to either the page’s title, or an introductory paragraph.

<p>Your search for <?php the_search_query(); ?> has returned the following results:</p>

Alternatively, when there are no results, you can display:

<p>Your search for <?php the_search_query(); ?> has returned no results. Please double check your spelling, or try a new search below:</p>

Add a <span> around the term with a background color, or emphasize the term in some other way when you output the code to make it really stand out:

Include a search box on the results page, whether results are returned or not

It’s common to display a search box when a search has returned no results, but it can also be handy to display the search at the bottom of each results page, in case the returned results are not what the user was looking for.

Include the below code after the <?php endwhile; ?> portion of the loop, but before the <?php endif; ?>:

<p>Not finding what you were looking for? Try a new search below!</p>

<form class="clearfix" method="get" id="searchcontent" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" id="s" />
<button type="submit">Search</button>
</form>

Display how many search results have been returned

WordPress returns pages of search results with no real indication of how many the user will be paging through (and how useful their search term was). You can display the number of search results that were returned at the top of the page by using the below code:

<?php
global $wp_query;
$totalresults = $wp_query->found_posts;
?>

<p>Your search has returned <?php echo $totalresults; ?> results.</p>

Combine with the search term to indicate to users how useful their search was:

Exclude categories, pages, etc. from the search results

Oftentimes, there can be categories, pages or posts that you don’t want included in your site’s search results. You can add a search filter to your functions.php file that will exclude specific categories:

<?php
function filterCategory($query) {
if ($query->is_search) {
$query->set('cat','2,3');
}
return $query;
}
add_filter('pre_get_posts','filterCategory');

Alternatively, you can add a similar filter that will exclude an entire post type:

function filterPostType($query) {
if($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','filterPostType');

The filters will automatically be added to all search results that are returned on the site using the WordPress search.

Alternatively, you can exclude pages, posts, categories etc. on the search results page itself — the below code added before the loop on the search results page will restrict the returned result to just posts, rather than pages and posts — just include the below code on your search.php page before the loop:

<?php
global $wp_query;
$args = array_merge($wp_query->query, array( 'post_type' => 'post' ));
query_posts( $args );
?>

Do you use tweaks and plugins to alter your WordPress search results? Please share them in the comments below!

WordPress Wednesdays: Better Archive Lists in WordPress

In this week’s post, we show you how we modified Stem’s blog archives page to segment the monthly listing by year of publication, like on the Strategy Blog’s new archive page.

Jump ahead to see the complete code!

The eagle-eyed among you have probably noticed small tweaks to the Stem site and Strategy Blog this past week. As we gear down at the end of the year, I’m putting time towards minor tasks that have been sitting around forever, and one such change turned into a wacky solution I’d like to share.

Unlike the previous two WordPress Wednesdays, this week we’re getting into some PHP and WordPress template tweaking; there’s nothing too daunting here, but as usual, before making any changes to your WordPress theme, make sure you back everything up.

This particular solution all started with the Stem Strategy Blog. As the sidebar archives grew from two years when I started with Stem, to four (and with a fifth quickly creeping up) I decided it was time to reduce the sidebar list to just the last 12 months, and stash the rest of the links on a separate archive page.

Of course, the huge list didn’t look any more readable on a separate page than it did in the sidebar; I decided blocking the list out by year, and adding some headers would help make it more manageable. This is when I started running into problems. WordPress lists archives by using a function called wp_get_archives(); — unfortunately, the function just returns a bunch of HTML including the links to the archive pages, and whatever tags you’ve specified to surround each. You can set the archives to output as daily, weekly or monthly links, but you cannot limit the archives listed by year.

After a bit of searching online, I tracked down a great function for adding ‘year’ attribute to wp_get_archives, put together by Chris Smith:

Add this to your theme’s functions.php file:

function getarchives_filter($where, $args) {
if (isset($args['year'])) {
$where .= ' AND YEAR(post_date) = ' . intval($args['year']); }
return $where;
}
add_filter('getarchives_where', 'getarchives_filter', 10, 2);

Now you can specify a year in your archives, like so: wp_get_archives('type=monthly&year=2010');

This alone would allow me to set up each year with its own header and links. However, as soon as 2012 rolled around (and 2013… and 2014…) I would have to go in and edit this code. The next step is to automate the process: The following snippet gets the current year, and creates an array ranging from the current year, down to the first year of the blog — in this case, I hardcoded 2007, as that wouldn’t change:

$currentyear = date("Y");
$years = range($currentyear, 2007);

Using that information, I could run a foreach loop and output the year’s header and list of archives automatically, going from the current year, down to 2007:

<?php
$currentyear = date("Y");
$years = range($currentyear, 2007);
foreach($years as $year) { ?>

<h2><?php echo $year; ?></h2>
<ul>
<?php wp_get_archives('type=monthly&year='.$year); ?>
</ul>
<?php } ?>

Now we’re outputting each year’s worth of archives under its header… in reverse order. This seems to make sense in a sidebar, but seeing it under each year’s header just looked wrong. Unfortunately, there is also not an option to reverse the order when using the wp_get_archives() function. I tried next to save the value of wp_get_archive() in a variable and try to run a loop on my own, only to discover that the output of the function isn’t an array, but a string.

Thankfully, the developer and support community for WordPress is strong and active, and a solution to this problem was in the support forums. The following code ‘explodes’ the wp_get_archives(); string, and loops through it to store it in an array called $links[]:

//get the archives as per usual
//making sure not to output them by using 'echo=0'
$archi = wp_get_archives( 'echo=0&type=monthly&year='.$year );

//split the archives into an array
//using the </li> tags
$archi = explode( '</li>' , $archi );

$links = array();

//using the <li> tags, loop through the $archi array,
//cleaning up the rest of the extra HTML,
//and storing the output in the $links[] array

foreach( $archi as $link ) {
$link = str_replace( array( '<li>' , "\n" , "\t" , "\s" ), '' , $link );
if( '' != $link )
$links[] = $link;
else
continue;
}

Last but not least, reverse the order of the array, like so:

$fliplinks = array_reverse($links);

… output them to the page…

<ul>
<?php
foreach( $fliplinks as $link ) {
echo '<li>'.$link.'</li>';
} ?>
</ul>

… and you’ve got yourself a categorized archive page!


The Complete Code

The code for this nifty trick, in its entirety, is as follows — don’t forget to back up your theme files before making any changes!

For your theme’s functions.php file:

function getarchives_filter($where, $args) {
if (isset($args['year'])) {
$where .= ' AND YEAR(post_date) = ' . intval($args['year']);
}
return $where;
}
add_filter('getarchives_where', 'getarchives_filter', 10, 2);

And in the template used on your static archive page:

<?php
$currentyear = date("Y");
$years = range($currentyear, 2007);
foreach($years as $year) { ?>

<h2><?php echo $year; ?></h2>

<ul>

<?php
$archi = wp_get_archives( 'echo=0&type=monthly&year='.$year );
$archi = explode( '</li>' , $archi );
$links = array();

foreach( $archi as $link ) {
$link = str_replace( array( '<li>' , "\n" , "\t" , "\s" ), '' , $link );
if( '' != $link )
$links[] = $link;
else
continue;
}

$fliplinks = array_reverse($links);

foreach( $fliplinks as $link ) {
echo '<li>'.$link.'</li>';
}
?>
</ul>

You can see the finished product on the new archive page — the implementation right now is pretty simple; if you try this out on your own site, please share what you come up with below!

Mobile-Friendly Law Firm Websites: Ideas & Examples

I’ve been feeling that the legal industry was on the verge of adopting mobile friendly websites for a few months now, so when a new report from the Law Firm Mobile blog arrived in my inbox yesterday, it was pretty timely.

Inspired by LexBlog’s State of the AmLaw Blogosphere, Law Firm Mobile set out to determine which firms, among the AmLaw 200 and Global 100, had mobile versions of their websites. The key statistics found included:

  • 19% of firms on the 2011 AmLaw list now have mobile sites;
  • 22% of firms on the 2011 Global 100 list have mobile sites.

From there, the report links to and provides an excellent roundup of screen captures for each of those firms, and also lays out best practices and areas for improvement for mobile legal web design. If mobile design is in your 2012 plan, I would encourage you to see the full report here: LFM 2011: Report on the AmLaw200/Global Law 100 Mobile Web.

At Stem, we believe 2012 will be the year law firms embrace responsive web design – the concept of designing one website that adapts to whichever device it’s being viewed on, rather than creating separate sites for each. (See this collection of examples for a better idea of how responsively-designed websites change according to screen size.)

It won’t be enough to simply test websites in IE, Safari, Chrome and Firefox; those who design law firm websites will need to include smart phones and tablets in that mix as well. Fixed-width and minimum-width designs are on their way out; fluid grids and customized, device-sensitive designs will be necessary for firms to make their websites truly mobile-friendly.

As a example of how we’re incorporating responsive web design into our own best practices, see our client Thorsteinssons‘ website – it looks and behaves differently on a desktop computer, an iPad and a smartphone – subtly and intuitively:

Thorsteinssons LLP – iPad:

 

Thorsteinssons LLP – iPhone:

 

Side-by-side comparison, iPhone, iPad and Desktop:

If you’ve seen some excellent (or not so excellent) examples of mobile law firm websites, please consider dropping a note in the comments. We’re always on the lookout for great mobile implementations.

WordPress Wednesdays: WordPress 3.3 is out!

WordPress 3.3  – aka “Sonny”, after jazz saxophonist Sonny Stitt — is now available for download or upgrading your WordPress website!

At Stem, a new WordPress version means rolling it out slowly over our internal websites to help sleuth out any conflicts between the upgrade and the plugins we usually use before applying the upgrade to our client sites.

The changes in this new version of WordPress affect both users and website developers. There are tons of little UI tweaks throughout the WordPress interface to improve your experience. For example, the sidebar navigation — which used to be strictly accordion — now has compact flyouts to keep all the menu items on the same screen.

The Admin toolbar has also been revamped, using icons for new comments and updates, and employing more flyouts to keep things tidy.

The Media Uploader has been tweaked to include a drag-and-drop interface, allowing you to simply pull files from your desktop and release on top of the upload window to start uploading them to WordPress (works like a charm!).

The WordPress team has also put a great deal of work into improving the software from the perspective of new users — there are tons of new ‘pointer tips’ for new features, and they’ve included friendly welcome messages for the new folks. Here is an example, highlighting the streamlined Insert Media button above the editor:

Lastly, for the tablet users out there, the WordPress dashboard in 3.3 now has better touch support for easier use.

For developer types, the new version of WordPress also includes a jQuery upgrade (so make sure to test any of your own JavaScript post-upgrade) and a bunch of snazzy back-end stuff: a new editor API, improved help screen hooks, better performance with post permalinks, and much more!

It’s always good practice to keep your site’s version of WordPress up-to-date — make time this week to run a quick upgrade on your website (after backing up, of course!). On the off-chance you run into any problems, there is a troubleshooting master list on the WordPress website.

We’d love to hear your thoughts about the new version of WordPress – please share them below!

Recap: Stem’s First Corporate Retreat

This year, while our US clients were celebrating Thanksgiving, the five folks who make up Stem Legal were gathered in Mission, BC for our first ever corporate retreat. It’s taken me a little while to put together, but this post aims to shed a little light on the inner workings of our small but energetic company.

We spent our two days together planning, sharing, and brainstorming, with breaks here and there for fresh air (our excursion to Westminster Abbey, with its spectacular lookout over the Fraser Valley, was a highlight for us all), good food, and lively conversation. Here are my highlights of the retreat:

Face Time
Stem Legal opened for business in 2007, and since then, the company has grown at a slow but steady pace to five team members. As a virtual company, we’d all met Steve but many of the rest of us had never met in person. Our retreat was the first time all five of us were in one room together – no small feat considering we live in four different cities across three provinces. It was an absolute pleasure to finally meet Jordan Furlong, whose name I knew long before I worked for Stem, as well as Corry Balachsan, who keeps our company running, our paycheques coming in, and Steve from going too crazy (and who really needs a profile on the website)! And I’ve known Laurel Fulford for ages, but it had been almost two years since we last saw each other. There’s really no substitute for spending time together in person, and to me, this aspect of our retreat was the most valuable.

The Big Picture
One of our goals for the retreat was to look at the big picture – what direction do we want to take Stem, and how will we do that? To that end, Jordan led us in an strategic planning session where we imagined what our company will look like in three years – sky’s the limit. We took a few minutes to individually jot down our ideas and then shared them with each other. After everyone had shared their vision of Stem, it was encouraging to hear Jordan remark that we’re extremely typical in terms of where we’re at, for a company of this size and age, but also remarkably aligned in our aspirations for Stem’s growth and positioning within the legal web industry.

We also discussed some new ideas for blogging (WordPress Wednesdays is one such idea – see Laurel’s first post here). We identified skills we’d like to learn or improve upon, and discovered that many of us want to spend some of our working hours on creative projects of personal interest – sort of like Google’s 20% time (in short, we want to have a little more fun!). And we talked at length about a revamp of the company website — that’s one project we’re really excited to be working on over the coming months.

Bridging the Distance
As I mentioned earlier, two thirds of our company works independently from home. Because of that, I sometimes feel a bit disconnected from my colleagues, and often miss the social aspect of working in a physical office, so I led a discussion on the challenges of working from home. We all agreed that working from home has many benefits (especially for introverts, which many of us claim to be!) but that we could do better in the connectedness and team spirit departments. We decided to start a habit of sending weekly emails to each other, detailing what we’ve done during the past week, what we’ll be working on in the coming week, and one or two interesting or notable things we’ve learned. Even after the first round of these emails, the difference was remarkable: I had a much better sense of what my colleagues are up to, what I might able to help them out with, and what their priorites are.

All in all, we felt like our first corporate retreat was a success, and we’re already looking forward to next year’s get-together. We’ve got some ideas for what activities we’d repeat and how we’d tweak our format. Do you have tips on what makes a great corporate retreat? Or ways that virtual companies can be more connected? Leave a comment, I’d love to hear your ideas. Cheers!

WordPress Wednesdays: Schedule Posts More Efficiently with Plugins

Welcome to a new feature on the Stem Strategy Blog: WordPress Wednesdays! Every Wednesday, we’ll share a tip, trick, plugin or cautionary tale from our WordPress adventures.

For the bloggers in the crowd, you know the magic of scheduling posts in WordPress — it’s a great way to prepare content in advance, and then have it post on your site at a predetermined date and time.

Pros: You control exactly when posts will publish, which is very helpful for time-sensitive content. You can also write content in advance and have it go live at a pre-determined time.

Cons: WordPress’s post scheduling is very rigid. Each post needs a specific date and time to publish; each post must also be edited separately to change the order of posts publishing.

Thankfully, there are several plugins that extend WordPress’s abilities; the two below expand on WordPress’s out-of-the-box post scheduling with a little automation:

Time Release acts alongside your normal publishing activity; it allows you to set aside posts in a queue, and, when a post hasn’t been published on the site for a set number of days, automatically publishes one of the queued posts. This way, you can write as usual, and Time Release will only chime in with its queued posts when you haven’t posted in a specific number of days.

When viewing the list of posts, Time Release puts a little ‘pill’ icon next to the ones that have been added to the queue. The minimum number of days until a post could go live is displayed next to the icon, and the icon becomes slightly greyed out once a post is published, so you can see what posts have been published automatically even after the fact.

Pros: Simple to use; only kicks in when blog posts haven’t been published in a while, allowing it to be used as a ‘freshness’ backup system as well as a post-queuing tool.

Cons: It’s a little too easy to accidentally publish a post you’re trying to add to the queue. You must make sure you’re saving the post as a draft rather than scheduling or publishing it; otherwise, it will go live as usual.

Rather than creating a separate queue, Automatic Post Scheduler stops the Publish process in WordPress and schedules the post instead. The plugin uses WordPress’s standard scheduling, but automatically sets the post’s publish time; it also blocks posts from being published right away as a default, which is great for button-mashing folks like myself.

Pros: Very handy if you want to schedule all of your posts. Action is only required if you do not want to schedule a post, and overriding the plugin and publishing immediately is easy to do.

Cons: Posts are still set to publish with a fixed date; rather than creating a less-structured queue. Changing the publishing order still must be done on a post-by-post basis.

One last bonus plugin: although it doesn’t do any scheduling heavy lifting, the WordPress Scheduled Time plugin helps highlight post statuses at a glance. The plugin colour-codes the different post statuses, making it easy to spot those that are scheduled to be published, or are still in draft mode and need your attention.

Do you have any tricks or plugins that you rely on to help schedule and queue your WordPress posts? Please share in the comments!