Project Management guidelines for Narrative Projects
- Sylvain Paillard
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:
Split your layout into Layout Blocks and give them generic names (the same Layout Block can be appearing several times)
Consider defining sub-blocks so use can configure different arrangements without defining new templates
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:
title
banner-slider
banner
video
product-slider
product
Then define a flexible set of parameters for each Layout Block:
title
Parameter name | Format | Example value | Description |
|---|---|---|---|
title | Localized Text | Welcome to our home page | The title of the page (h1) |
sub_title | Localized Text | Discover here all the great products you can buy | (optional, not displayed if empty : sub-title appearing below the title |
banner-slider
Parameter name | Format | Example value | Description |
|---|---|---|---|
full-width | boolean | true | the banner should take the full width of the screen |
transition-speed | seconds | 10 | the time to wait until automatically transiting to the next slide |
banner
Parameter name | Format | Example value | Description |
|---|---|---|---|
img-desktop | Localized Path | media/en/banner_01.png | The image source for the desktop in every language |
img-mobile | Localized Path | media/en/banner_01_mobile.png | The image source for the mobile in every language |
title | Localized Text | Buy this brand! | The title appearing on top of the image in the banner |
sub_title | Localized Text | Discover here all the great products you can buy | (optional, not displayed if empty : sub-title appearing below the title of the banner |
button | Localized Text | Order Now | Text appearing on the Call-To-Action Button |
video
Parameter name | Format | Example value | Description |
|---|---|---|---|
title | Localized Text | Watch our great video | The title to display above the video |
video_url | Localized Url | youtu.be/myvideo | the url of the video |
product-slider
Parameter name | Format | Example value | Description |
|---|---|---|---|
amount | integer | 4 | the number of products that should appear next to each other in one display |
transition-speed | seconds | 10 | the time to wait until automatically transiting to the next slide |
product
Parameter name | Format | Example value | Description |
|---|---|---|---|
Product Name* | Localized Text | My product | The name of the product |
Product Image* | Localized Path | media/en/product_01_small.png | The image of the product |
Price before discount | Numeric | 18.50 | The price of the product before discount |
Price after discount | Numeric | 15.90 | The price of the product after discount (same as before discount in case of no discount) |
URL | Localized Path | product/product_01 | Path to the product detail page |
* 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:
We suggest to define the following Layout Blocks:
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)
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)
A products container Layout Block, e.g.: “small-product-list”
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:
We suggest to define the following Layout Blocks:
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)
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)
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
A blog Layout Block: “blog”