When you create each page for your site, it will be in the work-in-progress (WIP) stage and won't go live until you Publish it. But before you Publish a page, you need to Preview it to ensure all the content is correct and that it looks as it should.
The Preview screen shows you exactly what your page will look like when it goes live. Additionally, on the Preview screen, you can switch between different device views, manually Resize and Rotate it, and compare your edits to previous page versions.
It's essential to preview your page on different devices as, for example, a page's content may look fine on a desktop but be too long on a mobile device. Previewing content on different devices is a great way to ensure it looks its best.
Preview Different Devices
When you Preview a page, it will show you how it looks on a desktop device by default. We recommend checking how it will appear across all devices using the device drop-down menu in the top-left corner of the Preview screen.
As you select from Mobile, Tablet, or Desktop, the Preview will show you each device's different styling. We recommend manually resizing the Preview window after selecting the device to simulate how the page will look on a smaller screen. For example, while your OC General page may have a left-hand navigation menu on a desktop, mobile and tablet devices will automatically remove it to save screen space. For similar reasons, all side panel content will be moved below the body content when a page is viewed on smaller devices.
Using this feature ensures that your content is readable and relevant and allows you to check how any interactive elements (such as accessible tables, accordions, tabs, maps, or embeds) are functioning on smaller devices. We strongly recommend you preview responsive tables on all devices to ensure they are fully legible.
Resize and Rotate Your Preview
Some users may view your site on handheld devices of various sizes and orientations. You can use the Resize and Rotate options to simulate how your page will look to them and if they're fully legible at those dimensions. For example, you could check that your headings are short enough to fit one page on a small mobile device and that any nested images don't interfere with the text too much.
To use these features, type in your desired Width and Height, then select Resize. Select Rotate to switch orientations. Please note that the minimum page width that OpenCities templates support is 320 px. This corresponds to the screen size of smaller or older mobile phones.
Compare Previous Versions
You can compare your newest edits to previous versions of the page using the Version to Compare drop-down menu in the top-right corner of the Preview screen. By default, this will be set to 0 - None, meaning it's only displaying the current WIP version without any comparison. Each number corresponds to a version, with 1 - [your Page name] referring to the first version created.
Once you select a version to compare, you'll see the options to compare the Page or the Fields. Page will display what content has been added or removed with inline edits – it will highlight new text and strikethrough deleted text. The Fields display is a side-by-side comparison of each field of your current WIP page and the previous version.