I am trying to understand what makes the mobile world tick and how 2012 will pan out, from reading blogs, twitter and various resources out there. I felt that I would share my views on how I use apps and accessing website from my mobile.

I take on board the buzz around “apps” and creating an “app” and brands putting money and time into the development of these beautiful creations, but what should feel like ground breaking move into mobile and online for some brands does not have the desired marketing effect on me at the moment.

I take the view that when I am not on my mobile and I Pad they are mostly in the hands of my 7 and 4 year old boys and are the only times during a day that they are not constantly demanding things from me. To keep the peace I will download and use an app to entertain them and as long as it does not cost me any more than 69 pence then it’s a small but functional price to pay.

I have monitored over the past couple of weeks my habits when shopping, checking Facebook, finding insurance quotes, using Google etc.. And it is all done via url’s and 100% visiting and revisiting websites through my mobile or IPad. Websites (mobile optimised ones are preferable) are the key to me getting to what I want and quickly it’s that URL although some would say old fashioned but to me the content is perceived as being up to date, giving me the chance to experience and interact with the site.

If friends are recommending voucher codes , makeup, shoes, latest gossip on Facebook they don’t ever send an app link on email or text they send over the URL to take me to the place where I can most importantly buy or get the items/ info from. If I have to spend time downloading an app, reading and then worrying about it working on my mobile, by the time I have considered all these parts it’s too late and my life has moved on.

The route to market and how you want to connect with consumers is varied, I expect that when we purchase my sons first mobiles they might disagree with me on a couple of the above points but at least I won’t have to Google what it all means as I do for most topics for their homework as by then I should know.

for more information : www.bemoko.com

bemoko is the leading Multi Channel  Optimisation specialist, delivering Your Brand-Anywhere™

bemoko’s Multi Channel Optimisation Solution takes any website or content, optimises, customises and delivers fast and perfect user experiences on any device – every time.

One day many of the apps you see now in the app-stores will be available as cross platform web apps supported by all devices with user experience and performance comparable to that of the native application. bemoko are making this happen.

So what is new in HTML5?

… and how is that going to elevate the web experience for the end-user?

HTML5 brings a wealth of enhancements that can elevate the standard and experience of web applications. Functions include:

1. Video and audio support
2. Canvas for enhanced graphics
3. Geolocation API
4. Local data storage
5. Context menus
6. Drag & drop
7. Data grids – structured editable data sets
8. New semantic elements, e.g. <section> and <article>

Offline and Synching Data

A key benefit of native applications (desktop or mobile) is the ability to interact with the application whilst you are offline. The HTML5 offline support allows web applications to achieve this. Google have demonstrated their support for the HTML5 offline support by announcing that they are no longer supporting Google Gears – an early solution for for offline web access – and are backing the HTML5 offline APIs and along with strong support from the major browsers is an indication that this API will mature and become an essential foundation for the web.

Offline storage will be an essential ingredient of any web application that requests information from a user and delivers essential information that a user would want to access anywhere, anytime. For example when a user fills in a forms, or edits some data it is an important aspect of the user experience that the information entered is not lost and causing frustration. With HTML5 changes can be stored locally in the browser and synced with the main server when a connection is re-estabilished. Information applications – such as travel guides – also provide much more value if you can access information quickly and reliably, even if you are in the tube, on a plane, or in a foreign country on an expensive data plan.

Native Media Support

HTML5 brings native media support to the browsers. There has been much fragmentation in the format of video and audio that is required for web delivery. Historically this also came with a lack of control for how the media will be displayed (e.g. embedding in a page) and the requirement for extra plugins. This makes it more costly for service providers to deliver media and makes media experiences less than seamless for the end user. By standardising the media support within a web environment this fragmentation can be brought under control, making video deliverable easily accessible to all and make experience more pleasurable for the user.

There is still the ongoing battle between the Ogg and H.264 video codecs – with H.264 bringing improved video delivery, but in a propriety format. With strong and passionate arguments on either side. H.264 is looking like it will be the victor, but only time will really tell. (blog update : see update below on video support why this is not so certain). Standardisation brings with it significant performance benefits with device manufactures bringing standard video codec processing into hardware instead of software which can lead to over twice as much battery life.

Geolocation API

The Geolocation API already brings with it the possibility for the user to share their location. By design, this is a user choice on a site-by-site basis – choosing to share their location when they feel they’ll benefit and when they trust the service provider. This opens web sites up to the opportunity of location base services, such as finding people or places near by, combined with mapping services this can all help to create a more pleasurable experience with a service provider – saving time and shoe wear.

Canvas, drawing and graphics

The canvas features of HTML5 bring enhanced control over dynamic graphics, providing the opportunity to add a new dimension and interactivity to web sites. This provides a foundation for the popular javascript languages, for example jQuery and Prototype, to deliver ease-of-use tools bringing this creative power to even the novice web designer. It will however take some time (if at all) before the HTML5 canvas functions reaches the capabilities of Flash. Even with Apple’s objections to Flash, Flash will still provide much value to the web experience for some time to come.

HTML5 Apps vs Native Apps

Will HTML5 apps become more like desktops apps? In some respects they will surpass them – the idea of storage of your data in a secure cloud that that is accessible everywhere, backed up for you, accessible across multiple platforms and with an application that is always kept up to date for you will in many cases make the idea of a local installed piece of software seem quite limited. HTML5 will become the defacto standard for delivering cross-platfrom applications. The dedication to HTML5 by the large players, including Google, Apple and Microsoft , is a great example of the big players aligning and demonstrating the importance of getting HTML5 right.

HTML5 mobile apps

All-in-all, life will be become more exciting for the web developer. HTML5 is relevant for web developers today. Although HTML5 is still in draft, many features of HTML5 – such as geolocation and offline support – are already available in leading major browsers. This is especially true for recent mobiles such as the iPhone and Android platforms which all benefit from the improved user experience that HTML5 can bring.

How does this impact cross platform delivery though? Even as HTML5 matures different platforms will need variations on the UI. For example a TV user interface will always be different to a touch screen user interface. The challenge is also made more apparent when you consider that there’ll always be evolution in web capabilities. It’s natural for manufacturers and consumers to demand innovation and continue to push the boundaries.

bemokoLive cracks this problem elegantly and allows you to control the user experience across multiple channels efficiently – delivering to the recent innovations, the standard majority and lagging legacy environments – all from the same source.

Try bemoko now – download here and be up and running in a few minutes.

Further Reading

If you want to read more about why HTML5 is changing the game take a look at the following articles from the industry experts:

• “Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins” Apple (Steve Jobs) – Thoughts on Flash
• “The new crop of HTML5 web browsers are capable of some pretty amazing things, and several of our engineers decided to take some 20% time to see how far we could push them. The result? An HTML5 port of Id’s Quake II game engine!” Google Web Toolkit blog – Look ma, no plugin!
• “The future of the web is HTML5. Microsoft is deeply engaged in the HTML5 process with the W3C. HTML5 will be very important in advancing rich, interactive web applications and site design. The HTML5 specification describes video support without specifying a particular video format. We think H.264 is an excellent format. In its HTML5 support, IE9 will support playback of H.264 video only.” Microsoft blogs – HTML5 Video
• “But making iPhone apps means going through Apple’s lengthy approval process and dealing with some hardcore development. There’s a way round this, though, by offering something via a mobile browser using HTML5.” NMA

blog update – 2nd May 2010 : video, H.264, Ogg and VP8 support

The article Behind the open codec FUD attack make’s the case that Mozilla is unlikely to adopt H.264 since it cannot afford the $5million license fee. Google’s VP8 format may provide the compromise solution.

Do you regularly send email newsletters to your customers? You might do this once a week, once a month or you might even manage email campaigns for many people. Now these campaigns most of the time may follow the the same format – perhaps it’s announcing latest books available or sharing information on your latest promotions – but you may also find that often you want to add something special to each newsletter, breaking out of the mold of the same old template. You might also be finding that perhaps 20% of people who receive your emails are accessing from a mobile phone.

bemokoLive, as always, makes it easy to take your message to mobile phone and engage with this growing number of people accessing from their phone, but with the release of v1.2.5 we’ve made it even easier to take 100% control of your email campaigns. With bemokoLive you can create a single site which defines your look and feel, as well as common functions such as getting content from your CMS. This site allows you to rapidly put together each months newsletter. sub-sites in v1.2.5 take this to next level by allowing you to customise each newsletter – by making as few or as many changes you need. Perhaps you simply want to include a different seasonal logo or even deliver the message with a whole new look & feel.

Context Rules is a great new feature that helps users of your site as well as site developers. Site users can now readily access either the PC version of the site or an optimised mobile version as they desire so that they can get the experience they want. Site developers can also use context rules to quickly test what the site looks like on different devices.

There’s the usual handful of other useful updates with this release – see the release notes for more details. And if you’re new to bemoko, please get in touch and we’ll help take you web sites to mobile (and other digital channels).

Have a read of the article here and take a look at the site for yourselves at dtff.bemoko.com

So a little background. You may know that you can store data in your local browser database with javascript like …

1
2
3
4
5
6
7
8
9
10
11
12
13

function store() {
  if (window.localStorage) {
    var count=window.localStorage.getItem("count");
    if (!count) {
      count=0;
    }
    count++
    window.localStorage.setItem("count",count);
  }
}
window.onload = function() {
  store();
}

and you can even see it in action here, if you got a decent browser such as the latest iPhone 3, Firefox 3.5, Safari 4.

But this ain’t much good if you can’t get this data back to the server to do something useful with it, e.g. share with friends, share with your other devices, keep a backup, send a message … I could go on.

So what we really need is a way to easily listen out to storage events and deal with it in one place. Yep, we could create our own Javascript framework to do this and handle getters and setters, but that sounds nasty to me.

Instead we can know use the onstorage attribute on the HTML body tag to hook into a function that will handle all of these call backs based on local stored data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function store() {
  if (window.localStorage) {
    var count=window.localStorage.getItem("count");
    if (!count) {
      count=0;
    }
    count++
    window.localStorage.setItem("count",count);
  }
}
function handleOnStorage() {
  myFunctionToSendDataToServer(event.key,
    event.newValue, event.oldValue);
}
window.onload = function() {
  document.body.setAttribute("onstorage", "handleOnStorage();");
  store();
}

Take a look at it in action here in the bemoko mobile test suite. It works on iPhone 3 and Safari 4. You can even see the complete code here.

… would the first radio shows simply have been recordings off the TV?

Before the days of video recorders I used to sit and record the television with the new shiny mic onto cheap D90s I’d bought from the market. The novelty soon wore off and none of my friends seemed that interested in my recordings.

We’ve grown accustomed to see TV and radio as two very different media channels. In particular we don’t consider the radio as a lesser medium even though from a simple point of view it’s just a constrained TV. I love the radio – in fact I spend more time listening to the radio than I do watching the TV. Why? Not because I think there’s better content on the radio, and not because I think it’s physically better than the TV – more because it fits comfortably into my way of life and my context.

I work quite a bit – and I learnt pretty early on that I can’t work whilst watching the TV. Took me a while to realise that and I still experiment with it, but basically if I’m front of a TV I don’t get any work done. However the radio fits my mood – I can put on some back ground music, or even talk programs, to give me inspiration. It doesn’t tear my attention away and in some respects can enhance my work environment.

I do quite a bit of DIY, housework – my old paint splattered radio follows me around. I’m often amazed at how long a couple of AA batteries power the damn thing, even though I leave it on too much. It falls off tables, sit’s in damp rooms … it’s so simple and portable and it goes on broadcasting for me.

I can safely say I’ve never tried to watch a TV and drive. Don’t think I’ll ever give that a go, but I obviously do listen to the radio in the car. When good programs are on I don’t even mind sitting in traffic as it gives me a little time to think and relax … as long as it’s not too much traffic.

Radio production has learnt from the strengths of the audio only medium. You can in fact do things you can’t do on a TV, perhaps because of the limited budgets but perhaps because you can create an experience not possible when you’re distracted by the images. It reminds me of the classic line in Educating Rita when, in response to “Suggest how you would resolve the staging difficulties inherent in a production of Ibsen’s Peer Gynt” , … she simply replied … “Do it on the radio. ”

So where does this sit with mobile …

As we start to explore the opportunities with mobile, we’ll start to exploit the true value in an always on, context aware, portable communication channel. We’re starting to see it already. Rummble provide an excellent location based personalised recommendation service. facebook is being accessed regularly from mobile devices by over a quarter of it’s users to keep in touch with their community.

I see the next few years as pretty exciting, as we grab this mobile medium and let it power people’s lives. It’s why I’m spending a good bit of time at bemoko refining the way that we take everything we’ve learnt and created in the web world to power the mobile enabled web; taking the unique benefits of mobile to create experiences we only dreamed of before.

What has particular impressed us about Canoo is the way we can rapidly create clean and succinct tests that address all of the functional aspect of a mobile web site that we can need to automatically test. There is a rich set of functions in Canoo to click around a site, interact with a page and test functionality and content of a page. We write all our scripts in Groovy which provides a language that is light on scaffolding syntax (i.e. code just what you want to do), allows us to dig into misc Java libraries as we choose and provides a functional language that is human readable (well to us techies).

For example, take the following test script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

package com.bemoko.webtest.live
 
import com.bemoko.commons.test.webtest.BemokoWebtest
import com.bemoko.commons.test.webtest.WebtestXmlParser
import com.bemoko.live.devices.data.conf.HeroDevices
import com.canoo.webtest.engine.StepFailedException
 
 /** 
  * Test that welcome pages are rendered correctly to the hero devices
  */  
class PagesTest extends BemokoWebtest {  
  void test() {
    def parser=new WebtestXmlParser()    
 
    // (1) Iterate over HeroDevices    
    new HeroDevices().all.each { deviceData ->
      webtest("PageTests : ${profile} : ${deviceData.id}") {
        config(liveConfig) { 
          deviceData.evidence.each() { 
            header(name:it.key, value:it.value) 
          } 
        }
 
        // (2) Invoke the welcome page and verify some of the content
        invoke "/welcome/i", 
         description: "Index page : ${profile} : ${deviceData.id}"  
        verifyTitle "bemokoLive - i"
        verifyLinkedContent 
          xpath:"/html/head/link[@rel='stylesheet']/@href", 
          accept:"text/css"
        verifyLinkedContent 
          xpath:"//img/@src | //input[@type='image']/@src", 
          accept:"image/gif;image/png;image/jpeg"
 
        // (3) Validate document using an XML parser
        groovy { 
          parser.parseText(step.context.currentResponse
            .webResponse.contentAsString) 
        }
      }
    }
  }
}

The bemokoLive test suite provides a collections of devices that allow you to easily simulate requests from particular devices. The HeroDevices class, in the script above, provides a collection of around 10 devices that provide a representative coverage of different types of devices. We (1) iterate over this collection and pass in the evidence for the device, i.e. the HTTP headers, into the webtest configuration. We then (2) invoke a particular page, test its title and verify that the linked content is good. Finally (3) we validate the document against the DTD in the document – great for making sure nothing bad has slipped into the page.

Reports get generated with a full break down on the tests and any step failures along with a quick summary, for example the following screen shot shows the summary of test run of 431 tests which we ran against one of our customer sites. I’ve deliberately included a report with failures to make the summary a little more interesting:

There’s much more you can do with canoo and the Groovy scripting approach – take a read of automated testing on our bemoko wiki for some more pointers.

With this approach we can build up a robust set of scripts that verify our deliver and provide great foundations for our real device testing – no more burning time on real device testing dealing with functional issues that could have been caught earlier in development. This is also good black box test, so whether you’re using bemokoLive or a.n.other approach it’s equally applicable. If you’ve got a mobile web site that you want us to test, or help you get started to run this testing yourself just get in touch.

We commented with “Thanks for providing this stats service – a great service especially on the mobile browser segmentation. There’s an interesting thread going on over at on the momolondon yahoo group – you’ll have to sign up to see the thread, but if you’re into mobile then it’s a very active group and well worth joining. It is essentially discussing mobile access stats between StatCounter / AdMob and Bango. iPhone / iTouch play very high on StatCounter and pretty high on AdMob, but is way down on the list for Bango. This is due to iPhone devices accessing PC sites (a.k.a non-mobile-ready sites) as well as mobile-ready sites, but it shows a great trend on how the iPhone has impacted the way that people accessing the web from their mobile.”