After working with the team, Oxygen Kiosk created a new website for them, that better emphasised the important work that they do in Tasmania.

The new RSPCA Tasmania website design

This new site is based on the MODx content management system, and the team are finding it so easy to use that their content updating has increased 400%!

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!

Working with sisters Phillipa and Olivia was great fun from the very start. Phillipa is a wonderful illustrator, and we wanted to collaborate with her to create a site design which reflects the personality and art of Rowan Sable.

The shop is sprinkled with origami, branches, and paintings. We worked out a design framework which would allow us to combine these things into a website interface, and then Phillipa created drawings of the different elements, which we were able to combine into a completed design which is not only attractive, but valid HTML/CSS code!

We wrapped this around the Content Management Framework of MODx, which makes it super simple to maintain content in the various different sections of the site, and even add products to their online store!

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.

When we heard that RSPCA Australia were looking to have their website redeveloped, we instantly knew that the project was for us (we both love animals: Jaymis actually has a pet, Cal’s apartment doesn’t allow for one).

Working very closely with the RSPCA Australia online team, we created a brand-new original layout, with a focus on cleanliness, readability and style. Navigation was constructed with a focus on simplicity and inherent findability.

All content is managed using the favourite MODx content management framework, which made deployment an absolute breeze.

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.

Working with a complex design, we constructed some of the best-looking html and css we’ve ever done. Sprinkled with some jQuery to drive the menus, and some other assorted delights, super sexy!

Mink runs using MODx which makes editing the pages a snap!

Norpoint is a specialist superannuation and consulting firm providing complete self managed superannuation fund (SMSF) solutions.

Oxygen Kiosk worked with our long-time design partner Alex Just Creative to implement this stylish website quickly.