I'm thinking of a user manual, which documents a web-site-based application.

The manual should introduce and explain the functionality (the various pages) of the application.

The purpose of the manual is two-fold:

  • To minimize the need for in-person training of new users
  • To also serve as pre-sales literature, which introduces the functionality to potential customers.

I expect that user manual would include approximately one page in the manual for each page of the application. Each page in the manual would include some text, and a screenshot.

Here's the question: given that the application is adaptive, i.e. designed for any screen size, how to do the screenshots in the user manual? I want the user manual to be readable on a mobile device too.

Is there a good way to do online user manuals for mobile devices?

Would you recommend having different screenshots at different screen sizes, and serving whichever screenshot size matches the size of the device that's reading the user manual?

Are you able to recommend any example[s] of an online user manual which does this well?

Three things that I don't really want:

  • A manual as a PDF with a fixed (paper-sized) page width that's difficult to read on a small screen (because it needs horizontal scrolling)
  • A manual that is implemented as a video of a walk through with a voice-over
  • Context sensitive help built-in to the application (I want the manual to be readable by people even before they have access to the application)
  • You could include short videos that demonstrate the point you try to cover, even without audio.
    – Alvaro
    Commented Jan 25, 2017 at 13:43
  • Make 3 different videos(Desktop,Tablet & Mobile), play/provide the corresponding video based on users screen size/device. But I would also consider @Alvaro's answer. In-app hints are a good way to go. My experience, no one reads the manual.
    – Mark
    Commented Jan 25, 2017 at 16:28

1 Answer 1


Some thoughts:

A manual is alright but try to see if you can rely better on in-app hints. Check Material design Onboarding, Feature discovery and Gesture education.


(..) serving whichever screenshot size matches the size of the device that's reading the user manual?

I would say no, I might want to check the Mobile phone manual from my Desktop device or the other way round. This is for both situation: if I am "studying" the manual without practicing it or actually practicing (I might find it handy to follow the guide on the phone while using the app on the desktop).


Take a look to Material design guide. Although it is meant to give patterns and doesn't refer to any specific app, it is meant for Desktop and Mobile devices and might give you some inspiration on the way it is structured.

  • I guess the desktop manual viewed on a mobile device wouldn't contain screenshots. Or it would have unreadable screenshots (e.g. shrunk to 25% usual size) which you could click on to see at 100% but which you then have to scroll to see? Or avoid having screenshots of the whole screen, and instead have multiple different figures for different small elements of each screen...
    – ChrisW
    Commented Jan 25, 2017 at 13:51
  • Thank you for the reference to Material -- material.io/guidelines/layout/structure.html has some examples of desktop screenshots that are not too bad viewed on a mobile device.
    – ChrisW
    Commented Jan 25, 2017 at 13:52

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.