When creating tutorials (video or otherwise) for a responsive web app, what size should I show the interface at? Mobile? Desktop? Should they be separate videos?

  • What exactly are you covering in the videos? The content or the layout or the interactions?
    – rk.
    Aug 23, 2013 at 1:46
  • @rk. — Possibly both, but mostly focusing on the interactions. An example could be "How to add your first entry". Aug 23, 2013 at 7:13
  • @DesignerGuy What do you mean by the tag "onboarding"?
    – kontur
    Sep 29, 2013 at 12:44

3 Answers 3


The video/tutorial content should be specific to user's context. So for a smartphone breakpoint, the tutorial should reflect the smartphone interface and so on.

The idea of help/tutorial is to give answers to the user and if the user has to translate it from one breakpoint to another, it put much more cognitive load on them.


I do not know what you want to do however, you should focus on the scenario of what you want to show. I think that the video should be divided by actions rather than screen sizes.

  • In which actions do you think that the user wants to use mobile screen view?
  • In which actions do you think that the user wants to use desktop view?

After designing your video scenario, the tool choice is another topic that will have effect on the quality. In my own experience, I used Camstudio (a free tool) and you need to be careful about codec choices. Some of the codecs are decreasing the quality while you are editing the video.

I recorded the same flow twice because of a bad quality (codec problems). Lagarith is one of the best codec that you can find for screen recording purposes.

If you are filling any text or text-box interaction, you should zoom on action (a little bit) from your browser since the screen recording depends on your screen resolution. When you want to zoom into these actions while editing (especially with adobe tools), having a pixelated view will not increase the overall experience.

For mobile recording, you should clear about what kind of actions does user take? Touch, slide and its direction.

Good luck with your video tutorial.


You should definitely show both mobile and desktop (and possibly a third, medium size for smaller tablets like the IPad Miniand Kindle Fire). Your Desktop interface should be at least wide enough to accommodate the smallest screen size currently in use (generally accepted to be 1024px) but to achieve maximum effectiveness, should be wider to show right and left margins and negative space. With Responsive frameworks such as Zurb's Foundation and Twitter's Bootstrap, the smaller screen widths can be simulated by resizing your browser down past the media-query breakpoints set in your css, so there is no need to do separate videos.

  • Doesn't zurb foundation provide a test-drive style javascript plugin to get around the need for a video?
    – Racheet
    Sep 24, 2013 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.