Posts Tagged ‘mobile web’
bemokoLive has been built ground up with the consideration for user connecting from a variety of devices and the rise of popularity of HTML5.
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:
- Video and audio support
- Canvas for enhanced graphics
- Geolocation API
- Local data storage
- Context menus
- Drag & drop
- Data grids – structured editable data sets
- 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.
I’m really pleased to announce that v1.2.5 of bemokoLive is now released. This version takes a step forward in the management of mobile campaigns with the provision of sub-sites and content rules. We’ve also put together a great getting started tutorial you can download from our wiki.
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).
bemoko today launched the mobile website for the 2009 Doha Tribeca Film Festival and it’s been featured online in Mobile Entertainment.
Have a read of the article here and take a look at the site for yourselves at dtff.bemoko.com
… or in other words we can readily synchronise local browser storage with back-send server persistent storage. This is one of the fundamentals of compelling off line web applications.
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.
Imagine if radio came along after television.
… 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.
Over the last couple of months we’ve started to use Canoo Webtest to functionally test our mobile web sites. We now use it for both product deployment cycles (we spin up a full version of bemokoLive and test a sample site prior to packaging up the platform) and site development.
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’re pleased to be the mobile web partner for the upcoming and prestigious mobile user experience (MEX) conference. We’ve created a mobile site for the conference at http://mex.bemoko.com which I have to say I’m rather proud of. It’s getting a lot of good feedback and Marek Pawlowski has written a nice blog posting about the site.
Great new service on web access stats including mobile browser segmentation from StatCounter. See Launch of Free Global Stats Tool for more info on the launch, leading with the headline iPhone Takes Global Lead in Mobile Browser Wars – StatCounter Research.
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.”
In response to the utter death of the “mobile web” …
“An interesting point of view and, there are clear current benefits for local apps at the current time, that does not mean the mobile web is over. I’m looking forward to evolutions in the mobile browser – especially with the innovations coming in from the likes Fennec, Opera and Chrome – where deeper device functionality will be made available via the browser. Just think how tools likes Google Gears and AJAX toolkits are changing the way we can build sophisticated web applications on the PC. On the PC, for the majority of my applications, I much prefer a decent web application delivered through a standard browser than having to download an application. I see no reason why the mobile browser cannot achieve the same thing, allowing people to deliver cross-device applications in standard way that one (1) we know and love (2) has already demonstrated it’s value on the large screen. Neither mobile native apps nor mobile web app will conquer all and both will most definitely survive with both providing incredible value in the ultimate goal of delivering great mobile user experiences.”
(Note – as of March 8th this comment has not yet been accepted by rhomobile)
I discovered widsets early last year and found it a really enjoyable interface to access my favourite news feeds. It’s been out of beta since last November and has since been polished up well. What impressed me most yesterday was the ease in which I could create a new widget for this bemoko blog and get it published. I had 20 subscribers to the widget within the hour. Many thanks to those early adopters (and of course the Widset developers for making it so easy).
An alternative approach is the Wordpress mobile plugin provided by Andy Moore. As with all Wordpress plugins the installation is easy beyond belief. 5 minutes and our blog was optimised for the mobile. Andy does a stunning job in the mobilisation – all in one php and a great light weight device detection. Do take a look at the PHP code that does it all (wordpress-mobile.php) for a little inspiration.
So how would I access mobile feeds? I’m not too sure whether I prefer the Widset approach or delivering direct to a standard mobile browser. They both have their strengths. The Widset UI is smooth, looks impressive and is responsive, but it does require the user to download and launch another app. The browser route is more lightweight, accessible to more users without an installation and gives extra flexibility to the service provider – you’re not confined by the Widset box. I’ll try both for the next few months and let you know what works for me both as user and a service provider.