A star is born … well more exactly a Meteor! (v1.0.2 is out)

Meteor was recently released in its official version 1.0, and this has been long expected by its community of early adopters. If you don’t know what Meteor is, rush to the website https://www.meteor.com and see by yourselves.

In a nutshell Meteor is a new, but very well-funded and production-ready, player on the scene and is one of the few frameworks that takes full-stack approach. Your app runs BOTH on the server and the client (in NodeJS on the server, and in your your browser’s JavaScript engine on the client) and works very holistically together. It also comes bundled with MongoDB (although you can replace this with a bit of tinkering).

Everybody knows Meteor uses NodeJS behind the scene. But does it use NodeJS version in your PATH? Hmmm…. No. Meteor is ultra portable and the developer does not need to know about NodeJS at all. So when you are installing Meteor, it will download something called dev_bundle which has NodeJS and all the NPM modules needed by Meteor. All these modules are pre-compiled for your platform. That makes getting started with Meteor easier and quicker. Is there any problem with this approach? No. This is perfect, you just need to be aware of it, especially if you are planning to bundle several apps.

So why should you consider coding your next web app using Meteor?

1. Your app will be a real-time one by default, thanks to the power of web sockets through NodeJS
2. Just like in NodeJS you can code the full stack with just one language: Javascript
3. You can save a lot of time with smart packages grabbed from the AtmosphereJS site
4. The community is extremely supportive, and the company very well funded  (Read this)
5. It’s optimised for developer happiness, and it’s friendly for beginner developers
6. It inter-operates nicely with other JS libraries such as AngularJS, Famo.us, and more.
7. It’s clearly ahead of the technical curve, and that reads through their mission statement: “… to build a new platform for cloud applications that will become as ubiquitous as previous platforms such as Unix, HTTP, and the relational database.”

In conclusion, Meteor is extremely interesting and I think they do a lot of things very right – it’s a delight to work with. EVERYONE coding JavaScript should learn it, because it’s proposed the right way, full-stack. But it’s only an option if you’re in the position of replacing your entire stack, client and server (or working from scratch of course). If you already have, say, a web API that you work against, of if you have an existing JavaScript frontend app that you just want to add some structure to, it won’t fit your needs. Then you would probably consider a more versatile approach with ExpressJS as a NodeJS framework and Ionic as a mobile app packager (which I will cover in another post)

Useful links for Meteor resources

• https://www.meteor.com (Official website)
• https://atmospherejs.com (Meteor packages)
• https://www.discovermeteor.com (The ultimate resource book on Meteor 1.0)
• https://modulus.io (A hosting provider specialised in NodeJS and MongoDB hosting, supporting Meteor apps)
• https://meteorhacks.com (A great resource site)
• http://www.meteortips.com

From Mobile First to Context First

Summary: As we are stepping into the “delight economy”(10), in which you aim at turning first time visitors and adopters into lifetime consumers and brand advocates, user experience and engagement are essential. And if device awareness was a vital step to take, to deliver optimised user interfaces, it was a baby one, we are still to embrace more broadly the necessity of context awareness, in our online presence and web services, to maximise engagement and conversions.

I read this interesting article on the blog of SDL  the software company behind the enterprise CMS Tridion  The title was purposefully provocative: “Mobile is dead” (1).

Making a point around the fact that it’s great for a brand to have a mobile friendly public website, a couple of mobile apps for iOS and Android, mobile responsive landing pages, and even a mobile first strategy and fully device aware web services… but it’s just the very first step in a more ambitious journey towards the user, his needs and his context.

“From Mobile First to Context First” to summarise it in a concise formula, after Peter Sena from Digital Surgeons (2), and if you google it, you’ll quickly grab an eclectic selection of bookmarks on the topic, walking you through user centred and context driven design, and leading you onto the adventurous ground of page less design (3), smarter websites and digital storytelling (4) in the delight economy (5).

This is all very exciting and promising. It explains why leading CMS vendors like SDL, Sitecore and Adobe are fiercely competing on this new segment of CXM, or Customer Experience Management, seeking the Grail of ultimate context-based personalisation. And it also justifies the rapid emergence of all these startups focused on analytics and performance monitoring: Crazy Egg  Qualaroo  Optimizely, New Relic, Fuel Deck, etc …

Yet, I can’t help wondering if all this technology is going to help me actually getting right my “context first” strategy without a radical change of perspective on the online presence of my company and my brands? Measuring variety and complexity is great to understand it and gain insights, but it can be outrageously onerous to action, as any digital marketing manager can tell. And even so, once all is measured and charted, can that really help me overcoming complexity, reaching this state of simplexity (6) I am looking for, and starting to produce delightful experiences which will turn my visitors into lifelong consumers and advocates?

The 5W questions

Maybe this needs a whole new view on what a website should be. Context First is a good starting point, asking the essential 5W questions of Who, What, When, Where and Why. So let’s discuss how web technologies can help us in answering these questions. We’ll discover that we are not necessarily talking about million dollars software here, but most often simple native browser and network capabilities.

Who: Let’s clear up this one, which is pretty obvious. Unless you have NSA clearance, there’s no way you can tell and guarantee who is visiting your site. Cookies, and in particular those from social networks offer some interesting footprint, unless you explicitly ask your visitor through a form or a call to action

When, Where: These are the easy ones, thanks to the native capabilities of browsers and devices and web servers. We can even know “Where from…”, through the the HTTP referrer parameter, which most often provide invaluable pieces of context.

Why: A subtle question which, outside of an explicit call to action, can only be dealt with in a predictive manner, by matching the known session parameters with preset personas and scenarios.

 

The 3S: Search, Social, Spam

In fact, direct or bookmark access has decreased over the past few years, as most of the traffic comes from either Search engines (primarily Google), and increasingly from Social networks (primarily Facebook). According to recent studies, and depending on industry verticals, between 40% and 60% of the traffic comes from organic or paid search, and around 20-25% comes from social and referrals, leaving only 20%-40% to direct visits. (7) (8) Apart of this last chunk would be generated by another powerful source of traffic: Email Direct Marketing, EDM or “Spam” for the sake of pulling together our 3S: Search, Social, Spam.

So WHY are visitors coming to my website? Because they’ve been searching for something, because a friend has shared an interesting information with them, or because they have received a call mail call to action. In all 3 situations, your website should be able to capture this information, and pull together some context for personalisation.

What: This question 2 fold, as it involves the visitor but also you as a publisher. What is the visitor looking for, and what am I able and willing to propose to him or her. Back to the WHO question, this can only be determined through proactive guess working, via carefully designed calls to action in my landing page.

The 3 clicks rule for engagement

Obviously, there will always been situations where you can’t collect much about your direct visitor, due to their privacy settings for instance. Therefore you’ll have to get the best out of their first few clicks and interactions to profile them and tailor their experience. As a rule of thumb, and beyond the myth (9), aim at locking WHO they are and WHAT they are after in a maximum of 3 clicks, in order to serve them best informed content from the 4th one and onward, and produce delight.

Conclusion

So what about Mobile and browsing devices and software in general: Does it really matter that much? It certainly does from a usability perspective and we ought serving the most suitable touch UI to visitors on smartphones and tablets. Again, it’s about generating engagement through delight, via the best use of available capabilities.

But beyond that, talking context? I can browse with a smartphone on the couch, with a tablet from work, and with a laptop from a coffee shop terrace. Does the device really determine my context? Probably not, at the end of the day it’s mostly a game of probabilities .

Device awareness was a vital step to take, to deliver optimised user interfaces, but it was a baby one. Context is everything and web publishers are urged to build context aware web services, beyond responsive or adaptive brochure-ware websites, there’s a real need for something like smart agents to acknowledge and properly greet and guide visitors, and leave them with a memorable first impression, just like I’m a brick and mortars experience. This broader “Context First” perspective could bring within the next few months some radical changes in the way we even think online presence, and trigger a massive upgrade of current brochure-ware websites into a new breed of smart web agents. To be continued along these lines.

References:

(1) http://www.sdl.com/blog/details/54488/mobile-is-dead

(2) http://www.creativebloq.com/web-design/beyond-responsive-design-discover-context-driven-design-8134226

(3) http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

(4) http://www.dtelepathy.com/blog/news-events/impress-smart-site

(5) http://seen.co/event/chefconf-2014-san-francisco-2014-8418/highlight/22854

(6) http://en.wikipedia.org/wiki/Simplexity

(7) http://www.conductor.com/blog/2013/06/data-310-million-visits-nearly-half-of-all-web-site-traffic-comes-from-natural-search/

(8) http://www.searchenginejournal.com/study-reports-20-overall-traffic-comes-facebook-pinterest/87413/

(9) http://en.wikipedia.org/wiki/Three-click_rule

(10) https://www.youtube.com/watch?v=N8nQW4eYCho

 

Digital engagement in the post-Flash era

“Flash is dead, long live the rich web! Beyond the now very conventional statement, it is about time for digital marketers and creative developers to acknowledge the reality of a “yet again” moving landscape, and to understand what is the new winning way of digital engagement, in a multi-screening world. Strategists, UX specialist and creative technologists are now busy scouting and monitoring the most innovative trends, at their bleeding edge. Here are some of their findings in the field of cross-browser and cross-device support, mobile applications and gamification. Welcome to the post-flash era.”

About one year ago, I published this private blog post, about the end of Flash and the emergence of new ways to engage the audience in the multi-screen world. For the records, I have copied a moderated version of the full article below, but in a nutshell what I was saying back then is the above.

The multi-screening world was, and still is a reference to the famous report from Google available here: http://www.google.com.au/think/research-studies/the-new-multi-screen-world-study.html

In another article published in B&T in November 2013, I also mentioned the fact that the future of digital engagement would largely rely on richer and interactive video and 3D/immersive experiences, and I shortlisted Rapt Media as a promising new contender in this arena.

This said, it was only half a surprise today to read this article on The Next Web:

“RIP Flash: Why HTML5 will finally take over video and the Web this year“, by Erika Trautman, CEO of Rapt Media.

And I can only strongly agree to the invoked key factors: Mobile and semantic markup for SEO and social.

Well done Erika, now following you on Twitter to learn more about your vision of the rich and semantic next web 🙂

 

## Moderated Article – August 2013 ##

 

Flash is awesome … or at least it used to be consensually rated so, referring here to good old Macromedia Flash, then turned into Adobe Flash. I used to have significant Flash staff by my side across my career, and these hyper-specialist developers were high on demand, at least until 3-4 years ago. As of today though, Flash developers are busy fast tracking their skill set diversification and looking at other languages, as the demand and expectations from customers evolve.

Not only that I stop recommending flash, but more because of a reduced market’s appetite. Not because of a mere commoditisation process, as this usually happens in the software and service industry, but because of more disruptive changes. And if the well known enmity with the Apple devices ecosystem is commonly invoked, I believe the sunsetting journey of Flash has been accelerated by powerful and conjugated groundswells in other areas, namely broadband, HTML5, social as in user generated content, analytics, and SEO. This is probably what recently led large thought leaders such as Microsoft and Google to drop Flash support in their platforms.

“What a shame!” will the Flash enthusiast say, when you think of all the incredible features it was bringing to our desktop screens: Vector based lightweight graphics, HD audio and video streaming, microphone and webcam access, low-level bitmap manipulation, hardware accelerated 2D/2.5D animations, plus a strongly type and class-based programming language and binary-based sockets.

Note 1: as of August 2014, on seek.com.au, there were 73 job ads for Flash developers, to compare with 453 for HTML5 developers, and 823 for mobile developers. 

Well, one can bluntly reply that HTML5 is now competing, and even beating Flash in most of these areas, and if we used to say that HTML5 was a standard in motion, this is now an overstatement since the HTML standard will be final by the end of 2014 (source W3C).

Take animations for instance, and look at what you can achieve with CSS2 and CSS3 on all mainstream browsers. Beyond the confidential and exotic Chrome Experiments, heavyweight Adobe has already acknowledged that through its HTML roadmap and the new EDGE suite of HTML tools. And that’s without also mentioning the capabilities of the SVG vector graphic format.

In the media arena, the native VIDEO tag now allows to play back of H.264 encoded MP4 video in all modern browsers, including Microsoft IE9 and 10, without a plugin. But there’s more, as today the Chrome and Firefox browsers natively offer even access to the user’s microphone and webcam through a recent Media Capture and Streaming recommendation (getUserMedia). And to nail it down, there is an open source project called WebRTC  enabling real time video communications through a Javascript library already supported by Chrome and Firefox as well.

With CSS Filters 1.0 around the corner for dynamic bitmap manipulation (check out this nice demo), and ECMAScript 6.0 bringing more robustness and concision to Javascript syntax, the sky seems to be the limit.

Over the last few months, I have carefully observed these developments and trends, in order to make informed decisions regarding the selection of new technology stacks. And I can mention and share my findings in 3 specific areas:

Cross-browser support and device adaptation

This used to be a strong Unique Selling Point for Flash, given the massive penetration and ubiquitous character of its browser’s plugin. However mobile has been a game changer, with an unprecedentedly large number of screen sizes and aspect ratio combinations, in front of which scaling up and down graphics is just not enough. And a promotional banner or interactive piece of content will most likely look a bit odd or even not usable at all, once shrunk within a 4” screen.

In the meantime, modern HTML has enabled consistent and adaptive handling of rich content across multiple browsers, and when new HTML5 and CSS3 features are not enough, then Javascript and server-side browser detection and processing help bridging the gaps. Don’t be mistaken though, this does not mean that the browsers war is over, and the market is still shared by 4 vigorous contenders, if to just consider desktop and laptop browsers only. And if Google Chrome is now significantly leading the pack (see the latest Statcounter figures for instance), Microsoft Internet Explorer, Mozilla Firefox and Apple Safari are tagging along (The same situation prevails globally on Mobile).

When I hear the word of “fragmentation” regarding browsers, this is certainly a reality that still needs to be addressed, since support of the most recent HTML norms and features stays diverse and incomplete. In that regard, I recommend to bookmark 2 useful web services:

• http://html5test.com allows you to measure the compliance of your browser with the HTML5 standard as a whole. On a scale of 0 to 500, without surprise Chrome leads with 463 pts as of July 2013, versus only 320 for IE9 and IE10.
• http://caniuse.com provides an extensive list of HTML5 + CSS + Javascript and more features that you can check versus the particular browsers matrix you are targeting for your ongoing projects and customers.

To circumvent the challenge of outstanding inconsistencies between browsers versions and screen sizes, the only valid answer is abstraction. This is what so called HTML5/Javascript frameworks are proposing and this is why they have grown more and more popular over the last couple of years, propelled by buzzwords such as “Responsive Design” or “Device Agnosticity” for instance. My goal here is not to establish an endless list of all initiatives and software in this area, but to give a sense of why I have picked some development tools. Just to mention my mainstream options:

• Responsive web framework: HTML5 Boilerplate, Bootstrap, Foundation
• Javascript libraries: JQuery of course, extended by KendoUI from Telerik
• Device and feature support detection: Modernizr
• CSS enhancements: Gumby

 

Mobile applications

We all saw how Apple waged war to Flash, excluding to support it on iOS devices on the basis of stability, security and performance issues, and despite some support found at Google within its Android system, this has certainly triggered the downfall of the “15 years old patriarch”. Lately, I have followed noticeable attempts by Adobe to regain ground on iOS via its Flash+AIR platform, but the mass seems over, with Google giving another lethal blow by dropping Flash support in Android 4.1 and beyond.

Australia certainly is a particular market with a persistent domination of the mobile market by Apple, as per latest StatCounter and Google stats  Nevertheless, the trend stays the same and other contenders are cracking in, Blackberry still alive in the B2B segment and Nokia/Microsoft nibbling the heels of Google Android. The days of iOS only native applications are long over and any serious digital marketer knows that he needs to provide a slick mobile experience on key dominant and fast growing platforms to grab the laurels.

And if you can often get away with a neat mobile web experience for fulfil the needs of a branding site or a marketing campaign, there are still some strong and relevant use cases for native mobile applications, and at least the following:

• File system interactions on the device: Manipulating and exchanging documents back and forth between local storage on devices and cloud services.
• Media interactions: Leveraging the camera and the microphone is better done within a native and locally running app. Take a simple barcode/QRcode scanning feature for instance, but consider also the engagement potential of Augmented Reality.
• Gaming: Despite the ubiquitous broadband network, there are still situations when the user is off the grid, the game assets are too heavy, or the user experience cannot suffer from unreliable streaming.
• Interoperability: Users have more and more appetite to multi-task and move content across multiple feature centric apps on their device, regardless of network conditions and real time access to cloud services.
• Encryption: With recent coverage in the news of massive privacy infringements, not only by hackers but also by government services, strong data encryption is essential, starting with the Finance vertical.

It is a daunting challenge for a digital professional to maintain skills and know how across the 3 short tail mobile stacks, namely Apple iOS, Google Android and Microsoft Windows Mobile. For this reason, I have chosen to favour cross-platform development, leveraging frameworks such as Xamarin, Titanium Appcelerator and Adobe Phonegap .

Gamification

This also used to be an arena dominated by Flash, and it is obviously still very high on Adobe’s latest product roadmap , as this might ultimately be its best survival option. But the rise of casual gaming in Facebook and on mobile phones, has accelerated the transition towards HTML based alternatives, or to more mobile friendly platforms.

As I was recently looking for a mobile-friendly web-based game, I had the opportunity to review a  number of HTML5 engines, and there are not less than 17 known major initiatives of interest at the moment, to build and deliver Javascript games on mobile devices. I’d like to highlight and support here the remarkable promises of CraftyJS, TreeJS, and VoxelJS. Prefer Chrome to IE or Safari to browse the available showcases, and brace yourself: This is happening without any plugin!

On the richer side of things, which still sits in a 3D + realtime space browsers alone struggle to explore, I have chosen to rely on best of breed and fast growing solutions such as Corona to create 2D platform games or the award winning Unity3D to create advanced 3D games and applications, including Augmented Reality. And if these new contenders on the market of cross-platform game engines have initially tried to bet on Flash as an authoring platform and universal player (here for Corona, and there for Unity3D), the conversation has recently dramatically shifted, due to the fundamental lack of open-mindedness, concessions and ultimately inspiration on Adobe’s ends. While Corona were bold enough to speak out loud their reserves as soon as October 2011, Unity3D tried hard again with Flash Player 11, but finally threw away the towel in April 2013 with this definitive announcement.

Today, new desktop, mobile and console friendly engines are fully emancipated from the old and cranky grandpa, and delight developers and publishers with native device support, as well as a dedicated web plugin for Unity3D, which as seen exponential growth thanks to its remarkable success on the Facebook games market. The 2 companies have even recently disclosed a technical partnership to make publishing even easier, and they have reported the web plugin installed on over 200M computers around the world. A new star is born, and I am happily riding it.

Cookbook: HTML5 for creative directors

John Allsop from Wedirections has just published an interesting short 30 pages book about HTML5, to help an audience of creative professionals understanding what sort of new features and capabilities they can leverage for their projects and customers.

“HTML5 for Creatives takes a high level, yet in depth, look at the capabilities, use cases, strengths and limitations of the whole suite of related technologies that are broadly referred to as “HTML5”. It’s written specifically for people who make decisions about the use of technologies, particularly in the creative industries, (but it’s more than a little relevant for other industries as well) rather than for developers and implementors. We keep it high level, so there’s no code to worry about, but we’ll also delve into these technologies in some detail.”

The PDF is available for free, and is certainly worth having more than a close look at. It tackles and kicks out a number of urban legends and preconceived ideas with both honesty and clarity. However, consider it for what it is, an introduction to a complex topic, good enough for awareness but insufficient to jump into a real life project. Some chapters are very promising yet frustratingly embryonic (such as “Device APIs”). The take on Native Apps vs/with HTML5 (hybrid apps) sounds reasonable to me, although the discussion already starts being a bit outdated according to me.

A good download anyway! Thanks John.

http://www.webdirections.org/blog/html5-for-creatives/

The New Multi-Screen World according to Google

Google just released a few weeks ago a very interesting survey report regarding the new internet and media consumption habits, shedding an interesting light on a new heavy trend: Multi-screening.

Today 90% of our media consumption occurs in front of a screen. This cross-platform behavior is quickly becoming the norm, and understanding it has become an imperative for businesses. Here are some insights from our latest research:

• 90% of consumers begin a task on one device and then complete it on another device. Smartphones are by far the most common starting point for this sequential activity.
• TV no longer commands our full attention. In a typical day 77% of viewers use another device while they are watching TV. Because of this, a business’s TV strategy should be closely aligned and integrated with the marketing strategies for digital devices.
• While consumers are using more than one device simultaneously, content viewed on one device can trigger specific behavior on the other. Businesses should therefore not limit their conversion goals and calls to action to only the device where they were initially displayed.

Discover many more valuable multi-screen insights by downloading the full report here.

New UX contender: Kendo UI

.NET tools provider Telerik is adding support for tablets in its release of Kendo UI Complete.

Kendo UI is an HTML5, jQuery-based framework for building HTML apps. Todd Anglin, Telerik Vice President of HTML5 Web and Mobile Tools, said in a statement that the new release moves the product beyond mobile phones to help developers create experiences with HTML5 that look native on the iPad and other tablets.

Developers are increasingly using HTML5 tools and Javascript to create products that can run on a wide variety of devices and platforms. Telerik said that Kendo UI’s unified framework utilizes adaptive rendering so that an app’s look-and-feel can automatically adapt to the display and characteristics of “any smartphone or tablet device. Which is certainly true to an extent, as only webkit based browsers are fully supported.

But that’s a nice and worthwhile initiative to bookmark. I particularly like the Kendo UI Dojo, to learn how to use the framework, a neat job. Last but not least, the price point is agressive, at $1,000 per year with unlimited support for the full suite.