When distributing your Docs to your audience, they must be good for viewing on different screen sizes. Whether your audience is viewing your content on a small laptop or a massive TV screen, while you present it, you want to make sure your presentation looks professional and that all available spaces on the screen are responsive.
In this article, we'll walk you through the process of scaling elements for viewing on large screens. To put it simply, you'll need to duplicate your standard Foleon Doc and tailor blocks, columns, and elements of the copy specifically for large TV screens.
In this article
In the Editor, you'll need to create two separate Docs, and the only difference between them will be the scaling of the elements.
💡 To make sure it looks good, you'll need the help of a browser extension, like the Window Resizer extension. This extension adjusts the dimensions of your browser window to simulate different screen resolutions.
Regular screen distribution
That's how you usually create Foleon Docs. For the standard Foleon Doc experience, we aim for a more paired-back viewing experience across different devices, from small laptops to desktop monitors.
Large screen distribution
This one should be a copy of your standard Foleon Doc. The difference will be focusing on scaling everything up for your TV presentation. In this case, because we'll be sharing the screen full-screen, the text, images, and elements should be increased just to fill the available space.
For TV distribution, the specific Doc created for that increases the text, and images, and fill in the space a little better for your presentation.
Best practices
- Each block should be full-height and full-width to maximize visual impact.
- Create a scroll-down button that seamlessly transitions between slides within the Foleon Doc. Clicking this button should smoothly navigate to the next slide, creating a cohesive viewing experience.
- To ensure good results, test on a screen to scale, and make adjustments where needed.
- Try to keep your content within “full-height” blocks that have ample space in them to prevent internal column scrolls (this can be mitigated from testing on the screen size anticipated)
- Keep your scroll-down button set to “always visible” so you can jump to multiple blocks down a scrolling page smoothly.
- For presentations via HDMI, ensure that your computer display settings are configured appropriately, ideally matching a resolution close to 1920x1080. Consider adjusting settings such as the mirroring ratio to fine-tune visual output, bearing in mind that settings may vary across devices.