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

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.

❌ Figure: Bad example - Using your browser makes it hard to see the video is a mobile phone demo

✅ 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

Figure: How to adjust the video canvas in Camtasia to export HD video to YouTube

1. You can directly upload your video to YouTube from Camtasia by clicking on share in the main menu and entering your credentials