After releasing the first stable version of Netgen Layouts (v 1.0) with the most significant new feature being roles and policies, for the version 1.1 we tackled the next most requested big feature - preview
We knew from the start of building the product that we will need to implement some sort of preview eventually, but it was not necessary to have it in MVP. Back then we were focused on “site-building” features while the preview is more a “site maintaining” feature. While developing and building a web site, you don’t need a preview feature that much as there is no production environment with the current live version of the page. In that phase, you simply create and change layouts and check on the frontside. However, when the site goes into production and you want to see the page before it goes live, a solid preview becomes a true necessity.
With many sites based on Layouts in production, the time came to implement a preview to reduce the “angst” and lower the chance of errors and non-wanted changes by editor in order to make the maintenance even easier.
Interestingly, a preview is a commonly requested feature for headless systems. That does sound really awkward as a headless system has only JSON as output :) Now with the preview feature Layouts are actually filling that gap when used as a head for a headless system.
What’s all the fuss
Now, preview per se does not really sound like a big feature. In WYSIWYG system preview is not really needed and in page building systems you just show the draft version of the page. A usual addon is resizing the window so the editor can check how it looks on different breakpoints. And that’s it, more or less.
Well, Layouts are not yet another page building tool. The power of Layouts comes from the fact that “a layout” is decoupled from a page and its URL. It is being mapped to one or more URLs (targets).
The challenge
So how do you preview a layout which is not mapped to any URL? Should the user have the option to select which page to use for the preview?
Which page should the preview render when a layout is mapped to several URLs? Are we able to figure out which pages make sense to preview based on the mapping rules?
We needed to answer these questions to implement the preview in a useful and consistent way. As always, our approach was to make the basic features, without trying to do everything – make it a small MVP, improve it later.
Outcome
Currently, we are wrapping up the preview feature to be released in Layouts version 1.1.
It features a simple switch between edit and preview mode on the top ribbon. Once in the preview mode, the editor gets the preview of the most significant page:
- For simple 1:1 mapping (e.g. home pages or landing pages) it is straightforward to figure out the URL of that page
- For other mappings, we provide a shortlist of URLs for editors to choose from, with the first one used by default. In eZ integration the list is ordered by modification date descending, showing the most recently changed pages (URLs). There is still an option to choose a page manually just in case.
We also have a feature to see the page at different breakpoints opting for a device list. It will be easier for editors to choose iPhone or iPad rather than thinking about resolutions.
We will demo the alpha version next week at our partner meeting in Zurich and at SymfonyCon Amsterdam where we are exhibiting.
Can’t wait to release the v 1.1 :)