app intro template
October 20, 2014 | 30 Feedbacks

Mobile App Introduction Template

A basic template to showcase the best features of your app, enriched with a video slider for a better user understanding.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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 app features slider is an unordered list: each item of the list contains a .cd-caption element (feature title and description) and a .cd-image-container element (feature image/video).

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:
app intro template
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.

If you want to learn more about the HTML5 video element, check this article on HTML5Rocks.

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!

Changelog

Oct 20, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • http://www.thedesignflex.com/ The Design Flex

    Simply awesome claudia :)

  • Yaswanth Yashu

    simply and fantastic

  • Tom

    Great stuff. It would get even better if you integrated it with the POI [http://codyhouse.co/gem/points-of-interest/] project. :)

  • http://www.kevinmamaqi.com/ Kevin Mamaqi

    Very nice and simple, love it!

  • lohtuslabs

    So great! Thanks for writing this article and helping people express information in a much more interactive and visual way!

  • http://www.compzets.com/ Ram swaroop

    No words claudia.

    I need one help, can you name a good app to record screencasts in android?

    • http://codyhouse.co Claudia Romano

      I don’t know any good app! :(

    • Roshan Wani

      recordable.mobi

  • http://www.compzets.com/ Ram swaroop

    I am facing an awkward issue. When i goto step 3 and then come back to 2 and then again 3, the screen becomes blank.

    Has anyone faced this issue?

    • http://codyhouse.co Claudia Romano

      Hi Ram, on which browser are you experiencing this issue?

      • http://www.compzets.com/ Ram swaroop

        Google Chrome 38.0.2125.104

        • http://codyhouse.co Claudia Romano

          Hi Ram. I’m trying to replicate the bug with no success. Did you experience it on Chrome only?Thanks

          • http://www.compzets.com/ Ram swaroop

            Yes, on chrome with Mac OS X (Mavericks). You can even check this link – http://shopmate.compzets.com

          • http://codyhouse.co Claudia Romano

            Hi Ram, I see the bug on your version but cannot replicate the same on our demo. Anyway, since you’re not using video, you should not call the uploadVideo() function in your code. That could be the reason of the bug. Hope this helps!

          • http://www.compzets.com/ Ram swaroop

            Hi Claudia, I tried your solution but no luck, it isn’t working. Thanks for the help anyways. Please do let me know if you find the solution.

          • dominicht

            Hi Ram, try adding this to your CSS.

            .cd-single-item.cd-active.cd-not-visible {
            visibility: visible;
            }

            Worked for me

          • http://www.compzets.com/ Ram swaroop

            Yup! worked for me too. Thanks a lot!

          • dominicht

            Same issue here. It seems like there is a “cd-not-visible” class not being removed on the active element when you move backwards, then move forward

  • Phil

    When you click on very quickly next = > bug :). Chrome Mac

    • Phil

      Is there going to be updates ?

      • http://codyhouse.co Claudia Romano

        Hi Phil, tested it on Chrome (Mac) and it seems to work just fine. Could you provide more info?

        • Phil
          • urbildpunkt

            It’s because the speed of the transition hiding the visibility of the next button is slow enough for you to click it before it disappears on the last slide. I fixed it by just removing the transition from the .cd-inactive class.

  • duplich

    Really Nice work Claudia, I love the animations :)

  • http://www.lorenzozanotto.com Lorenzo Zanotto

    How can I disable the video using ONLY the screen (.png)?
    Thank you!

  • dhruvateja

    hey caludia

    is it possible to add more than 3 slides to the template….

  • Shivakumar

    Hi caludia

    Thanks for good template, i am new to web design. how can we add remove start and add auto sliding to it.

    thanks in advance

  • Rohan K

    Hi, is it possible to continue running the videos on mobile, instead of just using the images?

  • https://buckhorn.marketing BUCKHORN

    I love this UI/UX. Very nicely done.

  • http://www.justresponsivedesign.com/ justresponsive

    http://www.justresponsivedesign.com/top-15-newest-best-and-free-mobile-app-html-templates/

    Thanks for information.
    Very nice and lovely Music and Band HTML Templates.I really want to say Thanks.