Big Red Tin

Delay loading of print CSS

2010-07-28T05:03:50Z

Recently I stumbled across an article on zOompf detailing browser performance with the CSS print media type. In most recent browsers, Safari being the exception, the print stylesheet held up rendering of the page.

The zOomph article suggests a solution, to load print stylesheets using JavaScript once the page has rendered (ie, on the window.onload event), with a backup for the JavaScript impaired. You can see their code in the original article.

Automating the task for WordPress

Most sites I develop are in WordPress so I decided to automate the process. This relies on using wp_enqueue_style to register the stylesheets:

function enqueue_css(){
  if (!is_admin()){
    wp_enqueue_style (
      'bigred-print', /* handle */
      '/path-to/print.css', /* source */
      null, /* no requirements */
      '1.0', /* version */
      'print' /* media type */
    );
  }
}
add_action('wp_print_styles', 'enqueue_css');

The above code will output the following HTML in the header:

<link rel='stylesheet' id='bigred-print-css'  href='/path-to/print.css?ver=1.0' type='text/css' media='print' />

The first step is to wrap the above html in noscript tags, the WordPress filter style_loader_tag is ideal for this.

function js_printcss($tag, $handle) {
  global $wp_styles;
  if ($wp_styles->registered[$handle]->args == 'print') {
    $tag = "<noscript>" . $tag . "</noscript>";
  }
  return $tag;
}
add_filter('style_loader_tag', 'js_printcss', 5, 2);

The filter runs for all stylesheets, regardless of media type, so the function checks for print stylesheets and wraps them in the noscript tag, other media types are left alone.

The first two arguments are the filter and function names respectively, the third argument specifies the timing (5 is the default) and the final argument tells WordPress how many arguments to pass to the filter – two – in this case $tag and $handle.

With the new filter, WordPress now outputs following HTML in the header:

<noscript>
<link rel='stylesheet' id='bigred-print-css'  href='/path-to/print.css?ver=1' type='text/css' media='print' />
</noscript>

The next step is to add the JavaScript to load the stylesheets, we can do this by changing our original function, js_printcss, and making use of a global variable:

$printCSS = '';

function check_for_print($tag, $handle){
  global $wp_styles, $printCSS;
  if ($wp_styles->registered[$handle]->args == 'print') {

    $tag = "<noscript>" . $tag . "</noscript>";

    preg_match("/<\s*link\s+[^>]*href\s*=\s*[\"']?([^\"' >]+)[\"' >]/", $tag, $hrefArray);
    $href = $hrefArray[1];

    $printCSS .= "var cssNode = document.createElement('link');";
    $printCSS .= "cssNode.type = 'text/css';";
    $printCSS .= "cssNode.rel = 'stylesheet';";
    $printCSS .= "cssNode.href = '" . esc_js($href) . "';";
    $printCSS .= "cssNode.media = 'print';";
    $printCSS .= "document.getElementsByTagName(\"head\")[0].appendChild(cssNode);";
  }
  return $tag;
}

The code creates the PHP variable $printCSS globally, which is then called into the function using the global command.

After wrapping the tag in the noscript tags, the new function uses a regular expression to extract the URL of the stylesheet from the link tag and placing it the variable $href.

Having extracted the stylesheet’s URL, the function then appends the required JavaScript to the PHP global variable $printCSS.

The final step is to add the JavaScript to the footer of the HTML using the wp_footer action in WordPress. The PHP to do this is:

function printCSS_scriptTags(){
  global $printCSS;
  if ($printCSS != '') {
    echo "<script type='text/javascript'>\n";
    echo "window.onload = function(){\n";
    echo $printCSS;
    echo "}\n</script>";
  }
}

add_action('wp_footer', 'printCSS_scriptTags');

The above code uses window.onload as dictated in the original article. A better method would be to use an event listener to do the work, for those using jQuery we would change the function to:

function printCSS_scriptTags(){
  global $printCSS;
  if ($printCSS != '') {
    echo "<script type='text/javascript'>\n";
    echo "jQuery(window).ready(function(){\n";
    echo $printCSS;
    echo "});\n</script>";
 }

}
add_action('wp_footer', 'printCSS_scriptTags');

The above solution had been tested for very limited circumstances only and found to have worked. Were I to use the function in a production environment I would undertake further testing.

Another question to ask is whether all this is actually worth the effort – even when reduced through automation. On Big Red Tin, the print.css is 595 bytes, the delay in rendering is negligible.

Thesis V WordPress, Pearson V Mullenweg

2010-07-19T01:23:28Z

Reading my WordPress feeds this-morning, it appears a war of words broke out overnight between Matt Mullenweg (the lead developer of WordPress) and Chris Pearson, the developer of the Thesis theme.

In brief, Mullenweg believes that, because WordPress is released under the GPLv2 license, all themes and plugins developed for WordPress must also be released under the same license. Pearson disagrees.

This situation has never affected us directly at Soupgiant so we haven’t needed to, and this is important, ask our lawyer if my interpretation is correct. This is a layman’s opinion and should be treated as such.

The battle comes down to these clauses in the GPLv2 license:

You must cause any work that you distribute or publish, that in whole or in part contains or is derived from the Program or any part thereof, to be licensed as a whole at no charge to all third parties under the terms of this License.

If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works.

–source GPLv2 license

Due to the second clause quoted above, I believe that Mullenweg is wrong. WordPress themes can operate on other blogging platforms with minimal changes. This has been done before with the Sandbox theme for WordPress which was successfully ported to Movable Type.

WordPress themes output HTML with a series of calls to the blogging platform. To output the post’s title and contents in our base theme, we use the code:

<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
    <?php the_content("Continue reading " . the_title('', '', false)); ?>
</div>

To output the same HTML in a Movable Type theme, we would output:

<h2 class="entry-title"><$mt:EntryTitle$></h2>
<div class="entry-content">
    <$mt:EntryBody$> <$mt:EntryMore$>
</div>

In terms of a page’s output, the above code is a minor part of the page. The theme’s template is mostly made up of HTML and CSS, HTML and CSS operate in the browser and not in the blogging platform. It’s for that reason that I believe that Pearson is correct in this case.

I acknowledge that WordPress hooks may complicate the matter but these hooks output such a minor part of a theme’s HTML, that I consider the theme uses the platform but isn’t derived from the platform. I’ve left plugins out of this discussion as these are a more complicated matter: they can output HTML or they can build on the platform.

The above said, were I to release a WordPress theme I would probably release it under the GPL as a hat tip and thank you to the community that has assisted me so much. However, if the theme was as complicated as the Thesis theme, I may feel differently about the matter when it’s crunch time.

Again, this is a layman’s opinion and should be treated as such. If you have a layman’s opinion too, we’d love to hear it in the comments.

Getting the bloginfo correctly

2010-07-13T07:17:16Z

This site runs on an WordPress MS install, along with a number of other small sites. You can see the full list of sites on the directory page.

As with most WordPress sites we use plugins to enhance WordPress, including Donncha O Caoimh‘s excellent WordPress MU Domain Mapping plugin. As the name implies, the domain mapping plugin allows us to use top level domains for each site rather than being stuck with sub-domains. In the case of this blog, without the plugin it would reside at bigredtin.pressgiant.net.

Taking care with plugins

Many plugins are tested for the single site version of WordPress only. I don’t have a problem with this as most plugins are released under the GPL and free in terms of both speech and beer. If I’m not paying for software, it’s up to me to test it in the fringe environment of WordPress MS.

Now that WordPress is WordPress MS is WordPress, more developers may test in both environments but they certainly can’t be expected to test with all manner of combinations of plugins.

The standout problem

One of the standout problems when using plugins with WordPress MS is when they define a constant for the plugin’s url as the script starts executing, the PHP code may look similar to:

<?php

  define('PLUGIN_DIR', get_bloginfo('url') . "/wp-content/plugins/peters-plugin");

  function plugin_js_css(){
    wp_enqueue_script('plugin-js', PLUGIN_DIR . '/script.js');
    wp_enqueue_style('plugin-css', PLUGIN_DIR . '/style.css');
  }

  add_action('init', 'plugin_js_css');

?>

The above stands equally for themes mapping the stylesheet directory at the start of execution:

<?php

  define('THEME_DIR', get_bloginfo('stylesheet_directory') );

  function theme_js_css(){
    wp_enqueue_script('theme-js', THEME_DIR . '/script.js');
    wp_enqueue_style('theme-css', THEME_DIR . '/style.css');
  }

  add_action('init', 'theme_js_css');

?>

The get_bloginfo and bloginfo functions return information about your blog and your theme settings including the site’s home page, the theme’s directory (as in the second code sample above) or the stylesheet url. bloginfo outputs the requested information to your HTML, get_bloginfo returns it for use in your PHP.

Outside of code samples, bloginfo and get_bloginfo are interchangeable throughout this article.

The problems occur when a subsequently loaded plugin needs to change something retrieved from bloginfo. In this site’s case, Domain Mapping changes all URLs obtained through bloginfo, but it could be a plugin that simply changes the stylesheet url to a subdomain to speed up page load.

In a recent case, a plugin – let’s call it Disqus – was defining a constant in this manner. As result an XSS error was occurring when attempting to use Facebook Connect. Replacing the constant with a bloginfo call fixed the problem.

The improved code for the first sample above is:

<?php

  function plugin_js_css(){
    wp_enqueue_script('plugin-js', get_bloginfo('url') . '/wp-content/plugins/peters-plugin/script.js');
    wp_enqueue_style('plugin-css', Pget_bloginfo('url') . '/wp-content/plugins/peters-plugin/style.css');
  }

  add_action('init', 'plugin_js_css');

?>

bloginfo doesn’t hit the database everytime

I presume the developers set their own constants because they’d like to avoid hitting the database repeatedly to receive the same information.

Having run some tests on my local install of WordPress, I can assure you this is not the case. Running bloginfo('stylesheet_directory') triggers a db call on the first occurrence, the information is then cached for subsequent calls.

I realise I sound incredibly fussy and that I’m suggesting we protect against edge cases on our edge cases. You’re right, and it’s not the first time, but as developers it’s the edge cases that we’re employed to avoid.

‘Skip to Content’ Links

2010-07-08T02:03:45Z

Big Red Tin co-author, Josh, and I were discussing the positioning of Skip to Content links on a website. In the past I’ve placed these in the first menu on the page, usually positioned under the header.

According to the fangs plugin, the JAWS screen reader reads the opening of Soupgiant.com as:

Page has seven headings and forty-three links Soupgiant vertical bar Web Production dash Internet Explorer Heading level one Link Graphic Soupgiant vertical bar Web Production Heading level five Heat and Serve Combine seventeen years of web production experience, twenty years of television and radio experience, put it all in a very large pot on a gentle heat. Stir regularly and serve. Soupgiant goes well with croutons and a touch of parsley.List of five items bullet This page link Skip to Content bullet Link Home bullet Link About bullet Link Contact bullet Link Folio

- my emphasis

That’s a lot of content to get through, on every page of the site, before the Skip to Content link. It would be much better if the skip to content link were earlier on the site.

As the HTML title of the page is read out by JAWS, the best position would be before the in-page title. The opening content would then read as:

Page has seven headings and forty-three links Soupgiant vertical bar Web Production dash Internet Explorer This page link Skip to Content Heading level one Link Graphic Soupgiant vertical bar Web Production

- again, the emphasis is mine

That gives the JAWS user the title of the page and immediately allows them to skip to the page’s content. I don’t read the header of on every page of a site, nor should I expect screen reader users to.

I realise screen readers most likely have a feature to skip around the page relatively easily, regardless of how the page is set up but our aim should not be relative ease, our aim should be absolute ease.

As a result, we’ve decided to move the skip to content links on future sites to earlier in the page.

Sadly, this revelation came up as a result of what I consider to be a limitation of the WordPress 3.0+ function wp_nav_menu, the inability to add items at the start of the menu. I should have considered the accessibility implications much earlier. It serves as a reminder, to all web developers, that we should constantly review our practices and past decisions.

If you’ve recently changed something you’ve always done, we’d love to hear about it in the comments.

Designing a User Interface with Caveat Emptor

2010-07-06T02:04:39Z

Recently an Amazon Kindle came into my life.

To test it out I obtained a free copy of The Hound of the Baskervilles from the online store and started reading. I was an instant convert. I loved the experience and I loved the concept.

Until, that is , I found my way into Chapter 2 and there were vital passages missing from the text. It soiled my experience with the Kindle.

There are a number of lessons here. Obviously, there’s the whole caveat emptor, you get what you pay for scenario. A little bit of research would have shown me this review that tells me up-front what to expect:

This edition is missing certain passages… Whenever there is a point in the story where a character reads out of a newspaper or other document, that passage is missing from this Kindle edition. Spend a dollar and get a different version.

But the other lesson is more a question for thought. Why would Amazon keep the book in their store if it’s not what people are expecting? There is no obvious avenue to inform Amazon of the problem with the book and no way to ask them to remove the book so other people don’t fall into the same trap.

When building the user interface of an online store, there are many things to take into account. Feedback is vital for any business. Amazon and Zappos have built empires with great customer service but customer service is about a lot more than just an attentive complaints department or a good returns policy.

Great customer service starts with the user interface. It’s the experience a customer has when they browse or purchase a product. A bad UI is like having a rude salesperson on the shop floor. A customer should be able to trust that the seller is looking out for them. There should be a way to bring issues of faulty products to the attention of the sellers.

Sometimes there are use-cases that just aren’t foreseen. But when they reveal themselves it’s important for an online store to be able to adapt.

So there are things that Amazon could have implemented to make my experience better. A roll-over information box that showed me the start of the most helpful review, for example, could have given me the information I needed to make my decision to purchase or not.

These are the small design things; the small usability things that we try to develop every day.

Recently I designed some wireframes for an online store. It’s hard. I had to balance the client’s budget with the limited information I had, the inclusion and prioritisation of use-cases, and a degree of future-proofing to allow for unforeseen developments.

There is a lot of information to include in an online store. There are lots of buttons and lots of icons to demand a customer’s attention. It’s important to remember, however, that customers want something very simple: They want to buy stuff and for it to behave as expected. Give them that and the rest will follow.

Reply to Emails to Manage Expectations

2010-06-28T06:18:55Z

There are many great blog posts about managing your email. Most of them are by Merlin Mann with his Inbox Zero philosophy which will soon be available in book form. If you’re unfamiliar with it, I recommend checking it out and especially taking the time to watch the one hour video.

The nature of email, of course, is communication.

I’ve worked with people who might have scanned the subject lines for something interesting but I could never rely on them having read an email I sent. Their inboxes became a communication void.

If I wanted them to read an email I had to send them an instant message or SMS to tell them I sent an email I wanted them to read. Other times I’d send the email and then print it out and put it on their desk. It was not a very efficient way to communicate.

It might take anywhere between 30-60 seconds to reply to an email.

Sometimes the reply might only require “Thanks” and then it takes even less time.

As part of my work with Boxcutters I often have a need to email US-based television publicists. It’s becoming an increasingly futile exercise. They never reply. I may as well shout my requests across the Pacific Ocean.

If they can’t help me, then I’d at least like a simple:

I’m sorry but we don’t deal with [Australians / Podcasts / People we've never heard of].

Or even the generic:

We can’t assist you with your request at this time.

An email that requires a lot of attention could be acknowledged really quickly with something like:

Thanks, I’ve flagged this to read later and I’ll let you know my thoughts within a week.

That says a lot. It says: “I know you’re telling me something you think is important but please understand that I’m busy and I can’t give it my full attention right now. I will read it and let you know what I think in my own time.”

This is called managing expectations in email. Email doesn’t need an instant response. A lot of email only needs a response at some stage that day. Some needs a response at some stage that week. Some doesn’t need any response at all.

You need to work out your own criteria for prioritising email but be one hundred percent sure that if someone has taken the time to write to you personally, they are hoping for some kind of reply or acknowledgement that you are paying attention.

Similarly, if you’re sending an email, maybe include a line about how soon you need a reply. It will help the other person formulate their response. And please, if something is really urgent, use the telephone.

Replying to email doesn’t take very long, doesn’t cost much but works wonders to strengthen relationships.

Blog Post: This Tweet Looks Unloved

2010-06-28T01:03:19Z

Any blogger worth their salt knows of Twitterfeed or a similar service. For the uninitiated, Twitterfeed converts a site’s RSS feed into tweets, allowing users to set and forget. The auto-tweets take the form ‘Blog Post: <title> <short url>’ or similar.

When we launched Big Red Tin we didn’t set up Twitterfeed immediately.

With manual tweets we could customise the message to provide more details to Twitter users, one such tweet was:

We’ve defined a new term: Web 1.5 http://redt.in/b0KRut ^pw

– source: @bigredtin

We had Twitterfeed set up at this blog’s old location and took the opportunity to compare click-throughs from manual tweets versus automated tweets.

Manual tweets had a substantially higher click-through rate than the automated tweets. I suspect the reason for this is two fold:

With so many people using Twitterfeed type services, Twitter users have learnt to ignore tweets that appear auto-generated.
More information can be included in a manual tweet than might appear in an auto-tweet.

Take the post we were linking to earlier, had we been using Twitterfeed the tweet would have been ‘Blog Post: Web 1.5 http://redt.in/b0KRut‘. This provides so little information as to be next to useless. We would have ignored such a tweet out ourselves.

Many of the posts on this site are scheduled in advance, this allows us to publish at roughly the same time each week.

To schedule the associated tweets we use CoTweet. We have a couple of shared twitter accounts as it is, so CoTweet comes in handy for other purposes, but it’s the scheduling feature we use most of all.

If you use Twitterfeed yourself, try disabling it for a couple of weeks and manually tweet in its place. There’s a good chance you’ll be pleasantly surprised when you compare your bit.ly stats.

Business is not like Sport

2010-06-24T00:52:23Z

A kid who wants to play golf looks up to Tiger Woods and not Derek Jeter. That makes sense but in business we use sports analogies when we should use business analogies.

More importantly, in business we need to see what other people have done to learn from their mistakes and successes.

At Soupgiant we call ourselves Web Producers. We produce the Web. So I try to look for people who have successes in that field. People like Jason Calacanis and Leo Laporte have built success for themselves out of the web.

They could be compared to sporting greats like Tiger Woods and Derek Jeter. They never gave up, they tried to overcome their obstacles and they worked damn hard to become who they are. But there are more differences than similarities.

The difference in business is the risks we take. It can take between five and ten years to know if a business is ever going to be successful. In sport the wins and losses are almost instantaneous by comparison.

In business you have to sit with a decision for years before you see fruit. It could be years in which there is very little income. It’s also years in which you could be earning more money elsewhere.

It’s all about context. There’s no point in trying to be the Ian Healy of the Web. He was a cricketer and there is no comparison.

Everybody who succeeds in their area works hard. The people who succeed in our area work hard doing what we do.

It’s time we started sharing our own stories, our own opinions and our discussions of the risks we take. We can learn from each other in our own areas by making comparisons that actually make sense.

So we have this blog. Jason Calacanis has a mailing list that is worth subscribing to (even if he does make too many sports analogies). Leo Laporte has the TWiT network of Podcasts. 37 Signals has the Signal vs Noise blog and two books. Molly Holzschlag has her (rarely updated) blog and many books. Jeffrey Zeldman has a blog, a video podcast and many books.

Those are some of the people we look to for advice, examples, inspiration and experience. We’d love to hear you share some yours.

Surprise. It’s all about honesty

2010-06-22T02:21:10Z

Last week we had a sales meeting with a potential client. As it turned out, we were unable to help with the task they had in mind. It was outside our area of expertise.

We may have been able to fudge it. Call us stupid, but we don’t think ‘fudging it’ is the way to keep clients happy or maintain a low client turnover.

In this situation there are two options:

Quote ludicrously high with the aim of missing out on the job. In the event the quote is accepted, the job can be outsourced with a tidy profit.
Tell the truth and decline the work

We chose the latter option and used the opportunity to explain our areas of expertise. Selling the company, not the lie.

The natural fear is the potential client will storm out of the meeting, muttering obscenities under their breath.

What actually happens is the potential client realises their current project – or at least the original part of their current project – is a bad fit. They also realise they’re not dealing with sleazy salesmen willing to say anything to get a job and deal with the consequences later.

The second realisation sells a company. It’s something that can be used to convert a single project into a long term relationship.

Ludicrously high quoting, lies or fudging a task may get you more clients but getting clients isn’t the aim, the real aim is to keep them.

Beware the Amazing Bargain

2010-06-16T05:31:47Z

My physiotherapist wants to build a website for her business. We talked about this while she dug her elbows into my forearm, persuading me to swap my mouse to my other hand.

My instant response, whenever somebody starts a conversation like this is to ask them why they want a website. At least that’s what it used to be. Apparently it’s bad business to tell people they don’t need what it is you’re selling. I held off for as long as I could. The conversation went something like this:

“How much would you charge for a basic website?”
“For a website with original graphic design using a content management system you’re looking at a minimum of a few thousand dollars. It varies depending on what functionality you want on the site.”
“OK. I called up this place that advertises on the radio. You know, ‘quick and simple websites from $495′?”
“I can’t say I’ve heard the ad.”
“Well, it got really weird. They kept calling me and now they keep emailing me. I don’t really want to use them now. They’re too much like stalkers.”

We’ve all heard about how, when something sounds like too much of a bargain to be true, it probably is. This was definitely the case with “quick and simple websites from $495″. It turned out that for $495 you could have 3 pages. Extra pages cost more money and then there were the ongoing costs of hosting, a monthly cost of licensing their CMS and who knows what other hidden costs.

Let’s go back one step. They were charging per page. I remember people charging per page back in 1997, when sites were static. In fact, charging per page implies that they’re not using a CMS. So why then are they charging for CMS licensing?

So I told her what I thought she needed. She’s a physiotherapist and her business relies on her expertise in the area. A blog about physiotherapy, new techniques, stretching the right way, and avoiding injury could really help build her profile as an expert in the area.

“But a blog is a lot of work,” I told her. “Not keeping it up-to-date can do as much damage to your reputation as maintaining the blog will improve it.”

She already works long hours and I knew she didn’t want more work. So finally I asked her what she thinks she can get from a website. I pointed out to her that her business is already at capacity. Not a single slot is left vacant all week.

It turns out that an organisation for a new technique she’s been accredited with wants to put a link to her website on their website. That’s all. In fact, that’s enough. The website could help her expand her business using this new technique.

It reminded me why I ask the question of potentially new clients. It means we’re going to build the right website for them if they actually need something built. If a client actually has a need for a new website then we can work towards that need. It helps us advise them on content, style and structure. These are all services that “quick and simple websites from $495″ won’t provide.

The problem, though, is that businesses like those that advertise web production services at prices that seem too good to be true create an expectation in the market-place. They prey on those who don’t know enough about what they’re purchasing, lock them into systems where they end up paying more over time without ever actually giving them value for money.