Happy Holidays

Christmas lunch is just settling in my stomach, and it’s a drizzly afternoon here in Newcastle, NSW, Australia as I write this. I took December off work and have been busy relaxing and catching up on some unwatched TV from the last few months.

I wanted to take this opportunity to wish all a very merry Christmas and a happy, safe and festive holiday season. I look forward to getting back to work and reguarly writing again in 2010.

P.S. I’m really looking forward to the HTC/Google Nexus One phone due for release soon.

jQuery Tip: Radio Button Deselection

As a web developers we sometimes get things thrown at us that for whatever reason it makes sense for the behavior of something to be changed.  Normally I push back in these situations waving the big User Experience stick at people, but sometimes the request actually  makes sense.

Recently while working on a survey page for a client that was entirely radio button driven I was asked for the ability to allow a user to de-select a radio button.  The answers Google returned for me mostly said “radio buttons should always have one value, they aren’t designed for de-selection.”

The problem with this particular set of buttons was it was the weighting in the survey the user assigned to the ‘Other’ field.  If the user selected a radio button they were then forced to have to enter their own text with no way of deciding the no longer wanted to enter an optional “other” item.  This was also the only optional field in the entire survey.  The other problem was purely aesthetic with a “no selection” selection not working with the design.  It was decided a second click on the radio button would de-select the selection.

I thought it would be easy – I’ll just cancel the onClick event on that object.  Unfortunately Firefox didn’t like that idea.  It seems that when the onClick event is fired, the radio button is already selected, so retrieving the previous selection’s value didn’t work.  The way I dealt with this was a two-pronged approach using both the mouseDown and click events.

Implementation

Firstly I added a new radio button with “display: none” and gave it a value of 0 so that I had something to select, this should go before the other radio buttons in the group as it’s referenced as index 0 using .eq(0).

       <input type="radio" name="q1e" style="display: none;" value="0" />

And the jQuery magic to make the de-selection happen:


       $('[name=q1e]').mousedown( function() {
		$(this).data('previous', $('[name=q1e]:checked').val() );
	});

	$('[name=q1e]').click( function(e) {
		if( $(this).val() == $(this).data('previous') ) {
			$('[name=q1e]').eq(0).attr('checked', true);
			$(this).blur();
			e.preventDefault()
		}
	});

Are you mobile friendly?

Verizon has reportedly sold over 100,000 Motorola Droid handsets on the first weekend they went on sale. 1

Apple’s iPhone allegedly smashed the 10,000,000 (that is ten million) sales during 2008. 2

These statistics are phenomenal, there are a huge number of devices out there in users hands that I feel are being neglected when it comes to general web development, digital campaigns and online marketing.  Sure there are various services that cater specifically for these platforms, the likes of AdMob which has been recently acquired by Google.

There has been around 10 new Android handsets announced for the last quarter of 2008 or early 2009 – smart-phones are quickly replacing all other handsets out there.  Networks are continually being upgraded and data speeds to these devices are increasing all the time.

What is lacking however is consideration for these devices when developing digital campaigns.

Most web campaigns seem to focus on the desktop user, where there is gradual trend away from desktop based web surfing to hand-held devices (smart-phones, portable Internet enabled gaming devices and PDAs) and lounge-room based devices.  Over the last month alone mobile-based web surfing has risen from 0.6% of all traffic to around 1.6% of all traffic. 3

Is your website ready to handle this?   I do a large portion of my web surfing from my HTC Magic Android based smart-phone and it continually surprises me how many websites do not cater sufficiently for mobile platforms.   While I’m a huge fan of the services of my carrier, Optus (a SingTel company) here in Australia even they fail in some aspects.  They run a regular “Bonus Rewards” campaign for every pre-paid recharge over $30.00.  Once you recharge a code is delivered via SMS which needs to be entered into their website.    They earn some points for providing a non-Flash based version of this site, but even the standard web version does not render adequately on the Android browser (and probably not on the iPhone browser either, both being Apple Webkit based browsers).  Important parts of the page are rendered outside of the margin and are almost completely in-accessible.   This is something that I would have assumed would have been designed to be used by mobile Internet enabled devices – isn’t that what they’re trying to sell?

More and more digital agencies seem to be focused on Adobe Flash based  content online.   Not only is this horrible for Search Engine Optimization it really causes issues with portable devices – most of which currently do not offer any flash based support (though I hear rumours that this is changing in the near future on both Android and iPhone based platforms).  Even if there is flash support, most of these campaigns or sites are designed specifically for very large screen sizes, which again would make them almost unusable.

Digital agencies and designers need to start taking notice of this, as they are already forcing a large portion of their potential audience to “come back later, when you’re on a real computer”.   However, I do understand I am probably in the minority right now as far as users who consume most of their online content on a 3.2″.

I’m writing this as my first article in a freshly re-vamped site, complete with CrowdFavourite’s WordPress Mobile Edition plug-in, providing a very nice mobile based interface for browsing Wordpress blogs – I encourage anyone out there with a WordPress based blog to install this simple plug-in to easily accommodate the mobile user.  I’m sure other publishing platforms provide this too.

I can understand also that glitzy designed campaigns and competitions making extensive use of Flash for their user interfaces aren’t going to disappear any time soon (I personally work on the back-end of many such campaigns),  little needs to be done to make these sites or interfaces standard and mobile web friendly.  I’m not suggesting the entire user experience needs to be provided on a small scale – however the core information and perhaps even core functionality of a site can be provided to a user, with minimal additional effort.

References

  1. Computerworld: Verizon Sold 100,000 Droids over first weekend.
  2. AppleLot: iPhone to smash 10,000,000 sales in 2008
  3. StatCounter.com: Desktop vs Mobile Oct 2009-Nov 2009

Cyanogen Adventures

I’ve had my HTC Magic (32B) for a month now, and figured it was time to push it a little.  Cyanogen seems to be the popular choice for this, so I went with it.  I had a very painless experience doing this, and this is how:

First, get hold of the stable Cyanogen image.  I used CM Updater to get this, but it wouldn’t install it (probably because my phone wasn’t rooted).  Once CM Updater has downloaded the image, move both files into the root folder of your SD card (it should be called update-cyanogen-*.zip)

Next download flashrec (http://g1files.webs.com/Zinx/flashrec-20090815.apk) and install it onto your phone.  You can put it on your SD card and use AppManager to do an install, though I believe ASTRO and other file managers have this ability as well.   You can also use the ‘adb install’ option if you have the android SDK.

Run flashrec and download/install the CM recovery image, then reboot to it.

Select the “install any update zip” option and pick the CM update zip you placed in the root folder of the SD card before.

Before rebooting into your shiny new Cyanogen install, do a factory reset from the recovery image menu – trust me – this is important.

I take no responsibility for what happens to your phone during this process, I’m just letting you know what worked for me.  Good luck and happy androiding!

Zend Amazon S3 conflicting with Twitter

I’ve recently been working on the backend for a project which revealed a conflict between Zend_Service_Amazon_S3 and Zend_Service_Twitter.

The issue caused pushing content to Zend_Service_Amazon_S3 to fail with 401 errors if the call was made after a call to post a twitter status update with Zend_Service_Twitter.  It appeared to be because both of these extend Zend_Service_Abstract which shares an instance of Zend_Http_Client.

Work-a-round:

Around line 409 of Zend/Service/Amazon/S3.php there is a line which gets the current instance of Zend_Http_Client:

$client = self::getHttpClient();

Changing this line to:

$client = new Zend_Http_Client();

Fixes the problem.  I’m sure there is probably a more graceful workaround for this problem; but this one certainly fixes the conflict between these two services.