Mobile App Introduction Template

A video is one of the most effective ways to introduce an app to an audience. Users often want to see how the app works before even deciding whether to download it or not. A screenshot could do the work, but with motion being a fundamental part of todays apps user experience, an animated gif and video elements make a difference. A great example is Pinterest Messages website.

Therefore we created a customisable, responsive template which turns into video slider on desktop screen ;)

Note: all videos in the demo have been created in Adobe After Effects, and exported as .mp4 using Adobe Media Encoder. While Miro Video Converter app has been used to get the .webm video format.

Creating the structure

The HTML is structured in 2 main <div> elements (.cd-product-intro and #cd-product-tour) - the first containing the app intro (title, action buttons..) and the second the app features slider - wrapped inside a <main> element.

The video is not directly inserted in the HTML structure, but will be loaded using jQuery.

Two additional <div> elements (.cd-slider-nav for the app features slider navigation and the .cd-loader for the top loading bar) have been added to the main.cd-main-content.

Adding style

On small devices, the CSS is pretty straightforward (you can check the code for more details/comments).On desktop devices (viewport width more than 1070px), we assigned a position: absolute and width: 50% to the .cd-product-intro and placed it on the left side of the screen.For the #cd-product-tour element, we set width: 100% and left: 0 but assigned it a translateX(75%) so that only the phone image is visible.

Here is an image to show you the initial positioning of the template components:

When user clicks the Start button, we add the .is-product-tour class to the .cd-single-item element: a translateX(-50%) is assigned to the .cd-product-intro (to hide it from the viewport) and a translateX(0) to the #cd-product-tour (so that both .cd-caption and .cd-image-container are visible). CSS3 transitions to the transform and opacity values have been added in order to achieve the smooth animation.

As for the li.cd-single-item elements, we assigned them a position: absolute, a width: 100% and left: 0 (they occupy the same space) and used the visibility and opacity property to show only the the active slider.

Note that we set height: 100% to <body> and <html> in order to have a full page content.

Events handling

The videos showing the app features are not inserted directly into the HTML, but loaded only when the corresponding slider is shown for the first time. The data-video of the selected slider image is used to retrieve the video url. Two video formats have been used to support all the browsers: .mp4 and .webm. As soon as the video is inserted in the HTML, the loading bar animation starts. When the video is ready to be played (canplaythrough event occurs), the loading bar animation is completed and the video is played.

One important note:if you check the code, you can see that the videos we have been using have an aspect ratio higher than 1 ( width > height). The videos are inserted in the HTML and then rotated (90deg) using a CSS3 rotation in order to fit the phone frame (awkward, I know!). Actually we started using videos with an aspect ratio smaller than 1 (same aspect ratio of the phone) but they were not shown in IE 9+. It looks like (or at least this is the conclusion we drew after some tries) IE (9+) has issues showing videos with an aspect ration smaller than 1.

If you guys have more details/info about this problem, please leave a comment!