Home
Do you know how to make a video of a responsive website as it appears on a mobile phone?
  v5.0 Posted at 17/02/2015 9:19 AM by Duncan Hunter

​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.jpg 

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

Mobilephone-emulator-chrome.jpg
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 Camtaisa, set the video canvas to be HD for better video quality on YouTube.
    Screen Shot 2015-02-16 at 12.23.19 pm.png
    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.

Example video​
You can watch an example of a video shot of an emulated mobile view using these toolsdescribed in this article here.​ 
​​
​Additional resources



Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments: