CLM-Friendly HTML5 Presentations

10 Tips on How to Create Responsive CLM-Friendly HTML5 Presentations

Everyone wants perfect content these days. Not just fine, okay, cute-but-skippable things – those who address agencies now mostly have a very detailed vision of what they pay for. Which they totally should, considering how hard it is now to stay afloat the ocean of content that is today’s market space. The company should know how their newly developed content – presentation, app or website – looks, works and even feels before anyone else does. This is why notions like responsive design and compatibility have become so important.

 Neither responsive design nor platform agnosticism are the kind of concepts associated with a particular ‘boom’ year. They are never “in trend”, they just remind of themselves from time to time. One of the first such times was when a broadband service provider boosted sales 10x due to the implementation of responsive design. From that moment on, we saw how important it is to have content displayed in consistently amazing ways on all screens and devices.

With presentations aimed to be shown on CLM, these things are even more important than with websites, since CLM systems once used to be quite separate worlds. Only the recent years have seen the epic breaking of silos – and still, you have to think about different monitoring schemes and different CLM builds in addition to devices and screens.

So, of course, you as an agency are now making responsive and CLM-friendly presentations (or trying to). Here, we gathered 10 tips from experts that will help you organize this process efficiently, and achieve that obligatory goal.

#1. For better scalability, use libraries

The presentation your team of developers is working on now might have quite a lot of functionalities; writing all that code from scratch would be a disaster, so code libraries are a good help. Especially when it comes to enhancing the features that already exist. Frameworks that have reasonably full libraries are a topic of discussion between specialists for this reason, so employing one that they feel comfortable with is a good idea.

#2. Review more often

By review, we mean both reviewing the code (by fellow developers) and the product (by the customers). Frequently reviewing the code “from the inside” is a good way to make the resulting presentation run smoother and better at least because the code itself is “cleaner” – an effect noticed by several specialists and discussed extensively. As for reviewing the product on early stages of its creation (by non-developers), this is a harder nut to crack but some HTML5 platforms come with tools that allow to get the non-tech side to participate. This leads us to…

#3. Get the user’s perspective. As much of it as you can

The art of creating user cases and user stories is very relevant. Whichever approach your team prefers, you can only win by orienting the whole process towards the end user. Every swipe, tap, and move are to be thought of. How is this connected to responsiveness and compatibility? What can be easy and comfy on one device will be a nightmare on a different one. Same with CLM systems.

#4. Don’t invest twice (into the same feature)

Use templates, predesigned modules and all the benefits of modern development platforms. These pieces of code have been carefully developed by programmers who had time for exactly that – careful development. A lot of time. Unlike the teams who work with deadlines. This is the best guarantee the product will function properly and run smoothly. Saving time on developing, say, a complex, interactive element in a presentation, will eventually save you time for more projects.

#5. Think about content and don’t design for a particular device

It is eventually the content that matters to the customer. Those who will get to see your presentation don’t really care what functionality you implemented, they care about what that functionality gives them access to. This means the content should be flexible enough, and easily adapted to look good (and work well) on different screens and devices. If it doesn’t, 8 out of 10 customers on average simply stop interaction, as reported by Adobe. But hey, it’s not all gloomy – HTML5 itself makes adapting much easier, and there are frameworks around with API that let you focus more on the visual side of developing.

#6. Code reusability is a thing

As long as the development standard allows it, whole blocks of code can be salvaged for reuse. The point here is, if you are using a framework (which we assume you do), make sure the code is readable to any developer. This way, even if the project is assigned to different people, they will still be able to pick it up where it was dropped, even if it was initially created for a different CLM system. The more reusable the code is, the cleaner it gets – which contributes heavily to the eventual result, the perfectly functioning presentation.

#7. Find the right balance between sophisticated features and layout hierarchy

The dilemma is whether the end product should be saturated with features (plus imagery, animations, and whatnot) – or it should display perfectly minimalist taste. The former opinion is endorsed by marketers who crave more wow effect; the latter favors good function and “mitigates the choice paralysis” in users. Of course, most of this is to be decided by the customers and not by the agency, but for CLM friendliness and universal compatibility, there needs to be some sort of balance.

#8. Take benefit of well-thought navigation between slides

Practice shows that good HTML5 presentations work by letting the user decide what to see. Not overwhelming with possibilities, mind you! This means leaving space for different scenarios. Imagine how the presentation will be demonstrated. At which points is the user likely to deviate from the linear sequence of slides? How will the representative who shows the presentation make the transition? Imagine there’s a confusing situation where an image doesn’t load properly. Where should the navigation element sit so that it’s used immediately? This principle functions as a safety belt that has saved many good presentations from modestly usable devices.

Another important point is consistency. Navigation elements have to be predictable in location and use to be used with ease and minimize the amount of unnecessary actions with the interface – this is what sets high-quality user experience apart from the average.

#9. Animated elements and their philosophy

Sure, the ability to use different complicated elements, including animations, 3D graphics, and special effects was one of the things that made HTML5 popular in the first place. Honestly, without them, a presentation would be hardly different from a simple PDF/PPT. On the other hand, there’s a whole philosophy built around these features specifically to avoid overloading the product with unnecessary information. Even Google took part in shaping the view about two years ago with the brilliant:

[motion should be] meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

What we add to all this is, animations are something very screen-specific and need to be readjusted for different devices – vertical and horizontal orientations are just the tip of the iceberg here, so your development standard/framework should facilitate constant improvement.

#10. Think about CLM/CRM monitoring schemes in advance

One of the most important things that distinguishes CLM-intended presentations is that they aren’t just watched or used as shopping forms. Often, there are KPIs to be transferred from different elements in the presentation, and the process of making CLM-friendly content could have gone way better in many cases if the developers knew what exact CRM/CLM system they were dealing with. However, in many cases enabling data transfer is kind of hard because hey, who likes reading a whole bunch of CLM specifications and guidelines? Again, the solution here is to use frameworks that allow for compatibility with major CLM systems and don’t make you read all of them every time to make those key values flow to CRM.

If you are interested in trying an HTML5 development standard that enables near universal compatibility, facilitated reviews and reuse of code, and was carefully tailored to suit those who create CLM-friendly presentations and apps, don’t hesitate! Give it a try by contacting our team. Additionally, you can consider a powerful tool that facilitates collaboration with non-developers involved in the process and see it in action here.