So once again I was called in to help with a client’s website as I have been getting a name as the resident geek. I wonder why.

They had installed two DJ-ImageSlider’s running at the same time, and the two sliders had content that related to each other.

The issue being, that when one slider was paused by the hover function, it would cause the other to become “out-of-sync”.

Not pretty.

So I popped my hand up and suggested I could fix it myself by altering some of the Javascript. However, like last time, Google could not help me with a solution here.

So I present another post for those searching for the solution in one location.

How to remove the Hover Pause from DJ-ImageSlider

Step 1: Find the “slider.js” file on your server.

On our system, running Joomla!, this was relatively easy to find by following the logical path. It may differ on your setup, but for me – I found this file at:
/modules/mod_djimageslider/assets/

EDITED Step 2: “Beautify” / Decompress the Javascript.

So the first thing you may notice with DJ-ImageSlider “slider.js” is that it first appears as a bunch of (seemingly) random characters. This is because it has been compressed (“minified”) using an apparently web-popular “Dean Edwards Algorithm” (http://dean.edwards.name).

Basically, this process shrinks the code for easier loading on the users system. Not fun for editing though.

EDIT: It appears as though JSBeautifier no longer correctly expands the source code (thanks to Reggie), so first step is to go to Dean Edwards website as above, but go to the UN-packer on this site here http://dean.edwards.name/unpacker/ once you have the source code from THIS unpacker, continue with the steps below.

So, first thing is to COPY all of the code (make sure you get it all), and take it to the website:

http://www.jsbeautifier.org/

Paste your code into the space provided, and hit the top button (above the text field) that says “Beautify Javascript or HTML (ctrl-enter)”

You should now see the DJ-ImageSlider code.

Step 3: Edit the slider.js code

Now that you have beautified the code, you need to navigate to the slidePlay(){ function. Originally, it should read something like:

if (q && !r) nextSlide();

To stop the hover pause it is as simple as removing the “&& !r” (meaning, AND NOT r [r = mouseover slider]).

So your slidePlay() function should now look something like this:

if (q) nextSlide();

Done.

Step 4: Re-compress / “Minify” your code

You may be able to skip this step – I’m not sure – but just in case, and for the sake of it remaining as close to the programmed original, why not compress it back to its original format?

To do this, it is as simple as visiting Dean Edwards website once more, this time to

http://dean.edwards.name/packer/

and COPY PASTE your new code into the compressor.

It will spit out the minified version.

PASTE this minified version back into your “slider.js” code and voila! You have now stopped the DJ-ImageSlider from pausing on hover.

Step 5: Insert original developer comments

Please do not forget to reintroduce the developer comments into the script before saving (and/or remember not to minify them with the rest of the code) and give your thanks to the team of DJ-ImageSlider for their great, free, component at

http://dj-extensions.com/dj-imageslider

If you have any questions or tips to improve this methodology please let me know in the comments!

Recently at work I put my hand up to build one of our clients a mobile website (well, they said “iphone” but I assume they meant mobile) — and while I am familiar with web design to an extent, it has been some while since I had actually put fingers to keys and coded a page — let alone a mobile one.

So I hit Google for a few tips and tricks on how to best design a mobile website, and I was amazed that there didn’t seem to be one source to answer my questions.

With that in mind I wrote the below to help any other web noobs or semi-noobs code their own mobile specific website.

1. Dimensions, Pixel Ratios and the Viewport Meta Tag

The first thing you may notice when you begin to build a mobile site, is that the browser generally shrinks pages to fit the smaller screen. Obviously. But what this means is that if you design a website with stunning high resolution images at the dimensions of your preferred device – when you put it on the web it will be scaled down accordingly (I read that mobile browsers assume a webpage is 980px wide or something around that figure).

To stop the website from scaling down, and display 1:1 on your screen, you need to add just one line of code to your Header file (or just in the tag of each page). The Viewport Meta Tag.

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

What this simple tag does, is forces the page to load at a 1:1 pixel ratio on your device, so that your 320px (iPhone) wide design, actually fills up 320px of the iPhone screen. The maximum-scale also stops users from zooming, giving your website an “app” feel.

This brings me to the second point, pixel ratios.

When I first received the design files from our studio, everything was designed for 640px wide — the width of an iPhone Retina display.

What I quickly learnt, was that while the Retina display is 640px wide – it has a pixel ratio of 2:1. So that for every Retina pixel, there were 2 web pixels. This is where the details got kind of fuzzy for me, but in the end all you need to know is that even on an iPhone Retina display – design your site for 320px wide. Try it – put a 640px graphic or image onto your site.

2. Image Size and background-size

To get around this size dilemma, two pieces of code were necessary.

Instead of resizing my images to 320px, and therefore becoming low-resolution on Retina displays, I used the image width function to dictate all my images are 100% wide. I then put all my images inside their own DIV tags, which I would then manually set to a desired size.

<div style="width: 320px;">
<img src="picture.png" width="100%" />
</div>

The effect of this means that the high-resolution 640px image is still loaded, but scaled accordingly if it is a low-res or high-resolution screen that is viewing it.

When it came to my background-images, it had me stumped for a while, until I found the CSS attribute “background-size”. This CSS style allows you to dictate the size of your background images, and is supported by Mobile Safari.

/* CSS Background Size */
background-image: url("640hiresbg.jpg");
background-size: 320px;

3. Opening Google Maps from a Link

So the client asked, “can we have a find us button that opens Google Maps?”, and I said: sure! But I didn’t realise what a hassle this would be. While on Android devices, just linking to “http://maps.google.com/?”&nbsp;should ask which application you would like to open it in (well, on my Samsung Galaxy S3 it did anyway) — the same does not happen on iPhone devices.

Luckily, I found this link, which opens Google Maps natively on the iPhone:

<a href="maps:q=Somewhere in the World">

However, this link does nothing on Android devices.

To get around this, perhaps superfluously – I created this code below which will detect which device the user is using, and change the link accordingly. Place this in the tags.

window.onload = function(){
  var mapLink = document.getElementById("findUs");
  var finalLink = "";
  if(navigator.userAgent.match(/iPhone/i)) {
    finalLink = "maps:q=Somewhere in the World";
  }
  else {
    finalLink = "http://maps.google.com/?q=Somewhere in the World";
  }

  mapLink.href = finalLink;
}

Then, you will need to add the ID tag to your Link, so that the above example becomes:

<a id="findUs">Find Us</a>

And voila, your link will now open your address in either Google Maps on iPhone or your preferred map service on Android.

[[Note: if maps.google.com does not prompt an app selection option on your device, there is a third option -- the "geo:long,lat" address -- which will open on most, if not all, mobile browsers.]]

4. Making a call from a link

To make a call from a link on your website, it is extremely simple. Just create the link to “tel:XXXXXX” where XXX is obviously your desired phone number. Simple as that.

<a href="tel:555123123">Call Us (555-123-123)</a>

5. Opening the Native Facebook App to your Page

Opening Facebook is remarkably simple, and will even differentiate devices for you – so that if a Facebook app isn’t installed, it will just open the link your browser. No need for a Javascript code like my Google Maps example. However, while opening the app via a link is easy – there is a trick you need to perform to get it to open on your page (using the link without this method will open Facebook on the users personal profile — not the website owners).

fb://profile/

You would think it would be as simple as adding your desired Username to the link right? Wrong. The link, fb://profile/mypage – does not work. It still simply takes users to their own profile. So how do we get it to navigate to your page? Use the profile ID.

If you go to your profile, and hover over your profile picture – you will see that it links to an address with a whole lot of numbers on it.

https://www.facebook.com/photo.php?fbid=000000000000000&set=a.111111111111111.222222.333333333333333&type=1

YOUR PROFILE ID NUMBER IS NOT THE NUMBER PROCEEDING THE ?fbid=.

It is, in fact, the numbers 3 in my example above. The number preceding the &type=1 component.

So, to link to your profile page in the native Facebook app, you will need to link to:

fb://profile/333333333333333

And there you have it, 5 things that would have made my life easier if they were just all in one place. To recap:

1. Force the screen to sit 1:1 by using

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

2. Create your images at 640px wide for high resolution on Retina displays, then shrink images to 320px using DIV widths, image widths and the ‘background-size’ CSS attribute.

<div style="width: 320px;">
<img src="picture.png" width="100%" />
</div>
/* CSS Background Size */
background-image: url("640hiresbg.jpg");
background-size: 320px;

3. Opening Google Maps from a link is simple, but it requires a different approach for iPhones. Differentiate the devices, and set your links using javascript.

window.onload = function(){
  var mapLink = document.getElementById("findUs");
  var finalLink = "";
  if(navigator.userAgent.match(/iPhone/i)) {
    finalLink = "maps:q=Somewhere in the World";
  }
  else {
    finalLink = "http://maps.google.com/?q=Somewhere in the World";
  }

  mapLink.href = finalLink;
}

<a id="findUs">Find Us</a>

4. To make a call from a Link, use the simple address

<a href="tel:XXXXXXXXX">Call Us (XXX-XXX-XXX)</a>

5. Open the native Facebook app by using grabbing the unique ID of the page (by using an profile image URL) and the link

fb://profile/XXXXXXXXXXXX

I hope this was helpful to someone out there – and I hope it helps you to create a better mobile experience for your users.

If there are any easier ways to do things, or tips you know to enhance the usability of a mobile website – let me know in the comments!

Last year, I was asked to present at the American Academy of Advertising 2011 conference “Thinkabout” held at my university, QUT, in Brisbane.

The topic of my presentation, which was conducted with the live video presence of students from the United States and the United Kingdom, was “The Future of Advertising”; as we were describing, from our unique cultural perspectives, where we thought the industry would head in our lifetimes.

Below is the script I had prepared for that presentation, which was later submitted to the “Journal of Advertising Education” early in 2012.

Read the rest of this entry »

EA Sports NRL 14

February 11, 2012

NRL14?As an avid Rugby League fan (Novacastrian, says it all) – I have long dreamed of a return to the code by EA which oversaw the implementation of the best game of that era – 1994s Australian Rugby League on the Sega MegaDrive.

Since then, Rugby League fans have had little to celebrate. New Zealand based company SIDHE released Rugby League in 2003, to much excitement and fanfare – and was a solid attempt at the code.

Rugby League 2 by Tru Blu saw many appreciated improvements, including a multi-year franchise mode and slight graphical improvements. But still felt years behind the titles developed by EA. That it is probably the best Rugby League to date says a lot about the state of gaming for NRL fans.

Then in 2010 we were ‘graced’ with Rugby League Live, the worst sports game you will ever play. Indeed, paying full price $110 AUD for this seemed like a rip-off, and I quickly got my money back. Rugby League 3 was a disgrace to “next-gen” gaming, and the final straw for many NRL fans who waited many years for its release.

So the time has come for me to stand up and politely request that EA return to the NRL and do the code some justice. Nay, I beg of you EA – to invest in rugby league.

… But, there is a Business graduate in me (deep down) – and we do need to look at the numbers.

Rugby League gaming, by the numbers

While official sales figures of Rugby League are unavailable, estimation has placed sales of Rugby League 2 at roughly 350,000 units in Australasia and the UK. As Rugby League 2 is the highest rated Rugby League game (7.9 according the GameSpot AU) I think it is fair to assume that an EA version would garner at least this much support.

So, 350,000 copies as our base distribution. Generous – for an EA version of any game. I would imagine that with increased hype and expectation (and EAs mass appeal) – this figure may even reach over 500,000 – but that would only be speculation.

Now, judging by their latest release (and only figures I could find) – Star Wars: The Old Republic, EA are taking a 35% cut of the revenue. LucasArts are taking a further 35% in rights.

Now, I assume the NRL/ESL will not be as greedy as LucasArts, in demanding 35% of revenue for rights, but to be generous (and over-estimation is better than an under), let’s assume that the NRL/ESL will want 20% of revenue for rights. (In my opinion EA would be doing them a favour even considering the sport for a game franchise – but everyone wants to make money).

So with that extra revenue, EA will take 50% of a Rugby League game for themselves.

Basing the current standard price of games (in USD to better estimate EA’s commitment), $60 USD, we have the following:

($60 x 350,000) / 2
= USD $10.5 million in total revenue for EA.

Consider then, that EA will want to make a profit of at least 20%, and you have a reasonable production budget of rounded down USD $8 million. Include funding by the Australian Government, NRL and ESL themselves – and lets round it out at a final production budget of:

USD $10,000,000.00

SO, while I would love to conclude that EA could easily spare an odd $10 million for a Rugby League game, consider this – according to one article, the average required budget for a next-gen title of any genre (let alone sports with massive franchise and naming rights issues) is $25 million. Some estimates have even placed the budget of the latest FIFA 12 near $100 million.

Conclusion

I can dream, and beg, but it’s just not going to happen folks.

I have no doubt the future of advertising is online – traditional media is quickly being replaced by online equivalents. Televisions are now coming with internet connectivity and USB ports that allow consumers to download content and view consume media in a new way. Newspapers, books and magazines are increasingly being consumed on electronic reading devices such as phones, tablet PCs and e-readers and radio is no longer relevant in an age where music is consumed and acquired whenever, wherever by consumers.

The digital age has transformed society. It has evolved from media fed masses to content seeking individuals.

Read the rest of this entry »

In response to the question of advertising games, “advergames”, and the role of women in gaming.

The word Advergame insults me. I don’t know why; perhaps because I am a gamer, perhaps because it is just a really stupid name without a purpose, perhaps because I like language. Either way, there is no such thing as an advergame. There are games, with advertising in them – and there are games, made for the purpose of advertising.

It’s hard for me to accept that games have been predominantly a male industry for so long. While I acknowledge that the role and participation of women in games in increasing, the traditional “male” owned gaming industry – has only been in high-end, high-performance video games. Board games, card games and electronic simulation games (Tamagochi et al.) have always been most popular among girls, women and families. That social media has come along, and is being embraced by these same women, is clear that there already was an existing market.

Read the rest of this entry »

When the Commonwealth Bank of Australia launched the “Determined to be Different” campaign in 2008, it showed audiences that the banking industry was open to the same creative and abstract advertising practices that dominated Australian media.

Interestingly, the “Determined to be Different” campaign was named by the Financial Review’s Neil Shoebridge as “the worst ad of 2008″ (Campaign Brief, 2008), and early comments in the blogosphere may indicate the NAB campaign faces similar judgement.

So why? Why don’t these campaigns work? Well, here is a personal opinion:
Consumers don’t want their bank to be different for ‘different’ sake.

Read the rest of this entry »

Follow

Get every new post delivered to your Inbox.

Join 238 other followers