I setup a webcast for both days of conference panels, played an audiovisual set as half of Cowper, spoke on the Music as Product panel (which has already been released on Youtube – Part 1, Part 2), VJ’d and mixed live visuals for the Unconvention Showcase, and then backed it all up by running the Unconvention After Party at The JOYnt, featuring Cowper, Tash Parker and Tim Jackman.

Then I slept for 12 hours.

Unconvention was fantastic. I’ve been involved in several “creative” conventions, and find that they’re not usually worth the hundreds of dollars per ticket, so at $20 including a sausage sizzle, Unconvention was the best value convention I’ve ever encountered. It was filled with smart, creative, fun, talented people, who were all super approachable, and keen to share and network.

I wasn’t really sure that I’d have much to bring to the table on the Music as Product panel, given that everyone else involved runs record labels and similarly directly-musical services. Turns out that being the guy who runs the server and sees all the stats on newsletters, facebook groups and web traffic is pretty relevant to Digital Music as Product, so I ended up hogging the microphone for quite a lot of the panel.

(Part 2)

The Unconvention Showcase was also great fun, and we were very happy to get to work with Hunz, whose career I’ve been following since he released his fantastic free album Thoughts That Move.

All of the panel sessions, photos and video produced during the event are Creative Commons licensed, so there should be more awesome stuff coming out in the next couple of weeks. I’ll try to pull out some good bits from my panel to condense down the useful web things I had to say.

Oxygen Kiosk, the sleek web boutique in Sydney and Brisbane is looking for a junior web developer for a 6-month contract (with a view to executing a permanent position).

We’re geekily obsessive about code and hype-free solutions. We’re small and agile, love the web, and love making it a better place with handcrafted websites.

If you’d like to join us, you should have Ninja-level skills* in at least 2 of the following:
Hand-coded HTML, CSS, Javascript, PHP, Front end web design.

… and pirate-level abilities in as many as possible of:
Textpattern, MODx, WordPress (WPMU, Buddypress), Shopify, Gallery2, Linux/Apache server admin.

*For the purposes of this document, it is presumed that Ninjas are considerably more skillful than Pirates.

The successful ninja will be driven, well organized, able to work independently, and have ridiculously high attention to detail while still remaining stealthy and ruthless. There’s scope to be based in our Sydney dojo, or work remotely.

Please apply with a portfolio of killer projects.

One thing which can seriously detract is the increased load time when a site is filled with ads. This not only comes from the actual images and other assets which are loaded for each ad block, but often those blocks are generated by chunks of javascript, which can add rather a large amount of code to the HTML page, even before any imagery is loaded.

Most blogs start out with Google’s Adsense, and then eventually graduate to Ad Manager if there’s enough advertiser interest that they can start selling their inventory directly. However, Google does have some vast shortcomings, so when your sites get big enough, you start looking around for ad-serving alternatives, and inevitably come upon OpenX.

The Standard Way of Calling Ads

We’re about to launch a redesign for a fantastic australian blog (more on that soon), who have a sizable roster of advertisers. They can have over 20 ad blocks of various sizes on some of their pages, so using “traditional” OpenX ad calls was not only time-consuming to add to the site, but it was adding a huge amount of HTML weight. Here’s what the “standard” OpenX ad block code looks like:

<!--/* OpenX Javascript Tag v2.8.1 */-->
<script type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'https://example.com/www/delivery/ajs.php':'http://example.com/www/delivery/ajs.php');
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=11");
   document.write ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
   document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://example.com/www/delivery/ck.php?n=a86ff4c4&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://example.com/www/delivery/avw.php?zoneid=11&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=a86ff4c4' border='0' alt='' /></a></noscript>

It’s a bit messy, but not so bad by itself. However, when you’ve got 8 of these blocks all together, and another dozen spread across the rest of the page, it gets rather hefty. The front page of the site in question, without ads, weighs in at a bit over 600 lines of HTML. Dropping in 20 ad blocks brings it up to just under 1000 lines.

As I said. Hefty.

Making OpenX Faster and Smoother

Fortunately, OpenX has an invocation method called Single Page Call, which is designed to make the whole setup much more svelte. So instead of calling that gargantuan chunk of javascript and .write methods over and over, you have a single invocation script called in the header:

<script type='text/javascript' src='http://example.com/www/delivery/spcjs.php?id=1'></script>

… and then a much smaller, sexier invocation code for each ad block:

<script type='text/javascript'><!--// <![CDATA[
/* [id1] Wide Ad - Top */
OA_show(1);
// ]]> --></script><noscript><a target='_blank' href='http://example.com/www/delivery/ck.php?n=c8acc6c'><img border='0' alt='' src='http://example.com/www/delivery/avw.php?zoneid=1&amp;n=c8acc6c' /></a></noscript>

Switching to this method decreased our page size by 30%! Fantastic.

The only limitation here is that it expects every ad zone you’re calling to be unique. So you can’t make a single zone called “interpost_ad” and call it 10 times, it wants you to create 10 different zones called interpost_1 – interpost_10, and set them all up individually. This is a monstrous pain in the butt for administration and development, doubly-so because what I’d read in the OpenX docs had me expecting that this setup would allow different banners to be called if the same zone was repeated.

The way to actually achieve this is hidden down the bottom of the Single Page Call documentation page under “Advanced Usage”. I’d never got that far down, because I thought I had the code working correctly and that my delivery problems were due to backend mis-configuration.

To get unique ads showing up in repeated zones, you have to create a “zone array” which sits above your invocation call in the header, and associates particular ad block IDs with invocation zones in the page.

<script type='text/javascript'><!--// <![CDATA[
var OA_zones = {
'ad_top' : 22,
'sidebar_mrec' : 17,
'selfpromo_1' : 18,
'selfpromo_2' : 19,
'sideblock_1' : 21,
'sideblock_2' : 23,
'sideblock_3' : 23,
'sideblock_4' : 23
}
// ]]> --></script>
<script type='text/javascript' src='http://example.com/delivery/spcjs.php'></script>

Then you just change those “single page call” invocation codes to include the correct zone name:

<script type='text/javascript'><!--// <![CDATA[
    /* Sideblock 1 */
    OA_show('sideblock_1');
// ]]> --></script>
<script type='text/javascript'><!--// <![CDATA[
    /* Sideblock 2 */
    OA_show('sideblock_2');
// ]]> --></script>

… etc.

This works beautifully, because it allows you to quickly tweak which zones are being delivered to which areas of the page from a single point in the header, rather than having to make edits all over the place when you want to swap things around. You still need each ad zone in the page body to have a unique name though, which is fine for headers, sidebars, and footers, but how do you manage it for dynamically generated sections of the site? Your search results, tag and category archives?

The old way to do this in WordPress would be to make a “count” variable in PHP, and have it iterate each time the loop was called. Usually that looked something like this:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
  <?php if ($count == 1) : ?>
          //bunch of ad code goes here
  <?php if ($count == 2) : ?>
          //bunch of ad code goes here
  <?php if ($count == 3) : ?>
          //bunch of ad code goes here
   <?php else : ?>  

  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

This is a pretty reasonable solution, but that counter loop can be salted across a broad swathe of code, as counters are often used for a couple of things for each post called on a page. So the initial $count call would be at the top of the php page, then your actual invocation code statements came much later. Rather confusing stuff.

Fortunately, WordPress 2.7 introduced a WP_Query function variable called “$current_post“, which gives you the numeric ID of the current post in the loop. No more counter code required!

Using WordPress’ $current_post Property To Create Dynamic Ad Blocks

$current_post is the final ingredient required to give us light, automatically generated ad blocks. Current_post is called from the WP_Query function, like so:

<?php echo $wp_query->current_post; ?>

That would echo the ID of the current post in the loop. Of course keeping in mind that the data is coming from an array, so the first ID will be 0.

Remember our super simple ad block javascript call?

<script type='text/javascript'><!--// <![CDATA[
    /* Sideblock 1 */
    OA_show('sideblock_1');
// ]]> --></script>

Because this is javascript, we can use PHP to dynamically re-write the code on page load. Using $current_post, we can have it write the post ID each time the WordPress loop is run, giving us as many unique ad blocks as we have posts on the page. Here’s how it looks:

<script type='text/javascript'><!--// <![CDATA[
OA_show('interpost_<?php echo $wp_query->current_post; ?>');
// ]]> --></script>

That will call an ad zone called “interpost_0″ on the first loop, then “interpost_1″ etc. for as many posts as appear on the page. Then you just need to add those zones into your zone array in the header, which now looks like this:

<script type='text/javascript'><!--// <![CDATA[
var OA_zones = {
'ad_top' : 22,
'interpost_0' : 20,
'interpost_1' : 20,
'interpost_2' : 20,
'interpost_3' : 20,
'interpost_4' : 20,
'interpost_5' : 20,
'interpost_6' : 20,
'interpost_7' : 20,
'interpost_8' : 20,
'interpost_9' : 20,
'interpost_10' : 20,
'interpost_11' : 20,
'sidebar_mrec' : 17,
'selfpromo_1' : 18,
'selfpromo_2' : 19,
'sideblock_1' : 21,
'sideblock_2' : 23,
'sideblock_3' : 23,
'sideblock_4' : 23,
'sideblock_5' : 23,
'sideblock_6' : 23,
'sideblock_7' : 23,
'sideblock_8' : 23
}
// ]]> --></script>
<script type='text/javascript' src='http://advertisers.babyology.com.au/www/delivery/spcjs.php?id=1'></script>

It’s a super simple method, saves a load of programming, and keeps your code readable and futureproof.

Yay for $current_post!

This morning there was a great string of posts on Merlin Mann‘s twitter:

If you’re “insulted” by criticism of SEO, go write a novel or work at a food bank. With all respect, find a job worth fake-defending. [link]

Shorter: “SEO” is either 1. Common Sense (clean code, good urls & titles); or 2. Cheating (most everything else). Learn “1″; Exorcise “2″. [link]

Once worked at an SEO-optimized bar. Sign said we were an emergency room but our house special was 1 oz. of urine and 9 ads for other bars. [link]

These led me back to this post by Derek Powazek (@fraying on Twitter), which sums up the issues we have with the SEO industry, (and then continues to deride SEO people generally, which is fine too, they don’t do much which makes me feel like defending them from derision.)

The One True Way

Which brings us, finally, to the One True Way to get a lot of traffic on the web. It’s pretty simple, and I’m going to give it to you here, for free:

Make something great. Tell people about it. Do it again.

“Spammers, Evildoers, and Opportunists” by Derek Powazek.

This is precisely how I respond to clients who ask me about “SEO”.

We do our job properly. We create sites which adhere to web standards, and work super hard on figuring out how to best present content so it’s attractive, intuitive and findable. When everything is set up, we train our clients how to create their content so both people and search engines can understand it.

That’s “SEO”.

If your site has been built properly, then there is no need for additional “optimization”. If you aren’t getting visitors, or you’re not appearing in search engines, then there are two possible problems:

Your site is broken or badly coded

Get a developer to have a look at your site, and tell you if it’s coded to web standards. If they’re any good, they’ll be able to hit your domain, view the source code, and tell you in about 3 seconds whether it’s good.

If you don’t know any web developers, and are too shy to ask us about it, then paste your URL into the W3C Markup Validation Service (Here’s the validation for OxygenKiosk.com). If there’s a couple of errors showing up, it’s probably fine. Standards can get a little wonky when they come up against the reality of web content created by inexperienced writers, or things like youtube embeds.

If you’re seeing tens or hundreds of errors, then there’s a good chance that your site could do with an overhaul. For that, you need a web developer, to fix the foundations of your site for the long term.

Your content isn’t doing its job

If your site is validating reasonably well, and you haven’t hidden sections away so people can’t find them, then have a look at the actual content of your site. Is there any content there? Any discussion of the subject matter aside from “Buy this product and/or service”? Anything that someone interested in the subject might want to share with a friend who’s also interested in said subject?

If not, then it’s your job to make something interesting. I hope that you’re running a business because you’re genuinely interested in the field, and hopefully you’re actually keen on finding out new things, and sharing what you’ve found! If writing words isn’t one of your superpowers, then you need a copywriter. Someone who can look at all the awesome stuff you’re doing, and turn it in to words that people will enjoy reading.

Maybe your business isn’t about finding or creating new things. Maybe you do one thing really well, and you just want people to know about that thing you do. If you’re selling products, is there a section of your site which lists what you’re selling? Can I grab a link to your product or service, and email it to my mum, saying: “Hey mum, I’ve just found someone who sells that thing you were looking for. Check it out!”

If I’m able to do that, she will totally buy it, and your site has achieved its goal.

Squarespace’s propaganda goes on about “Total Data Portability”, and how “your data is yours to keep”. However, when it comes to moving to another system, there’s no automated method to get your images and other files out. You can use a “data export” to create a Movable Type formatted export of your posts (which will import fine to most blogging engines), leaving your images in their proprietary file system, to which you only have web access, and no functionality to create an archive for downloading.

I asked Squarespace support if there was any other way to get our images out, and their response was “Currently there is no feature for this — each file will need to be downloaded individually from File Storage, sorry about this.”

I asked if we could get a Squarespace dev to compress the directory so we could download it, and got various permutations of “that feature doesn’t exist, but I can suggest it as a future feature” from 3 different Squarespace support people:

Fortunately, while all this frustration was going on, I figured out a sneaky little system to allow me to download all of the images directly from their web interface. It uses Firefox and the DownThemAll extension.

How to rescue your images from Squarespace

If you don’t already use Firefox, download and install it, and make sure you check the “Use Firefox As Your Default Browser” box. Welcome to Modern Browser Land. You’re going to like it here.

Next install DownThemAll, and restart Firefox.

Login to your Squarespace account, and go to the “File Storage” area. Hopefully, like Dubspot, you haven’t been too organized, and most of your images are in a single directory, like this:

Right click on the page, and select “DownThemAll”.

We only want the posted files, which are held under a directory called “storage”, so click the URL column header to sort all the files by URL. DownThemAll had skipped out some files – PDFs and SWF mostly.

Click “Start”, and you get all of your files back. Well done.

Unfortunately your journey isn’t over yet. Squarespace’s Movable Type formatted export includes a lot of cruft in the HTML, which takes a bit more work to fix up. Details to come.

I hope they help someone, somewhere, with a CSS problem.

So hence, some interesting/useful resources on the subject:

Get Images Attached to a Post: Requires functions.php hacking, gets attachments from the database, rather than through brute force search of the post content.

Get the first image from the wordpress post and display it: Requires some functions.php hacking, searches the actual post text, and has the advantage of getting the first actual image in the post, rather than the first image uploaded and associated with the post.

Simple Image Grabber WordPress Plugin:

Also interesting: Related Posts with Thumbs plugin.

Hopefully, some of you will learn from my mistakes!

It’s understandable that this can happen. Plugins are generally designed to allow functionality without any template editing, and automatically including CSS and JS means that your plugin can look “right” to most users. However, we believe that plugins which include this kind of code should have “Developer Friendly” options, which allow you to turn off these includes and keep full control over how your site is styled.

A specific example: The PXS Mail Form plugin is a simple, light WP plugin which looks for code and replaces it with, yes, an email form. It’s getting rather old (last update was 2005), and there are mail form plugins with greater functionality, but PXS wins over the newer, flashier ones because of this simple feature:

It allows you to turn this extra CSS off.

Of course, a developer who’s smart enough to know they don’t want multiple lightbox.js versions embedded in their template or style declarations in their content is probably smart enough to also know how to hack it out of the plugin responsible, and we’ve done so on many occasions. This causes problems for upgrading though, we have to document these changes and remember to re-apply them whenever the plugin is upgraded, which makes more work for us, and more expense for our clients.

So, whenever we can, we try to use plugins which either don’t do these “unfriendly” things, or give us the option to disable them. So this is a list of plugins we’ve discovered which are Developer Friendly:

PXS Mail

The website is managed using Teamsite, which regular readers of my personal blog already know, is an outdated and overhyped file versioning system.

The site had been redesigned a few years before I came on board, but there were some glaringly obvious problems with the current design, and many more issues became apparent once I began to scratch the surface.

Luckily, because it was a Government client, I was afforded time and resources to conduct extensive usability analysis of the existing design, and then also the new designs that I came up with. This was a very interesting process, and most importantly, having quantitative data when arguing for a particular change in design is invaluable. Managers love to be able to tell their bosses that X change will result in Y% more usability.

My new design put the primary navigation on the front page, where it had been missing for years, completely breaking user expectation. There is also a smattering of javascript to make the page more ‘dynamic’. It also makes use of some more sophisticated CSS techniques, and has reduced the overall file size considerably. There are some chunks of my code that were not implemented, but apprently that is a failing of the ‘CMS’ more than anything else. There are also big changes that I made that have been left out of this relaunching, but I think that they may be left for a future unveiling.

Pretty cool though, no?