Do you know how to make a video of a responsive website as it appears on a mobile phone?

Last updated by Tiago Araújo [SSW] almost 2 years ago.See history

This rule has been archived
Archived Reason: Irrelevant - Follow https://developer.chrome.com/docs/devtools/device-mode/ to get a responsive view on a browser

Making a video of a responsive website as it appears on a mobile phone takes some extra care. If you do not zoom in correctly or use the right browser tools your video can be too small to see or it may not be clear it is a mobile emulation.

You should use Device Mode & Mobile Emulation in the Chrome browser to make a video an emulated mobile phone view.

browser bad view for video
Bad example - Using your browser makes it hard to see the video is a mobile phone demo

Mobilephone emulator chrome
Figure: Good example - Using Device Mode & Mobile Emulation in Chrome makes it clear the video is a mobile phone demo

Steps to make a good mobile phone video demo

  1. Use Device Mode & Mobile Emulation in Chromes Dev tools. You can watch or read a great intro to this tool on the Chrome Developer Website
  2. Choose the mobile phone size you want to emulate
  3. Use Camtasia or an alternate video screen capture software of you choice that allows you to zoom in post production. Unfortunately this is not available in Snagit, which we normally suggest to use when making screen casts
  4. If using Camtasia, set the video canvas to be HD for better video quality on YouTube
    Screen Shot 2015 02 16 at 12 23 19 pm
    Figure: How to adjust the video canvas in Camtasia to export HD video to YouTube
  5. You can directly upload your video to YouTube from Camtasia by clicking on share in the main menu and entering your credentials
We open source. Powered by GitHub