So, after visiting a number of websites I found one in particular that had an array of affordable and suitable holidays. There were so many options I actually felt the need to bookmark the best looking ones for future reference.

Now obviously there are many ways to do this but my eye was drawn to this site’s Airbnb style ‘favourite’ functionality. As I hovered over the icon I imagined what was to come but still held out hope that I was wrong.

Click…

YOU NEED TO BE REGISTERED TO USE THIS FEATURE SO PLEASE TELL US YOUR ALL THE USUAL CRAP INCLUDING FULL ADDRESS PLUS ALL THE THINGS YOU LIKE MOST COS WE’RE ALREADY ASSUMING YOU’RE GONNA LET US EMAIL YOU STUFF*

*I might have ad-libbed a little

At which point, I thought “are you kidding me? I want to use a tool that should bring me closer to purchasing and you’re going to make me work my arse off for it?”

Now of course I understand that to truly remember information an exchange of data must take place but, how about phrasing it to put the emphasis on helping the visitor…

That’s been added to your favourites!

We should remember your list next time you visit us on the same device but to be sure we recommend you quickly join us.

You can join via your social accounts or by giving an email and password.

The above basically translates as “we’ve done what you asked” which is the first thing a user wants to know. But it then explains that to get the full benefit of their actions they need to do a LITTLE more. This provides a simple onboarding process for those that are willing.

5 other bad examples of making users work for it

Making them choose before they’re ready or able: During my recent holiday hunt I was amazed how many sites made me choose a destination. The destination was actually what I came to figure out based on the experiences I required (beach, all-inclusive, crèche) which also fit within my budget.

Forcing them to download an app

If a brand’s marketing and data strategy is spot on then targeting users with messages to explore the features of their product(s) is a no brainer. But, making them download an app first to do so isn’t. If you want to impress consumers don’t make them jump through hoops.

Force them to register: Some stakeholders struggle to comprehend why a guest checkout option is needed when the work required from the user is often near identical. And in many ways, this is a logical argument… except we’re not always logical creatures! Forced registration could count for around 23% of a site’s basket abandonment(2). It’s all about personal choices.

Make them change device: The motor industry and its many variations of car configurators and 3D walkthroughs can regularly be guilty of this. Being told that “to get the full experience view on a laptop or computer” can make the brand seem lazy and cause frustration.

The hidden navigation: Hamburger menus are a much-debated topic which I could talk/rant about for thousands of words. On smaller screens they are usually a necessity (although sites like the BBC show there are other solutions). But using a hamburger on larger screens is inexcusable. Scanning the primary navigation helps a user understand what you have to offer and what their options are, so why make users look for it?

Studies have shown that using hamburgers reduces the discoverability of content and increases task completion time(3). Yes, it’s one click but by hiding the options you reduce the potential for a user’s subconscious to drive further exploration.

Making users do unnecessary work is a guaranteed way of damaging conversion rates. So take a look at your digital assets and ask yourself the question - ‘Are we making users work for it?’

1. Source Expedia http://inside.expedia.co.uk/pressreleases/time-for-a-break-brits-left-stressed-over-holiday-bookings-1319817

2. Source Formismo — https://www.formisimo.com/blog/7-best-ways-to-decrease-your-form-abandonment-rate/

3. Source Nielson — https://www.nngroup.com/articles/hamburger-menus/

Don’t make users work for it was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you haven’t heard of Meteor JS already, let me give you a brief overview of what it can do and why I think it is so powerful, especially when teamed with React. I will then share some code snippets to provide further insight.

What is it?

Meteor JS is a full-stack real time web application framework. From front-end to back-end you only need to concern yourself with one programming language: Javascript. Its primary purpose is for the user to be able to create applications & websites with less code.

Meteor allows you to build for any device, Web, IOS and Android, while utilising technologies you are already familiar with. This could arguably be a topic all on its own, and is a little outside the scope of what this post is focused on. You can read up on this here.

Why Meteor?

This is the fun part. The stand out consensus is that Meteor is incredibly easy to learn, & while every mammoth like framework likes to boast their ‘simplicity’, Meteor actually delivers on this promise.

Don’t believe me? take just an hour out of your day to complete this tutorial, the result… Not just a UI to-do list, but a functional client-server to-do list with basic authentication (user login).

The Meteor team’s focus on simplicity is refreshing.

Meteor JS comes shipped with Mongo DB as its de-facto Database and three view-engines are currently supported: React and Angular (the two giants) and Meteor’s very capable Blaze.

What about Dev-ops?

Meteor’s mission to keep development as painless as possible throughout extends with their build system.

It’s worth mentioning that Build tools such as Gulp & Grunt are not required, reducing additional overhead & project set up time. Thanks to Meteor’s built in ‘Hot Code Push’ your HTML, CSS & Javascript changes are seamlessly compiled and your site updates without a manual reload.

I hear you already asking “What about SASS/LESS I’m way too cool to use regular CSS”. Worry not, Sass, Less & Stylus are all supported by grabbing them from Meteor’s native package repository ( Meteor’s version of NPM ).

PostCSS and Auto-prefixing? Have at it. In fact whatever you are keen on, build-systems related, they have in depth documentation for you to get your head around. Speaking of NPM, you can totally still use this as you usually would.

Meteor With React JS

So enough of what Meteor JS is, if you need a more in depth evaluation to decide if it can cater to your needs, check their developer guide.

I want to show you a small demo clip using Meteor Js with React JS as the view engine. This example is a demo employee directory see below:

We are using Meteors pub/sub formula here, which stands for publish and subscribe. How does it work? So as you know we are using React JS for our UI / View. React is just in charge of handling the data it is given and rendering it to the page, for example the image, employee name & details.

The data is actually stored in Meteor’s back end. We are using fake data currently, for example purposes. Check out Faker JS great for generating loads of test data.

Back to the topic at hand, we need React JS to talk Meteor’s Database to request the data… this is called a Subscription.

Let’s put this in human terms for the sake of understanding, It is as simple as React saying “Hey meteor I know you are storing all those employees. I would like you to send me the first 21”.

We set up our container which, continuously watches our subscriptions, and if any data changes, it will update and pass this down via props, re-rendering the components. Our ‘per_page’ variable is set to 21 so that’s all Meteor will send back to us.

Meteor will then Respond like so “No problem, here is the first 21 you asked for”. This method is called Publish.

The limit makes sure, it only supplies the client exactly what it needs. Super easy, right? There is only one extra step that needs addressing: Collections. We understand the pub / sub method now, but how do we actually reference the data inside Mongo DB? At its core Collections are a set of related data within Mongo DB.

For example purposes, below is how we set up a collection for our Employee directory with comments.

Part 1: Declaring our collection and making it available to run on the server by exporting

Part 2: Generating some fake data and adding it to the employee collection, which will be stored in our database.

As you can see above, we are generating 5000 Employees with fake data. However, if you remember we are only requesting 21 Employees from our database on initial load.

Collections can be used also on the client side & locally. See more on Collections here.

Now of course I don’t believe any framework should be used for all cases, you should always choose the appropriate tools to get the job done, I touch on this in my previous blog post ‘Front end dev -running before you can walk’. I hope this helped demystify what Meteor JS is and enlightened you to a very small set of its capabilities.

👋

I hope you enjoyed this post, feel free to check out my previous posts on learning React, and for all things creative tech head on over to TMW Interactive.

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it!. Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive).

Quick Side-note: Check out Stephen Grider’s course on Meteor JS & React from Udemy, his understanding and mini projects are a great entry point into this stack. (Naturally wait till Udemy do a flash sale 😃 )

Meteor JS with a hint of React was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

Remember the glory years of play.com when it rivalled Amazon? Well I do and I used to rather enjoy our mini conversations together over email.

They’d typically start with an email asking if I’d like to see ‘The deal of the day’. My answer to this was 99 out of 100 times yes so I’d dutifully open the email to reveal what it was.

Quite often the deal was not for me but that was ok. I’d invested very little of my time so it was a perfectly good (if brief) conversation. When I did find the deal irresistible all I had to do was respond yes to the offer to ‘add to basket’ and off I went.

One quick conversation and one more sale converted.

But, it all started to go wrong. All of a sudden I was asked multiple questions in my emails. Did I want to check out the deals for DVD’s, books, electronics, fun gadgets, t-shirts, etc.

Well, I was never really sure. There were montages of covers to hint at what was in the deal and now I was told it was ‘up to 50% off’. So If I wanted to know, I’d have to ask play.com to show me more.

Doesn’t sound too bad right? It needn’t have been but often you had to dig for the montaged products and the deal for them was negligible. To make it even worse the same deals seem to be repeated every week.

Our conversations had become convoluted, taxing and at times felt misleading. So I (and it seems many other people) stopped having them.

Anatomy of a digital conversation

As marketers we start conversations all the time via channels such as email, social posts, search, notifications, etc. Our goal is to continue these conversations until their conclusion which typically means a conversion (sales, sign up, share, etc).

Typically these can broken down into sequences of:

A Recommendation - Discover this / watch / learn about /

A Response - The users click

A Reveal - The content

What makes a bad conversation?

It’s never a good idea to offer a Recommendation to a complete stranger out of context. If they don’t know you and you’ve not bothered to introduce yourself, why would they trust what your saying?

Equally a badly timed conversation will likely result in failure. As much as their dedication should be admired, a charity worker is going to struggle trying to engage a scowling (it’s just my resting face) London commuter walking at full pace towards the station.

But the most common conversation (and therefore conversion) killers are misguided Reveals, which can typically be categorised into five types.

The ‘we’d rather talk to you about this’ Reveal. Hooking the user in with a promise to talk about one thing when secretly you want to talk about another may do wonders for CTA’s but it won’t help conversions.

The ‘Enough about that, how about this’ Reveal. Similarly if you try and change the conversation too quickly the user may feel confused or even misled.

The ‘find it if you can’ Reveal. My play.com bug bear. If you’ve highlighted certain items as part of a collection then make sure these are one of the first things seen on the reveal.

The ‘before we go any further give us stuff’ Reveal. Unless it’s absolutely required to deliver the content (EG your postcode to find your closest store) you cannot ask for personal data to continue the early stages of a conversation.

The ‘what is this’ Reveal. Quite often Paid search can the be culprit of this. The paid ad recommends itself to answer the original query but the Reveal (link) can often be to a homepage or something entirely irrelevant.

Good conversations

The best conversations are the ones that are most relevant and/or interesting to you. Brands that invest in data planning, marketing automation and contextual content tools are most likely to have the best conversations with their consumers.

Why? Because they know what makes their consumers tick, when to contact them and exactly what to recommend to them. And as long as they Reveal the content that matches or exceeds the expectations set by the Recommendation they’ll enjoy the best conversions.

Often a good SEO strategy (coupled with good UX) can often provide solid conversations. How? If a brand’s content genuinely answers a user’s query, they can start to build brand equity. This, combined with an appropriate Recommendation can lead to successful conversations.

So review your user journeys from end to end and ask yourself…is this a good conversation?

👋

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it!. Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive).

The art of conversation was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

Interactive elements within an email can allow for fun new experiences and increase engagement with your message but when and where should you invest in them?

When trying to push the limits of what can be accomplished within Email many marketers are gradually starting to include interactive elements within their campaigns. If you’re new to interactive emails, this is your guide to what defines them, what can be accomplished by its use and how you can introduce interactivity to your existing emails.

What do we mean by interactive?

At TMW Unlimited we define interactivity within email as anything that allows us to alter content or provide animations within an email based upon a user clicking an element within the design. Crucially this all happens within the email itself and not off on a landing page.

Broadly this can include anything from carousels, accordion menus, popup content, conversational design elements, in email shopping baskets or any other type of interface that presents the user with a simple click option to cause an effect.

Check out the below examples of some recent interactive emails:

Halloween proof of concept
for Vodafone

Nissan GB Carousel

Conversational Design Experiment

Infiniti — Mobile Colour Changer

The Potential

All of this interactivity within email is possible due to the capabilities of CSS and modern platforms. CSS is the code used within emails to apply styling to elements like text and images. However, CSS is capable of much more and because of greater support offered by mobiles like iPhones and Android devices we can now use advanced features on these devices.

This means that any device or email client that supports modern CSS standards can potentially display and initiate animation effects usually reserved for web browsers. For other platforms (mainly desktop clients) we will need to support alternative options.

Anything we can style within an email (e.g. Text and Images) can effectively be transitioned between two different states. As a very simple example, we could create a button to toggle the visibility of an image within an email. We can then setup an animation effect for the transition between the two states e.g. fading or zooming etc. that can then be triggered by the user clicking the defined button.

In the examples above we’re effectively changing the on screen visibility of elements in order to show and hide content creating the effect of carousels, accordions and other user interfaces.

You can then get even more detailed by effectively tracking multiple clicks / states at the same time and using them to increment and decrement counters. This allows you to embed even more functionality like shopping baskets or games within the email itself.

Interactivity — Best Practice

Currently we see interactive elements as primarily mobile enhancements. This is due to the fact that there is still limited support for interactivity on desktop and web based email clients. When designing new campaigns it is important to review both your objective and available content in order to assess how interactivity could be creatively applied.

Wherever possible it is important to use this functionality to enhance user engagement rather than just aiding in the display of more content on a smaller screen.

Ensure your message is clear and relevant to the user before hand. Never add interactivity just for the sake of aiding poor content. Use it to enhance your proposition to the user.

It is also important to keep in mind the additional development and testing time required for these campaigns. Naturally this makes interactivity more suited to one off emails than a regular feature within your email templates.

You will also need to make sure to implement fallback versions of your design for the desktop and anywhere else the interactivity is not supported. In the carousel examples linked above we generally stack the different slide content on top of one another or design a completely different desktop version. Alternatively you can choose to completely hide the interactive content and present static alternatives.

Emails no longer have to look the same on every device.

There is also no need to worry about interactivity affecting the deliverability of your campaigns as the code required is nothing more than standard HTML and CSS. If you already have good deliverability and sender reputation then this should not impact you*.

Do keep an eye on the amount of code used within your email though as the extra weight caused by the interactivity could cause some email clients to clip or trim your content and break your design.

As with everything in email marketing make sure to QA thoroughly and A/B test your results.

In Summary

Is interactivity the future of email marketing? Possibly but first it needs much greater support particularly with desktop email clients. Right now it should be an option you explore for use within your campaigns but only to enhance the message and improve user engagement.

I would recommend prioritizing its use in email only where you want to attract attention to a unique program e.g. product launch or announcement email.

Due to the time and cost involved in development and testing we would not normally recommend it’s use in regular communications.

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it! Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive). Also feel free to contact me directly on Twitter @hickling for more advice.

* Content filters that refuse to like large amounts of code could be an exception so make sure to test!

Interactive Email: The Future of Email Marketing? was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

Jekyll-created websites are typically simple and their layouts, predictable. I want to show you how I created a pseudo-dynamic layout for case-studies, on TMW's new website, using some YAML front-matter and a little magic..*

At TMW, the work we do comes in all shapes and sizes. Traditional templates would not suffice, because the work we do is extremely varied and the layouts needed to reflect that. We decided, at a very early stage, that each case study should change based on the project and particular type of content. This presented an interesting challenge for me because Jekyll does not cater for that functionality, so I had to get a little creative…

YAML front-matter, a for-loop and lots of modules

After a few iterations, I settled on a robust, if unorthodox solution that used YAML front-matter (in each case study’s markdown), a simple for-loop (in the case study layout) and lots of modules for each section of the case study page.

YAML front-matter

Amongst other things, the partials YAML array was added to the YAML front-matter for each case study (you can see it at the bottom of the embed below). Each item in that array had to specify a name, this name corresponded to the name of the partial/module that was going to be used.

The for-loop

The loop in question was added to the work layout file in the _layouts directory. It might look a bit nuts — and it is — but please bear with me.. The nature of how Jekyll compiles it’s files meant I had to account for all possible properties for each module that was used in the YAML.

The loop iterated through the partials array, used the name property to include a different module, like so: include {{item.name}}.html. These were then passed to the included module using the subsequent parameters on the include tag. Even if the property was not needed in that module, it still needed to be passed down.

Very quickly, I discovered that the properties of the partials array needed to share the same properties so that my for-loop didn’t get totally out of control.

The modules

Creating modules for this page was nothing out of the ordinary, below you can see one of them. You should also be able to tell that some of the values are optional (e.g {% if include.spaced %}), this meant that I was able to customise the modules even further by adding/removing classes and content and giving the page even more of a unique feel. Examples of this was the optional addition to contain images in the section-image module to a thin column equal to the width of .l-container or a slightly wider version using .l-container--wide. This was used to great effect on the Lynx Bigger Issues case study.

Colour schemes

Another aspect to the case studies, was that they each have their own colour scheme. This is usually governed by the assets or brand for that particular case study and was controlled by some more YAML front-matter.

The YAML set primary, secondary and text colours that were then added to a small inline <style> block that changed styles for some aspects of the page.

All of this allowed for massive customisation on our new website, see a selection of case studies below:

👋

As you can see, there are some incredible things that can be done with Jekyll. If you have any comments or feedback, please let me know.

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it!. Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive).

*No magic was used.

Creating dynamic layouts with Jekyll was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

Disappearing interface

by Marc Curtis

Invisible is the new black

Here’s a term you’re going to hear more of in the coming months. It’s not a new term, UX luminaries such as Don Norman have been writing about the challenges of designing natural interfaces for years. So what is it?

Put simply, since the dawn of computing we’ve employed various visual displays to impart and interact with the information and functionality afforded by the device.

In the earliest days of computing dials and lights displayed the results of computations. This became VDUs (I bet that’s a term you’ve not heard in a while), and soon — with the coupling of the GUI (Graphical user interface) and the mouse (invented by Xerox and made popular by Apple) — we all learned how to interact with our machines by pointing and clicking.

Mobile devices have evolved this with the development of gestural interaction (touch, swipe, pinch etc), but the basic idea remains the same. We use a screen to interact with our computers.

Earl grey, hot

During the relatively short evolution of GUI interaction, technologists have tried at various points to catch up with the dream of a voice interface as promised to us by popular sci-fi like Star Trek.

As far back as the mid 90’s software such as Dragon Naturally Speaking enabled users to execute simple commands on their PCs (albeit with varying degrees of success).

In recent times, giants such as Google and Apple have worked hard to perfect voice recognition to the point that we can now reliably talk to our devices with every expectation of being understood. However the interactions are still validated and enable by screen based devices.

Alexa, play music 🔊

Now, this is all set to change. Amazon Echo is one of the first of a new breed of devices that does not have any kind of display. All interaction is handled using voice commands. Crucially these commands should use language that sounds as natural as possible, delivered in a range of accents by users of all ages.

In effect we are entering an age of the Disappearing interface.

This raises a number of challenges for designers, UX professionals and developers (imagine trying to deliver a recipe and instructions for a user with no visual reference points) as well as a range of challenges for users, who may have to learn new ways of interacting with these systems

Don Norman would point towards his long held belief that poor user experience is due to poor design. So these challenges really centre on our ability to understand how users need to interact and build invisible interfaces that seamlessly provide that interaction.

🔥 Showcase

Wind and Words is an interactive Game of Thrones data visualisation. Using data collected from script dialogue and other sources, this experiment analyses and visualises characters’ words and interactions from the first six seasons of HBO’s Game of Thrones.

Astronaut.io is really cool. It presents seemingly random Youtube videos, these videos have almost zero previous views. They are unnamed, unedited, and unseen by anyone but YOU.

Mystery Search is a potentially NSFW site for Google searches that gives you the search results for what the person before you searched for.. Sounds confusing, I know. But give it a whirl if you dare..

📖 Reading / Link list

Designing for Brand Interaction by Rebecca Ussai Henderson relates to last month’s CTM by showing how a branded experiences can be created👌

Welcome to the internet of superfluous things by, our very own, Marc Curtis talks about some of the useless things that are being created these days.

For the love of all that is holy do we need Edwin the Smart Rubber Duck? I’m calling it: we’ve reached peak internet of things.

On a similar note, The CES of Shit is a brilliant, curated Twitter Moment from the @theinternetofshit showcasing all the awful things at CES this year. Do we really need smart underwear? Why do some people even bother?!!

Awesome-casestudy is a curated list of technical case studies about front-end development.

⚒ Code

🎉 Webpack 2 (or more appropriately, v2.2.0) has finally been released, read about it here. There’s even a brand new website for the project too: webpack.js.org

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. Follow an interactive introduction at hello.p5js.org

Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library that also works on mobile.

Incheon is a real-time multiplayer game server based on Node.js. I can definitely see this coming in use soon..

Satyr.io is a useful dummy image generation service. They have all the usual features plus a bunch more, like network delays, logos for various well-known brands, and even flags of the world!

📱 Apps

Antipersona is an app which lets you experience what it’s like to use Twitter as someone else for a day.

The 31 tools we use to make our “semi remote” SaaS team work efficiently by Emeric Ernoult lists many useful app that may help you and your team work.

Kitestring checks up on you when you’re out and alerts your friends if you don’t respond. Best of all, the service is completely free but its SMS-based, so it isn’t strictly an app.. This is somewhat similar to the Boy Bye Bot for when you want to give a fake number ‘for real fuckbois’.

🍗 Interactive Team Activity

You might have noticed that we are not the ‘Tech team’ any longer, this is because there has been a bit of a reshuffle at TMW. We are now the Interactive team. More on this soon. 😄

🗣 Vijay gave a brilliant #brunch&learn talk about Docker. It will improve development and release workflow, and reduces costs that we can pass on to our clients. Look out for his post on Docker soon. 📦

💻 Dee has been creating an Amazon Alexa skill 🗣 prototype for one of our clients; it has already sparked a lot of interest from around the business and we look forward to trying out new skills in this exciting area.

💻 Ciaran & JP have nearly completed a React app for an international bank. Watch this space for a write-up.

📖 Denzel wrote an inspiring article about just getting out there and going for it; read it here. 👍

⚽ Kickoff v8 is very close to being finished. The last bits to be added are for Statix and the Yeoman generator. The docs have been massively improved as well, you can sneak a peak at trykickoff.now.sh.

👋

If you have any comments or feedback, please let us know. If you have any suggestions for next month’s issue, please send a tweet to @TMWInteractive.

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it!. Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive).

Creative Technology Monthly: Disappearing interface was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

TMW Unlimited and Dalziel & Pow created a bespoke solution that used the power of projection mapping to truly immerse consumers in beautiful 4k photography, demonstrating the abilities of Canon products.

An installation to surprise and delight anyone whilst being straight forward enough for all to use and navigate, we wanted to create something for all levels of photographer and hobbyist.

Currently live in Stuttgart and Finland, with Moscow and Dubai launching soon, the team are releasing a CMS version which will allow all stores to choose specific products from the Canon Tridion CMS platform to show localised in their stores.

Working with Dalziel & Pow I lead the team in creating a new, interactive retail experience for a distinguished multinational client — Canon. With an increase in smartphone photography, the concept allows consumers to explore the benefits of Canon’s superior image quality and its product’s technical features.

Acting technical lead and creative consultant, I guided the development as well as being hands on from choosing platforms and implementation through to working with Canon’s CMS and content team.

Using a 4k screen, surrounding digital projections and a touchscreen, the app allows consumers to browse through Canon’s extensive camera range, read up on key features and project photography that has been taken with that particular camera. It’s an exciting concept that inspires the customer by demonstrating the capability of its cameras.

Utilising a wide range of technologies from projection mapping to the latest in javascript frameworks, the team built a system that is always listening and reacting to user input. Due to its modular design, the system allows an infinite amount of views or connections to enjoy the experience. Whether on tablet or using the core touchscreen, content was the focus whilst providing speed and quick responses across the entire system, this allowed each store (global markets) complete control for bespoke screen and device arrangement.

Tech Stack

• HTML5/CSS3
• Javascript/Nodejs/Angular
• Socket.io
• ES6/Babel/Eslint
• Grunt/SASS
• Local Storage
• Custom Metrics
• Projection mapping
• Canvas
• 4k Image/video delivery
• GPU optimised rendering/animations

Canon — Immersive digital experience was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

Kickoff’s assets directory resides in the root of the repo, it contains the framework’s source and compiled files. What if you needed the assets directory, not to be served from there but from another location? For example, a Wordpress theme would ideally serve assets from within the wp-content/themes/ directory. Wouldn’t trying such a thing be a massive pain in the arse? Normally I’d agree, but in Kickoff’s case its simple because we have a global config that allows developer to changes these kinds of things with extreme ease.

Here’s what you do

Apart from manually moving the directory, you need to edit 3 lines of Kickoff’s global Grunt config, in _grunt-configs/config.js to be exact. Change the values on lines 9–11 to point to the new location, for example:

srcDir  : ‘wp-content/themes/your-theme/assets/src’,
distDir : ‘wp-content/themes/your-theme/assets/dist’,
tempDir : ‘wp-content/themes/your-theme/assets/temp’,

And that’s it. But there’s more…

As a bonus, you could separate the locations for assets/src and assets/dist as there’s no reason why they need to be together.

#tipsForKickoff

To find more tips like this for Kickoff, lookout for the #tipsForKickoff hashtag

How to painlessly move Kickoff’s assets directory was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whether you use Google Analytics or another provider, adding tracking events to a site is often a painful experience. Events usually have to be defined in javascript which can make it tricky to dynamically change parameters based on certain criteria. Wouldn’t it be nice to define events within the markup so that hundreds of click events can be left free from your javascript code? Trak.js does just that.

Put simply, trak.js is a wrapper for any analytics API. By default it uses Google Universal Analytics but you can override this with the older ga.js or Google Tag Manager if you wish, or you can even add custom event trackers as well, instead of Google Analytics.

Using trak.js

There are two main ways to use trak.js, as data-trak attributes in your markup or in your javascript code.

data-trak attr implementation:

<a href="#pagehref" data-trak='{"category":"Test category","action":"Test action","label":"Test label"}' title="1 title">link</a>

Custom trigger type (new as of v0.4.0)

data-trak attrs can also define a custom trigger type instead of click. Now mouseover, touchstart, focus, blur or any other valid event can be used to trigger a trak event. Just add “trigger”: “eventName”to the options object. See below for an example of this using the focusevent:

<!-- Triggered on focus -->
<a data-trak='{"trigger":"focus","category":"Test category","action":"Test action","label":"Test label"}' href="#pagehref">Custom trigger type</a>

Javascript implementation

trak.event({
    category: 'engagement',
    action: 'signpost',
    label: 'page.href'
});

trak.event({
    category: 'engagement',
    action: 'signpost',
    label: 'page.href',
    value: 10,
    nonInteraction: true,
    eventName: 'This is a Google Tag Manager event name'
});

API Reference

Arguments object: (these are all optional)

category: A string value of the category value to set
action: A string value of the action value to set
label: A string value of the label value to set
value: An integer
trigger: A string value of a valid event name: click, focus, mouseover etc
nonInteraction: An integer
eventName: A string value used only with Google Tag Manager. Define your GTM event name here

If any property is left undefined, the browser’s default value will be used instead.

Wildcards

trak.js introduces the concept of wildcards when working with your events, this makes it extremely easy to use more complex values in your events. There are a number of wildcards available for both the data-trakattr and js implentation. These can be used to specify certain options like the page title, the url, the current anchor’s href value and a few others.

• page.href wildcard uses window.location.href as the value.
• page.title wildcard uses document.title as the value.
• link.href wildcard uses this.href as the value.
• link.title wildcard uses this.title as the value.
• referrer uses document.referrer as the value

<!-- page.href wildcard -->
<a href="#" data-trak='{"category":"Rating","action":"page.href","label":"Up"}'>link</a>

<!-- page.title wildcard -->
<a href="#" data-trak='{"category":"Rating","action":"page.title","label":"Up"}'>link</a>

<!-- link.href wildcard -->
<a href="#" data-trak='{"category":"Rating","action":"link.href","label":"Up"}'>link</a>

<!-- link.title wildcard -->
<a href="#" data-trak='{"category":"Rating","action":"link.title","label":"Up"}'>link</a>

<!-- referrer wildcard -->
<a href="#" data-trak='{"category":"Rating","action":"document.referrer","label":"Up"}'>link</a>

Getting the Library

Direct downloads

• Minified (~481 B gzipped)
• Unminified (~1.7 KB gzipped)

Bower

bower install trak

NPM

npm install trak.js -S

More information

More information and the full documentation can be found at our repository on Github. Also, options can be overridden; there’s a debug mode; and most importantly, almost any other analytics APIs can be used.

Improve website event tracking with trak.js was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.

People often ask me about best practices when it comes to using GIFs within email. These include technical considerations, size limits and how best to use them. Fortunately there are some really simple steps you can follow to ensure your animation rocks.

Simple GIF guidance:

• Keep your GIF file size as small as possible whilst maintaining quality
• Make sure the first frame of the animation is something you wish users to see should their email client not support it (e.g. Outlook on the desktop)
• Be subtle with your animation (this is an email so we’re not trying to include an entire movie scene here)
• GIFs are suited to animate illustrations not necessarily photo realism

I know you've all been waiting for them… So here are a few examples I've spotted in the wild by various brands:

The above GIFs obviously had a lot of time and effort put into them. Three of these can be described as cinemagraphs. This is where a single frame on it’s own would make for a good photograph yet part of the image is subject to movement or animation.

When using Cinemagraphs you will want to be careful with file sizes as they can quite easily become too large and take forever to download on a slow mobile connection. They’re so heavy that they even took a while to load on Medium over my work connection.

Check here for more cinemagraph inspiration on Reddit.

Here are some final examples then I promise that’s it. No more GIF spam.

Here we have a GIF from Campaign Monitor. Useful for explaining new system features.

The subtle use of movement on the present above adds a little intrigue to this customer offer email.

Time for a little expanding on my simple guidance list above.

How large should my GIF file size be?

So you want to make an awesome looking GIF but you’re not sure on the file size you should be aiming for. I'm often asked what the maximum size of the file should be but I’ll never give you an exact answer.

When creating your GIF the answer will depend on:

• The design of your GIF
• What you intend to accomplish
• A little common sense when it comes to knowing your target audience

You’ll know that the more data a user has to download the longer it will take to display. You also need to keep in mind that many users will be opening your emails on mobile devices which means they could be on slower connections and a data usage tariff. As such it’s probably unreasonable to hit them with anything large in size.

To give you an indication of download speeds available over mobile here in the UK this report from Ofcom states that the average 3G connection speed in several major cities is currently 6.1Mbps.

This is by no means a highly accurate representation of the entire country.

Taking the average 3G connection speed of 6.1Mbps if you were to create a 500KB animated GIF, in theory, this would take 0.65 seconds to download. You can easily get results for yourself by typing something like this into Google:

500 kb over 6.1mbps

It’s up to you to decide if that’s acceptable for your users. Why not test it? Also keep in mind the total weight of your email. Not just the animated GIF.

Some email broadcasters will also limit the file size of images they broadcast. This is a defensive measure on their part to help prevent accidental emailing of large files to potentially millions of people. That 500KB GIF you have sent to a million people, even if hosted on a server, is a lot of bandwidth. Make sure to check with your email broadcaster on size limits.

Final Thoughts

The nature of the GIF file format is optimised for use with solid colours rather than gradients. This is down to the compression algorithms used within the format being more efficient at storing areas of solid colours than say the constantly changing shades of colours found within photos or gradient effects.

This means GIFs in general lend themselves to more illustrative purposes rather than photo realism. Obviously, just like the cinemagraphs above, as long as you are careful there are exceptions.

GIFs become animated by adding additional frames to the file. Therefore the longer your animation runs the larger your file size will be. This is primarily the reason why you should be aiming to keep your animation as short and as subtle as possible. Perhaps aim to make it look great whilst looping rather than animating something once and stopping.

Hopefully after reading all of this you now have enough information in order to know when you should and should not use GIFs within your campaigns. Also how to make them as effective as possible when using within emails.

Now go get creative!

For further reading and credit to people whose GIF’s I may have re-used above check out these great posts on the same subject:

https://litmus.com/blog/a-guide-to-animated-gifs-in-email
https://www.campaignmonitor.com/blog/post/3682/animated-gif-support-in-email/
http://www.adestra.com/using-animated-gifs-emails/
http://blog.raventools.com/animated-gifs-in-emails/

Using animated GIFs in Email was originally published in TMW Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.