We are delighted to announce our involvement in the production of the new Honda Civic app. 

Designed and project managed by Honda’s creative and design agency Nexus/H, we provided technical and programming support for the innovative app. A complex build, both for iPhone and Android,  the app has several interactive elements which make use of the smartphone’s native features including; a “wind tunnel” experiment where the user is prompted to blow through the mic; 360 degree view on the car’s interior via the accelerometer and a bespoke QR scanner. Additionally a game demonstrates the Honda’s “Magic seats” system and an “Explore Models” section allows users to create their own Civic, choosing model, engine, grade and colour and then share with friends via Facebook, Twitter or email. 

In total 38 apps were produced (iPhone and Android) as localised versions were required for each market across Europe.

The app is available in both the Apple store and Android Market. Check it out!

Responsive web design is on the rise. Smart phones, tablets, netbooks, laptops and all other manner of devices are out there forcing designers and developers to create websites that work effectively on a multitude of displays.

Introduced by Ethan Marcotte back in 2010, Responsive web design is a more unified, holistic approach to design whereby one design will respond to the shape of any display rendering it. For example, have you ever found it frustrating trying to use a website on an iPhone when it’s clear it was only designed with desktop browsers in mind.  Zooming in and out on various sections of a page is clumsy and requires more effort than it should to find the content you are after- as soon as information becomes harder to read or find, you lose interest and move on.

How does it work?

Some websites have different versions of their site available, depending on whether you are on a mobile device or a traditional desktop browser.  This can work well and be done nicely, but typically it means you have two or more versions of code to look after.  You also need to offer visitors the option to view the regular desktop version of the site if the mobile version is a stripped down implementation in terms of content, which is often the case.

Responsive web design is achieved through using the same code and content, but applying different styles through CSS media queries.  This means that you only have one version of the code to maintain and visitors gets to see all of your content, regardless of what device they are using.

CSS media queries detect what browser width is available and serve different styles accordingly.  For example, if the maximum width available is 480px, you may have a non-floated, single column layout compared to greater browser widths with floated, multi column layouts.

Useful tools for developers

Despite being a relatively new concept, there are already a lot of frameworks and tools out there to help with building responsive websites.  Here are a few to get started with.

Frameworks

• Skeleton - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
• Less Framework 4 - Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Tools

• Adaptive Images - Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.
• Fluid Grids – A web based tool which generates the CSS for your grid layouts, based on the number of columns, column widths and gutter widths

References and other useful links

Here, are a few links we found interesting, both in favour and against!

• Ethan Marcotte on responsive web design
• A List Apart - Responsive Web Design
• Ethan Marcotte’s 20 favourite responsive sites
• 11 reasons why Responsive Design isn’t that cool!
• 50 examples of Responsive web design

Last weekend saw the Microloan Foundation bring it’s digital outdoor campaign to Westfield and we were proud to be part of the team that helped deliver it.

Creative agency DLKWLowe asked us to partner with them to produce their award-winning concept - one that truly unlocks the full potential of digital out of home.

As members of the public pass the digital screens they are encouraged to donate by text. Once a donation is made the screen returns a personalised thank you message and the screen visual updates with a batch of coins falling into place to make up the portrait of an African woman their donation will go to help.

At the same time, the donation data transfers to the website and it displays the last donation made. Additionally the site allows people to search for their donation and see the portrait they helped to complete. They can then share via Facebook, Twitter and email.

You can find out more about the great work the Microloan Foundation do at penniesforlife.org.uk and you can still make a donation by texting CHANGE and your NAME to 70300.

Love Marmite? Stuck for ideas for dinner tonight? Then you should try out our new Facebook app for Marmite.

As production partner to Splendid Communications we’ve just launched the official Marmite recipe finder app - it allows Marmite lovers to submit and share their own recipes. The build also included a CMS that allows Splendid to add and edit new recipes in addition to moderating the user-generated content before it goes live.

We’re super pleased to announce that Jamie Whittle joins the team as our new Technical Lead. As a digital veteran with over 11 years experience in the industry and all round good egg he is a very welcome addition to the team.

Specialising in XHTML, CSS, Javascript, PHP and MySQL he eats, sleeps and, well, lives to code! But when he’s not doing that there’s a chance you’ll find him hanging out at gigs and playing (by his own admission) possibly a wee bit too much PS3! 

Welcome Jamie!

You may or may not have heard about Open Graph from Facebook.  I guess that depends on whether you are an enthusiast of web technology and how it works, or a regular user.  If you haven’t heard of it, you’ve almost certainly seen it in action when using Facebook.

In the relatively new ticker which all users have, in the top right of the browser, you see a constant stream of updates refreshing every few minutes (or seconds, depending on your number of friends and their activities).  This ticker features pretty much everything that is going on with your friends – being tagged in photos, wishing someone a happy birthday, commenting on a status and so on.  What you’ve probably also seen is a fair bit of information about what people are reading, for example on The Guardian, or listening to on Spotify.

These are 2 of the most common ones I’ve seen and I’m sure a lot of UK based users have too.  They are new apps using the Facebook Open Graph platform to connect with users.  The principle behind these apps is that articles or songs can now become objects which Facebook users can perform actions on (read or listen) and significantly, this information can be shared without the user having to manually do so, once they have accepted the initial app permissions request.

The benefit for the owners of these apps is fairly obvious.  Your objects (articles, songs, etc.) are now pushed from 1 user to the ticker of all of their friends.  A friend sees something interesting that their friend has read or listened to, clicks on the item and then approves the app so that they can access it.  They are now sharing this app and their activity to all of their friends and so on.

The results for Spotify and The Guardian are pretty impressive.  Spotify has added over 4 million users since the launch of their app in September 2011.  The Guardian app has nearly 3 million active monthly users, compared to the circulation of its paper of around 230,000 a day, which has been steadily decreasing over the last year.  Whether the app activity translates into sales remains to be seen, but it must be helping with the advertising on their digital offerings and the promotion of the brand to people outside the UK.

The power of Facebook’s Open Graph is pretty clear to see, but it should be used wisely to avoid a public backlash.  There are already numerous complaints about both the apps I have mentioned.  For example, tickers can become completely swamped with Spotify updates meaning that activity a user is interested in is cleared too quickly for them to see it.  People reading articles don’t necessarily want everyone to know every single thing they read.  In some cases, it could cause embarrassment.

The owners of these apps are aware of these concerns, and since they launched, they have offered users a way to stop the automatic publishing of their actions.  Spotify has a silent listening mode, and when you click on a Guardian article, you can click cancel on the app request and it will take you to the article without using the app.

So, the challenge for brands and individuals who want to create apps that use the features of the Open Graph is to find a middle ground - something which is interesting enough to get users to engage and share, but which is not too intrusive or overwhelming.

Useful links

Open Graph key concepts
https://developers.facebook.com/docs/beta/opengraph/

Open Graph tutorial
https://developers.facebook.com/docs/beta/opengraph/tutorial/

Early Results: The Open Graph and Music
http://developers.facebook.com/blog/post/594/

We’ve been working with the lovely people at Fast Track recently to develop a Facebook app which promotes the interaction between fans and nPower Championship footballers.

The app helps fans plan away days, win exclusive prizes in monthly competitions, play the Texaco Fantasy Football League and watch their questions being asked to the managers and players by football pundit Steve Fenner. You can have a kick about here!

We’re getting exciting about Halloween and all things spooky a little bit early this year. We’ve been working with the DLKW Lowe to build a new Facebook app celebrating Thorpe Park’s 10th anniversary of their now legendary Fright Night. 

For maximum terror you’ll need a webcam and microphone turned on.

Enter the competition and you might just be in with a chance to win some tickets and the chance to experience their all new and utterly terrifying ride. We can’t wait!! 

Since our merger with Lemon Digital back in April we’ve grown beyond belief. We’ve settled into our new home just above Smithfield Market, Clerkenwell and now find ourselves looking for a talented digital Producer to join the team.

If you are passionate about digital, obsessed with producing work to excellent standards and have a determined attitude that means you always deliver to deadlines (or know someone who fits the bill) then please give us a bell!

 We’re looking for the full range of expertise to cover delivery of a number of different types of projects, everything from digital banner campaigns, microsites and through to social networking and mobile apps - ideally with at least 2 years experience working in a digital agency environment.

We know you’re out there so don’t be shy - get in touch! 

At least once a week we get asked about iPhone app development in some form. Often we’ll take the brief and get the work done but things are starting to change with fragmentation happening all over. As ever, it all starts with questions.

• Is it just for the iPhone? What about the iPad?
• What’s the split of devices like for your audience?
• Don’t business users all love Blackberrys?
• Aren’t there more Android devices around now?
• Do we have to have individual apps for each one?
• What about submission into the app store?

They’re all great questions and do need answering but before you can start, you need to figure out why you want an app in the first place and what you want it to do. 

If you’re looking to sell your app and make money, good luck.  There are over 425,000 (Apple, August 2011) apps in the Apple store and 200,000 on Android market (Google  may 2011) so competition is fierce. For every Angry Birds there are literally tens of thousands of apps that are struggling to sell at all let alone break even.

On the other hand if you’re looking to help your customers, make their life easier and give them a great way to interact with your brand on the move, apps can make a real difference. What you build and how you built it really depend on your business. If you want to engage your customers with a rich experience and use specific device hardware (cameras, accelerometers etc.) you’ll really need to look at a native application to get the best out of the device.

Where a business is looking to get information and data to a user the line’s starting to become more blurred.  Native apps will always have the edge when it comes to performance and features but data is data, it doesn’t really matter if they’re status updates or train timetables. The important thing is making sure that they’re easy get to and display well. There’s a great infographic that sums it up really well.

Google have recently decided to start covering all their bases with individual native apps for Android and iPhone and a fully functioning web app for Google+. The end result is the same for the user whichever they’re using but with the web app there’s no need to download and install the app on the device. For users who don’t install apps often putting a new one on a device can often be a painful experience (Apple changing T&Cs for instance) and is something else getting between you and the customer.

Just because what you create is a mobile website or web application doesn’t mean that it can’t be engaging either. We’ve built a number of cross-device, cross-platform interactive games using HTML and JavaScript. We didn’t ask users to play the game on their mobile but 13% of them did anyway.

Further Reading

For more help working out whether an app is really the right answer for your business need this is a truly great resource - some great and insightful stats and analysis.