Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Using the Preview screen

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

When you create each page for your site, it will be in work-in-progress (WIP) stage and won't go live on your site 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. 

page buttons

The Preview screen shows you exactly what your page will look like when it goes live. Additionally, in the Preview screen, you can switch between different device views, manually Resize and Rotate it, and compare your edits to previous versions of the page. 

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 your content looks its best.

Preview different devices

When you Preview a page, it will show you how it will look on a desktop device by default. We recommend checking how it will appear across all devices, using the device dropdown 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 exactly 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.

page preview on a desktop device and a mobile device

Resize and Rotate your Preview

Some users may be viewing 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 320px. This corresponds to the screen size of smaller or older mobile phones.

page preview rotated

Compare previous versions

You can compare your newest edits to previous versions of the page using the Version to Compare dropdown 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.

compare versions dropdown menu

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.

inline edits of different versions on page preview

What else?

Was this article helpful?
0 out of 1 found this helpful