Best practices for videos and screenshots

Setup

• Make sure you are using a computer with retina display, especially for video or images that will be used in ads or on the marketing website. This page includes a list of Mac computers with retina display.

• Use Safari or Chrome as your browser. We tend to use Safari whenever we need to take screenshots that include the entire browser (example).

• Resize your browser. What looks normal on your computer screen will be sized down significantly in a screenshot or video, making it hard for the viewer to see. We recommend using browsersize.com to set your browser to 1024 x 768. (Note: For the marketing website, screenshots are roughly 1225 x 716.)

Preparing your demo Dashboard

• When it comes to client-facing screenshots and videos, you should always use a demo Dashboard. Never use a live company as an example.

• Use a demo Dashboard with a wide variety of items. Some examples:

  • Island Tours
  • Adventure Extreme
  • FareHarbor Adventure

• If you’re using your own Dashboard, try to make it as realistic as possible (ensure items have photos and availabilities, don’t name everything “test,” etc.).

• Make sure that all item and website photos are good quality and approved for commercial reuse. Some sources:

  • Pixabay: Free for commercial use, no attribution required
  • Unsplash: Free for commercial use, no attribution required
  • Google Image Search: Go to Tools > Usage Rights and filter by “labeled for reuse with modification”

• Ensure that no API keys or other credentials are legible in the screenshot, and if you’re documenting an API key or credential related feature you must follow the guidelines here.

Front-end / online booking process

• Be diverse with customer names! Instead of always using “John Smith” or “Jane Doe”, try to represent a variety of genders, ethnicities, countries, etc. Use a random name generator if you want.

• Don’t use real phone numbers or email addresses, but try not to make them too fake, either. Instead, do something like “808-555-1234” and “wendy.loh@example.com”.

• Do not take screenshots or video with real credit card numbers anywhere, ever. Always use the test credit card number: 4242424242424242. Try to set the expiration date a few years in the future so it won’t appear outdated as quickly.

• If you want to record the Lightframe booking overlay in action, you can use islandtours.fareharbor.me or another demo FareHarbor Site.

Back-end / Dashboard

• Don’t be logged in as a FH Admin. Create a fake user (with a realistic name, and optionally a photo) and take your screenshots/video while logged in as that user.

  • Keep in mind that users with director permissions can usually see most parts of the Dashboard (Items, Reports, Bank & Payment setup, etc.) whereas users with lower-level permissions may not.

• If taking a screenshot or video of a particular part of the Dashboard, consider including a bit more of the page so the user has enough context to know where that section is located.

  Not very helpful:

  

  More helpful:

  

Note: Keyboard shortcuts are specific to MacOS operating systems.

• To take a screenshot of a specific part of a page: Press Cmd + Shift + 4 (on a Mac) and drag the cursor over the area you want to capture.

• To take a screenshot of the entire browser: Press Cmd + Shift + 4 (on a Mac) then hit the space bar to highlight the entire window. Click anywhere within the window to take a screenshot.

  • On a Mac, browser screenshots will automatically include a drop shadow. To turn this off, follow these instructions.

  • Most times the URL in the screenshot will be something like demo.fareharbor.com/etc. For marketing materials or help pages, you should edit the screenshot to remove the URL or make it something general like fareharbor.com (example).

• Rename your screenshot from the default Screenshot-yyyy-mm-dd at hh.mm.ss.png to something that will allow you or someone else to quickly identify what that image contains.

• For examples of screenshots, check out the Dashboard Features section of our marketing website.

GIFs

Animated GIFs can be used as a visual aid, but we do not recommend using GIFs longer than a few seconds for the following reasons:

• The user may have trouble understanding where the recording starts and ends
• The user cannot pause/resume the recording if they are stuck on a step
• If you’re working on an email campaign, some email clients don’t support GIFs
• Depending on the user’s screen, the quality of the image may be degraded

If you need to insert a GIF into any page hosted by FareHarbor (for example, a help page or the internal changelog), use RecordIt, download the .gif file, upload to WordPress or any Markdown field in FareHarbor, and use the format below in order to render the gif correctly on the page:

![Image description](https://help.fareharbor.com/wp-content/uploads/sites/278/2020/04/ZEvqpFuj2e.gif)

Videos

The easiest method of recording video we’ve found is using QuickTime. If you have a Mac, QuickTime should already be on your computer, but if needed you can download it here.

1. Open QuickTime.
2. Select File > New Screen Recording from the menu.

3. Click the down arrow next to the Record button and select “Show mouse clicks in recording”:

   

4. Click the Record button when you’re ready to start recording,

5. Click and drag to record a specific area on your screen.
6. Click Start Recording and record your video.
7. To stop recording, click the Stop icon at the top of your screen.

8. QuickTime will automatically open your new file. From the QuickTime menu, go to Edit > Trim and trim the last part of the video where your mouse moves away from the browser.

   

9. Review and save the file to a folder on your computer.

Editing your video further

In most cases, the steps above are enough to create basic help videos. However, if you need to do additional editing such as syncing audio or piecing together multiple videos, iMovie (free) or Adobe Premiere Pro (paid) is recommended.

Uploading

Marketing and help videos should be uploaded to Vimeo. If you don’t have access to the FareHarbor login, please log a help page request for assistance.

More tips

• Don’t move too fast! When creating help video, you may find that you need to move your cursor a bit more slowly than you normally would. Otherwise, the viewer may miss a step (especially if they have a slower Internet connection that makes videos choppy).

Using the web inspector

When taking screenshots, you can use your browser’s inspector tool to make quick changes without having to update any Dashboard settings. This can be handy, for example, if you want to change the date or time on a book form or remove the FH Admin badge next to your username in the Dashboard.

Right click on the part of the page you want to change, select Inspect, and manually remove or change the element. You may need to expand the element to see more.