Defining the structure of your browser page(s)
Article-based apps in Twixl Publisher use a concept that we call "Browse Pages" as a flexible way to present your content to readers. While browse pages can still mimic the behaviour of the traditional kiosk that contains different issues, the flexibility goes much further.
The layout of your browse pages will be defined using a grid-based approach. First of all, define a number of columns for your pages, then based on that your page will be divided into a number of equal squares.
Browse pages can be defined as either scrolling vertically or horizontally.
Below are examples of both a 4-column and a 6-column grid with vertical scrolling.
All the items that you want to display will then have a size of one or more squares, and your pages will have different cells, as you can see in the example below.
Each of the cells can display a thumbnail that links to an article, or to other content items like a movie or an image (more on 'content items' can be found here). But it can also be a link to a collection of articles (an 'issue' in traditional speak).
In the "Grid Style" window, you can adjust a number of parameters for a collection, such as the number of columns in your grid and whether scrolling will be horizontal or vertical. You can set different parameters for tablet and phone content.
- Columns: determines the size of the squares that will be the basis for the size of the cells you place on your grid
- Scrolling: determines whether scrolling in your browse pages will be horizontal or vertical
- Padding: refers to the number of pixels reserved on the outer sides of the grid
- Spacing: refers to the space in between cells on the grid
- Colors: set colors for the background of the grid and the text.
Tablet - Phone - Browser
In 1 Grid Style you can define a layout for:
- Tablets: This grid will be used on Tablets
- Phones: This grid will be used on Phones
- Browser: This grid will be used in the Browser Client.
It's entirely up to you whether you want to use separate designs for each rendition or not. You can use the same design as well by using the buttons Copy to Phone, Copy to Tablet and/or Copy to Browser.
ABOUT THE BROWSER CLIENT
The tab Browser Client will only be visible when you activated the Browser Client in your article-based app. See this KB-article for more info about the Browser Client.