While we cannot guide you step-by-step in the specifics of which screen resolution to best capture as it depends on how your site is constructed and how you want to showcase your app, we have included some best practices to consider when capturing your screens.
-
Adjusting your device's screen resolution
Before starting to capture screens for your demo, please think about the best resolution and make sure you use and adjust your device for capturing at your desired resolution. You should test the viewing experience on the demo before moving forward with any extensive edits to make sure the content is displaying as expected.
Changing resolutions for For Mac devices
Changing resolutions for Windows devices -
Check your HTML Environment resolution
A quick way to check your screen capture size is to set your screen editor width to the Default Width. -
What is your customer’s standard screen size?
According to StatCounter.com, currently, the most common screen resolution is 1920×1080. Other resolutions in the top five include 1366×768, 1280×1024, 1024×768, and 768×1024.
While there are many tools to help you resize your window, one commonly used one is Google's Window Resizer: Click Here -
What resolution is too low to allow for a good view of your product?
Depending on how responsive your application is, users viewing your demo on a device with a lower resolution, such as a mobile device, might not have a good experience trying to view the demo. For this reason, we recommend setting up fallback behavior that provides the user with this screen too small warning when the viewing resolution is too low for the demo to be displayed. -
Optimizing your replay for an iframe
We suggest picking an initial capture size that is closer to the expected display size as it will display as captured. For example, capturing on a 1920x1080 screen resolution if you're expecting to display your HTML Environment in a 1920x1080 iframe.