Introduction

To plan a Narrative Projects is primarily the same as to plan for a new Layout as you would normally do.

Whether you work with schematic mock-ups or fully designed visuals, you can prepare your layout as you would normally to present them to the client for review and adjustments.

But instead of ending up with a static layout which has been programmed in the web-site, you will have a configured dynamic layouts which can easily be changed and partially or fully re-used for other pages, even if the content is fully different. They can also be modified conditionally (which means that a different layout appear for different visitors or for different A/B Test variants).

The key differences when you are planning a Narrative Projects are:

1. Split your layout into Layout Blocks and give them generic names (the same Layout Block can be appearing several times)

2. Consider defining sub-blocks so use can configure different arrangements without defining new templates

3. Define what parameters each Layout Block needs for extended re-usability

How does it work?

Each Layout Block is defined formally with a name and a set of formatted parameters. The parameters cover both the content which should be displayed (e.g.: the content of a banner, like the image, title, sub-title, etc.) and visualization options (e.g.: should the banner appear full-width?, how long should it take for the banner slider to transit to the next slide? …).

After the Layout Blocks have been declared into Boxalino Admin (How to declare your Narrative Layout Blocks ), the administrator of Boxalino Intelligence Admin can then configure a narrative (first in a static way : How to create a static Narrative and then in a dynamic way).

As a result, when Boxalino Narrative API is called (without giving any indication in the request about the layout), the full layout instruction and content is returned, so the front-end only has to loop through the Layout Blocks returned in the order provided and to render the related template of each Layout Block with the content and visualization options returned in the Layout Block parameters.

Simple Example

For example, the following layout could be split into 6 Layout Blocks:

1. title

2. banner-slider

3. banner

4. video

5. product-slider

6. product

Then define a flexible set of parameters for each Layout Block:

title

banner-slider

banner

video

product-slider

product

* Please note that in practice the product Layout Block is a special case where these parameters will not need to be defined as Layout Block parameters, because they will be returned in the bx-hits parameters according to the requested return fields. However, it is good to document it like the rest for the project management.

Give good names to your Layout Blocks

Define and name your Layout Blocks in with names independent of the User Case or Type of content, but instead define them according to their function to render the visual results.

For example, do not name a Layout Block : “Brand Banner”, because even if it is in the use-case of your project to have Banner displaying brands banners, the Layout Block will not be specific to brands. Instead chose a name which is describe what the template does, for example : “banner-wide-button-right” to indicate for example that this banner takes the whole wide horizontal space and displays a button on the right of the banner.

Define your container Layout Blocks for re-usablity

Separate Container Layout Blocks from content Layout Blocks when applicable.

Here are some concrete examples:

Example #1:

For example, if you have like here a banner on the left and a block of product recommendations on the right:

Open

We suggest to define the following Layout Blocks:

1. A container Layout Block, e.g.: “2-columns-66-33” to indicate the first column will be 2/3 and the second column will be 1/3 of the width (you can also have a “2-column” template and set the % split as a parameter)

2. A banner Layout Block (which, if possible, should be re-usable outside of this container to be displayed in a full width situation as well)

3. A products container Layout Block, e.g.: “small-product-list”

4. A product Layout Block, e.g.: “small-product-img-left”

Example #2:

For example, you could have a small form on the left and 2 blog entries on the right:

Open

We suggest to define the following Layout Blocks:

1. A container Layout Block, e.g.: “2-columns-33_66” to indicate the first column will be 1/3 and the second column will be 2/3 of the width (you can also have a “2-column” template and set the % split as a parameter)

2. A Contact-Form Block (which, if possible, should be re-usable outside of this container to be displayed in a full width situation as well)

3. A blogs container Layout Block, e.g.: “blog-slider” (which also should be re-usable outside of this container to be displayed in a full width situation as well

4. A blog Layout Block: “blog”