Around Christmas 2010, we released a free iPhone game called Tiny Terrors into the App Store. This was written as a native Objective-C, iOS app.

Since then we have rewritten the app using open web technologies i.e. HTML5, CSS3 and JavaScript and with the aid of Adobe’s PhoneGap, we have wrapped it up for distribution via the App Store.

In this post I’ll explain why we did this, how we built it and what our next steps are likely to be.

Where do I get it?

Tiny Terrors is available for iOS devices via the App Store.

You can also play a cut down version of Tiny Terrors directly in your web browser if you are a Chrome or Firefox user at www.tinyterrorsapp.com/play. At the moment, the desktop version doesn’t allow adding yourself to the game and creating your own “tiny terrors”.

Why do this?

The purpose was simply to prove that we could develop effective, cross platform mobile apps that could be distributed by the various app stores using open web technologies.

Throughout 2011, we investigated technologies that could help reduce the overall cost and time associated with developing cross platform mobile applications. Building bespoke native apps for each of the major platforms can be time consuming and expensive. We needed an alternative solution that would allow our clients to reach the maximum number of platforms and devices as quickly and as cost effective as possible.

There were a number of important considerations that we held in mind during this research:

• It was crucial that the final results matched or exceeded what was expected from a typical native app user experience.
• It would be great if we could harness our existing mobile web skills to help build mobile apps. 2010 and 2011 was a busy period for Code and mobile websites. The skills we refined on these sites covering technical, creative and user experience would serve as invaluable tools for mobile app development.
• We understood that cross platform technologies would not replace the need for native app development or remove the need to have native app expertise within the agency. As an agency, we understand the need to pick the best technology for the job. We know there will be times when true native apps will be more suitable.

How did we do it?

We investigated a number of cross platform technologies in addition to the HTML/CSS/JavaScript stack including Adobe’s Flash, Appcelerator’s Titanium Platform and Ansca Mobile’s Corona.

These are fantastic products and each in their own way take the pain out of developing cross platform apps. However, one major concern was that we would become tied in to yet another proprietary platform. We wanted something open, something we had control off, something forward thinking and something universal that would provide us with greater long term flexibility.

During early 2011, we released the open source library PhotoSwipe. This library made it simple for developers and designers to integrate touch based image galleries into mobile websites. Written in HTML, CSS and JavaScript, PhotoSwipe was purposely designed to mimic as close as possible the experience and functionality of the photo app that is bundled with iOS.

What we discovered when building PhotoSwipe was that with well thought out and tightly written JavaScript and clever use of CSS3, we could mimic very closely the appearance of a native app. Subtle tricks to trigger hardware acceleration in animation helped massively and we achieved impressive speeds even on older iOS devices like the iPhone 3G.

Enter PhoneGap

On the back of PhotoSwipe and other mobile web based prototypes that we developed (which included a touch based 3D product viewer!), we set out to look at the best way of wrapping HTML based apps in such a way that we could get them submitted and approved into the various mobile app stores. It’s true that you can write mobile web apps without the need of an app store presence, the Financial Times mobile web app being a fantastic example of this. The truth of the matter is however that you simply can’t ignore these app stores as an important distribution channel for your apps.

In addition, we also needed a way of allowing our HTML apps to use device hardware and features, for example camera and media access, push notifications etc. Certainly you can access a lot of features from mobile websites and on iOS devices you can query geo-location data, touch events and even the accelerometer. However, what you can access at the current time of writing is relatively limited compared to a native app.

To help with this we selected the open source project PhoneGap. PhoneGap makes it incredibly simple to package up our HTML based mobile apps into a native wrapper that then allows us to distribute our apps successfully into the various app stores. PhoneGap also comes with a number of features that makes it simple for our apps to access various hardware features of a mobile device in a uniform way. For instance, using the camera is made accessible via a JavaScript interface that is identical for iOS and Android devices. Additionally, the open nature of the project meant it fitted in perfectly with our research objectives.

However, the major plus point for PhoneGap is the ease at which it can be extended if a feature does not exist out of the box. Using both native language and JavaScript skills, it’s very simple to build your own plugins to access any feature of the device that your HTML based apps require. We successfully developed a number of plugins including overlaying a web app with native user interface components that blurred the line as to what was and wasn’t web platform based. We’ve developed other plugins to undertake work behind the scenes on behalf of a HTML based app – such as requesting content from another website or RSS feed. We also successfully developed a push notification plugin that allow our HTML based apps to respond intelligently to push notifications sent to a device.

What we discovered by joining HTML/CSS and JavaScript with PhoneGap was that we could write 80-90% (if not more) of an app using open web technologies and then using PhoneGap, fill in the the remaining functionality by using it’s built in features and developing our own plugins.

Other frameworks and libraries we used

In addition to PhoneGap, the Tiny Terrors app was built on a number of existing frameworks and libraries, including our own bespoke JavaScript app platform.

JavaScript libraries used

Tiny Terrors is based on a JavaScript framework built by ourselves. The framework was initially designed as a rapid prototyping tool for mobile apps and grew out of the work undertaken with PhotoSwipe etc. It wasn’t long however before it quickly grew into a production ready framework. This library is heavily events driven, extendable and out of the box makes it simple to handle transitions, page states and effectively “knits” an app’s components together.

Our framework is also built on a solid stack of proven 3rd party open source libraries including Underscore.js, Backbone.js, Lawnchair and Zepto.js. As well as Zepto.js, the framework works equally as well with jQuery for supporting non WebKit / Mozilla based browsers.

We did investigate using existing mobile web frameworks such as jQuery Mobile and Sencha Touch and while we highly rate these, we found both a bit too large for what we needed and in the case of jQuery Mobile, the fact that it is tightly coupled to jQuery provided us with less flexibility than we would have liked.

iOS libraries used

In addition to PhoneGap, Tiny Terrors also uses the Facebook iOS SDK, the excellent ObjectAL library for audio and MBProgressHUD for displaying a native “loader / progress” indicator.

Conclusion

Currently Tiny Terrors works on the desktop (Chrome and Firefox currently) and iOS devices. Our next steps will be to integrate this into Android and Windows Phone 7 Mango devices.

If anything, rewriting Tiny Terrors has demonstrated that it is possible to write an app using open web technologies to maximise device and platform reach. It also shows that you can obtain a near native like experience. But as with any approach, you need to think carefully about whether the technology is right for your solution and be open and flexible to both native and “non-native” approaches. At the end of the day, if the end user receives an app experience that is on par with or exceeds what they expect from a device, then that’s the decisive factor.

Ste Brennan

Here’s a few things that have tickled our fancy, piqued our curiosity, or just plain old made us laugh over the last couple of weeks.

• Every man and his dog throw their hats into the interactive TV ring at CES2012…
  http://is.gd/Ncmfc1
• …and speculation on what those TVs will look like and how you’ll interact with them:
  http://is.gd/uzW6OX
• Recreate your own personal favourite OS reboot from yesteryear:
  http://is.gd/i1owJl
• The last big thing that wasn’t: QR codes, and why the public doesn’t ♥ them:
  http://is.gd/fKaLha
• We’ve had concerns over the lack of signposting regarding what a QR code will do when you scan it. Looks like our concerns were justified:
  Spammers hit mobes with QR code junkmail jump pads
  http://is.gd/tC3T8O
• Interesting piece about the trend of Chrome-only web sites & apps, comparing it with the bad old world of sites “optimised” for Internet Explorer 6:
  Is Google Chrome the New IE6?
  http://is.gd/GL4AyS
• This was cool, raising the profile of the role of good design:
  Apple’s Jonathan Ive gets knighthood in honours list
  http://is.gd/WQYA7z
• We like to read our ebooks using the Kindle app for iPad. And Amazon have just made it much more pleasant to buy them directly from your tablet:
  Amazon launches iPad-optimized Kindle store
  http://is.gd/LZo5P1
• The world’s most expensive motorway pile-up in Japan, just before Christmas
  http://is.gd/ExuUW7
• Something we all suspected but dare not admit:
  Coffee blamed for infant Italianisation
  http://is.gd/Or99hD
• An Australian band have recreated scenes and characters from popular iPhone games for one of their music videos:
  http://www.youtube.com/watch?v=YrsoluSjuKc
• And finally, our Christmas stress was eased greatly by the “Add to Amazon Wish List” browser extension. The perfect solution for people who’s family never knows what to get them:
  http://is.gd/bHfhqk

- Barry

Tony’s full article is here.

We feel very privileged to work in what is the most dynamic industry on the planet, working with wonderful people within great brands.  And 2012 is already looking very positive with some exciting projects lining up in Q1 and Q2; working with a mixture of old and new clients.

From all at Code – here’s to a happy and prosperous New Year!

Investment in digital marketing has paid off for our lovely client The Car People, which has scooped both Best Used Car Locator & Website of the Year in the Car Supermarket category of the 2011 Autotrader Click Awards.

We have been working together on refining the proposition for around 2 years now and we are seeing the rewards.  We like to think it’s a leading site for the sector; built around innovative, customer focused experiences.

Key features of the site include:

• industry-leading search capabilities that make it easy to find a car to match specific requirements and criteria. In particular, the prominently positioned search bar on the homepage provides a user-friendly slider functionality and search buttons to make it easy to find a car straight away, or there is a more in depth advanced search tool by which customers can refine and alter results, search against a monthly budget or simply browse through the full collection;
• by creating a free account on the site, users can add up to four cars to the ‘Your Favourites’ list and compare them side by side;
• independent and impartial car reviews from What Car? Magazine, plus visitors to the site can also post their own reviews;
• an instant finance calculator to help visitors to the site work out their overall spend based on PCP and HP finance requirements;
• an instant online valuation tool based on a car’s registration;
• and a live help session for additional support.

We’ve also launched a user-friendly online valuation service earlier this year that provides customers with an accurate quote for The Car People to buy their car.

The online appraisal service boasts industry leading usability and level of detail to provide – what The Car People believe to be – the most accurate online quote available. It gives an online appraisal system that takes only minutes to complete, an instant ball-park value and an accurate quote within 24 hours.

2012 brings a mobile site to the table – and raises the question ‘what interesting things can we do with location based services…?’. We are looking forward to the challenge!

Over the years we have been to some great places – and this year is no exception.

We are off to Amsterdam today!

We are staying in a hostel which rather reassuringly talks about itself in this way from their homepage:

The Hans Brinker Budget Hotel has been proudly disappointing travellers for forty years. Boasting levels of comfort comparable to a minimum-security prison, the Hans Brinker also offers some plumbing and an intermittently open canteen serving a wide range of dishes based on runny eggs.

Hmmm… clearly no expense spent.

The commemorative t-shirt has arrived; plus the Computerlove Awards voting slip has been circulated.

Who will get Computerlover of the Year this year?

We’ll let you know!

And thanks to the support team we are leaving back in Manchester (you know who you are).  If it wasn’t for you guys the rest of us couldn’t go.

We’ll bring clogs. x

Five of our most handsome and follicularly blessed specimens are donating their upper lip in the name of charity this month to raise some money.

If you feel the need to donate please do so here.

Ladies and Gentlemen – I give you Dan, Luke, Jono, Adam and Col.

Moustache Gods.

This is a great honour and something the team here are very proud of indeed!

We’ve also recently received a commendation in the Best Travel/Leisure/Sports Website or Campaign at the annual DADI awards for our work with First TransPennine Express.

As the 2011 award season draws to a close this takes our tally this year to six; a year which has been for us a focus on emerging technologies, mobile, iTV commissions and other digital innovations – from social media to use of visual design.

We would like to thank our clients for all their continued support, interesting briefs to keep us out of trouble and allowing us the opportunity to do great work together.

This one’s for you!

Thanks everyone!

Northern User Experience (NUX) is an informal community for people interested in usability. Based in Manchester and Leeds, NUX holds free monthly meet-ups in both cities, with guest speakers from the User Experience community.

Code Computerlove host the Manchester meet-ups, donating the use of our office space and facilities (and our refreshments budget) for the events, which typically draw anywhere between 10 and 40 people, depending on such vagaries as the guest speaker and their subject, the Mancunian weather, release dates for Call of Duty: MW3, and high profile football games.

Building a UX Team

On Tuesday we were extremely lucky to have Jane Murison from the BBC (@mewroh) who spoke about what it is like setting up, managing and developing a UX team.

A Good Start To Proceedings

I knew things were going well when I saw Jane’s job title: Head of UX&D for Knowledge & Learning and Children’s at BBC Future Media and Technology, which as far as I can tell covers everything apart from Eastenders and Match of the Day.

When I grow up I want a job title like that.

Another sign of things going well happened when I was setting up the drinks and nibbles table. One of the multipack Monster Munch bags contained an extra pack. In my mind this officially marks it down as A Good Day.

Eyes down for a full house

NUX use Eventbrite for reserving places, and attendance tonight was always looking good, but I was pleased to see a lot of new faces this month, including a few guests who came over from the Leeds branch of NUX.

Clearly the BBC’s move oop north is of great interest to the digital community in Manchester, and this talk was a chance to put a face to the organisation and find out a little more about them.

Insights into working at the Beeb

Jane’s talk was both candid and revealing, giving us a great insight into:

• what the BBC are like as an employer
• how their UX function has grown over the years
• what she might be like as a manager
• what you should look for in building and developing a team.

She covered topics such as:

• what to look for when hiring, and how hiring like-for-like is not always the best option
• managing personalities and team dynamics and potential conflicts
• empowering teams members to define their own roles and personal development
• difficulties she has faced managing a team split across 3 locations (top tip: learn to knit on the train).

Pen and Paper? But we’re Digital!?!

There were also a couple of brief exercises where we were asked to think about what our job titles were, what skills we have and what skills we use.

There was an audible intake of breath when Jane asked us to write these down ON PAPER. I don’t know about anyone else, but apart from a few low-fi wireframe sketches, I don’t think I’ve put an actual pen to some actual paper in a meaningful way in years!

Jane then asked us if we were happy with our job titles; what we would prefer them to be; if we thought they described what we did effectively and what personal skills we each had that we thought were under-used in our current jobs.

This section of the talk was particularly revealing, and certainly made me think about skills I had that were not being used to their full potential, and what I could do to remedy that.

So, tell us about Auntie…

It was also interesting to hear what the BBC is like as an employer; how easy it is for them to recruit (let’s face it, everyone would love Auntie Beeb on their CVs, right?); the scope employees have for career progression, personal development and the types of projects the team get to work on.

Cult Of Personality?

Jane’s talk was presented in a very informal style and her personality and engaging manner really brought the presentation to life.

After the talk, we had a questions and answers session with Jane, and as ever this part of the evening was also very interesting.

Again, Jane was open and honest, answering all kinds of questions about topics as potentially sensitive as how to handle team members who are underachieving or counter-productive, how one sometimes has to punch a loved one in the face in order to get them to leave a burning building.

Overall the event was a great success, and certainly introduced the Manchester UX community to a face within the BBC. On behalf of Code and the NUX I’d like to thank Jane for giving up her evening, and wish her the best of success over at Media City in Salford Quays.

–
Barry

Bootstrap:
The next NUX Manchester event is “All about the Metro UI” with @Ben_Lowe on Monday the 5th December 2011. More details can be found on http://northern-user-experience.org/

Since the 20th of October the phrases ‘not provided’ has started appearing in the non-paid keyword reports and the results were simple:

Of the almost 4 million organic search visitors to the sites between the 20th of October till the 31st of October approximately 2000 visits were from (not provided) key phrases, however as of the 1st of November this amount doubled. Unfortunately this means we will need to track this for a bit longer to see the full impact but at this stage even of with the November figures this is still only equates to 0.1%.

Does this mean the panic is over? Well like other bloggers, such as Gareth Owen, have also mentioned Google is not giving up on its push to conquer Social and the more successful they become the more people will be logged in and this number will increase. In reality but this is very unlikely to reach over 10% in the next 24 months. So until Google bring out their next unsuccessful PR stunt similar to Buzz, +1, Wave, star, preview, real time tweets…. etc. it is business as usual.

- Tim Hill

So what are you waiting for? Ah, not convinced you really need a mobile site?

We have developed a new mobile web package for brands and companies who want the immediate benefits of having a mobile optimised site and gain some fast learnings about the importance and impact of mobile on their brand in order to develop a comprehensive mobile strategy.

In addition to being a cost-effective first step into mobile, it’s also ideal for SMEs that want to reap the benefits of a mobile optimised site.

Our new solution uses bespoke software that’s been developed by our innovations team, which is becoming renowned for our clever use of web technologies, including Photoswipe – an open source mobile image gallery.

This is supported by our 12 years of experience working with some of the UK’s leading consumer brands and service providers – from HMV through to Brother UK.

Our new Starter Pack mobile solution can deliver:

• A mobile version of your website that replicates your desktop site in terms of content, brand look and feel, but that is tailored to the exacting needs of mobile users
• It can be delivered in weeks not months, with no impact on your current site’s infrastructure, CMS or on your current IT systems. (It is also ideal for brands who have complex IT restrictions that prohibit the easy development of a mobile site.)
• The mobile site will be constantly in tune with any changes to your main desktop site – it’s all automated so update your site as normal and the mobile site will reflect these straight away
• Google tracking means performance data can be obtained easily and effectively, informing you exactly how the site is being used
• Our Photoswipe system can be included in the mobile website solutions to enhance online galleries and product displays. Photoswipe allows all mobile users to swipe between images
• Add enquiry forms and other data collection mechanics tailored for the site
• Integrate the mobile site with social media profiles
• Hosted forms on our server sends all of your form data to you at a time that suits your processes

Our boss Tony Foggett thinks it’s cool; “This is a great approach for companies to take their first steps into mobile and work out a comprehensive digital strategy.  Being able to clearly see mobile customer behaviour and understand the value of mobile optimised pages means companies can invest in future mobile technologies with the confidence that their outlay will make a difference to the bottom line.”

For a cost-effective mobile solution with the added peace of mind that you’re dealing with one of the UK’s Top 20, multi award winning digital marketing agencies (NMA and Marketing magazine digital league tables) contact Steve Peters on 0161 276 2080 or email steve.peters@codecomputerlove.com

We’d be happy to show you examples of websites already using this technology – just drop us a line.