Zinio Pro


Custom Template Approach

Template Explanation

For the Responsive view of your stories, a publisher can have a custom set of templates built that defines the presentation of your stories. When you initially define your App, you are asked to provide fonts for Story Title and Introduction. It is here that you can pick the serif and sans-serif fonts you use for headlines, decks, lead-ins, etc... You are also asked to provide a body font in regular, italic and bold.

After the story is extracted from the PDF, it is injected into the CMS. Based on how each element of the story was tagged, each component of the story will occupy its correct place in the story structure in the editing window. For example: headline, body, photos, photo credits, byline, etc... will populate in their respective sections. The templates define how each element will be displayed, where it will be displayed, and the space between each element. 

Best Practices for Template Designs

This document was created to outline best practices when you begin to design your templates for the ZinioPro Responsive Design Solution.



Before we even start outlining the templates creation process, it is important to realize the path your content takes from your print-ready PDF to your ZinioPro Publishing Platform interface.

Simply stated, each element of your content is parsed and tagged accordingly into an XML structure. This means that the components of your article such as headline, byline and body are tagged accordingly within the Prism XML standard. All of the images related to the story are also tagged and the captions and photo credits as well.

Within the body copy, if different headings are recognized within the body copy based on size and font, these headings will automatically be assigned a style before entering into your ZinioPro Publishing Platform interface.

All of this xml is then ingested into your ZinioPro Publishing Platform and each element occupies it’s own place within the story editing interface. For example, your headline and dek (Sub-Head) reside within the title and introduction fields. All of your images for that story appear in your media management panel. The image marked as default will be your TOC icon for that article and it will also be treated as the main image for that article. And all of the body text within your article can be seen in the body editing frame.

Now that we know how your issue is parsed and how each article element appears in the edit section, we can consider how you want your articles to appear as responsive html.


Single Template Setup

Let’s start by examining the simplest setup possible within our system.

As you know, all of your articles contain at least some, if not all of the following elements; Headline, dek, byline, body, pullquote, dropcap, sidebar, images, captions, photo credits, rules, and additional editors.

In the most simple setup, you would provide a Photoshop layout (We supply you with a template and examples) that represented all of these elements in their proper font, color, size, alignment, indentation and the space before and after that they should occupy in relation to one another.


This template would be applied to every single story in your issue and all of your articles would have the exact same look and feel when viewed in the responsive (read mode) view of your articles.

As these templates are applied to each article, the need for more styling can often occur. In a perfect world every story would fit this mold. However, that is rarely the case. The first thing you would probably notice is the use of headings within a story or bulleted or numbered lists that also need styling. Any other special type treatments such as these need to be included in your initial template PSD markup. Remember that we are trying to make this process as automated as possible, so that when this content is ingested into your publishing platform, it already comes over tagged with a style. All we need to do is define the look and feel of that style in the responsive html templates. You can create multiple heading styles with different fonts, colors, space before and after, rule below, numbers, boxes around type, etc… These will all be additional tools you can use if certain types of content need a special type treatment.


Multiple Template Setup (Based on Content Location)

You may want to also have a small set of templates that have the same styling throughout, but each template could present the content in different order, or have different text treatments.

For Example:

  • You could have one template that contains a drop cap and one that doesn’t.
  • You could have one template that justifies your body text, and one that aligns the body text to the left.
  • You could have a template that has a first line indent for every paragraph and one that doesn’t
  • You could have 3 templates that each have a different look for the font colors and sidebars.
  • You could have one template that puts the featured image above the headline and one that puts the image below the headline.
  • You could have one template that has the byline on top of the story and one that has it at the bottom of the story.
  • Or you could possibly have a mix of all the above in a set number of templates.

You would then supply us with however many templates you want, that also have all the additional features represented that could possibly occur within each template such as headings, lists, numbered lists, sidebars and rules.


Section Based Setup (Headers Only)

You may also decide that you want to have different section banners at the top of each article. This setup is much like the single template setup. The only thing that would change is the top section banner.

We would build a series of templates that all had the same functions for text inside each template. This build makes it very easy for you to work within your templates. By applying the template, the section header image would appear at the top of your article and every single article would treat type the exact same way (Think master pages within InDesign).


Section Based Setup (Headers and Content Look Change)

The most complicated setup is the one where you have section based templates where all the elements are presented differently within each section template.

For Example:

  • You create one feature page that has a serif headline and one that has a san serif headline in another duplicate feature template.
  • In the Letters to the Editor section, headers have a different color and there is no headline dek or first line indent. And every letter to the editor needs a rule separating it from the other letters.

It is possible for us to get this granular with the templates, but as you can imagine, this template approval process takes a lot longer than the other aforementioned template setups. Mostly, because of the time we need to build them, test them and for you to approve them.

For this setup it is a good idea to also think about this process like using style sheets and master pages in InDesign.

For Example:

Let’s imagine that you have an InDesign template for the “Letters to the Editor” section. All of the type on that page has body applied and body is 8pts in that document.

In the “Feature” section InDesign template, body is defined as 10pts.

If you were to copy and paste a story from the feature to the letters page, the body copy would appear as it was defined in that template, as 8pts.

That same logic is applied when we make section-based templates where the styling is different in each section. Following that same logic, you create mock-ups of each section with all possible elements, and we create that template. When you apply that template to a story, all the elements of the article will be presented in the same way you created them in the section template.

The most notable thing about setting up multiple templates is how time consuming it can be to make universal changes. Even though the templates are all originally setup to look differently, it can be harder to make universal changes to all of these templates at once.

For Example:

You want all of your Drop Caps to be the same height, line count and color in 4 of your section templates. You decide you want to change the color of the dropcap, and now we have to change it in 3 other templates. You can see where this can be time consuming and confusing unless we have a proper map of how many templates would need to be updated, because they all have the same treatment for a certain element. It would also be a good idea to figure out if there are elements that always appear the same way in each template. If there are, we can actually make an external CSS file that has just these basic elements listed. This could make universal changes to basic elements an even easier endeavor on our side.


Final Thoughts

Whichever template method you choose, the most important thing to think about when designing your layouts is to account for every possible element and variable you would need in your templates based on your content. In fact, your team already has this knowledge based on years of presenting this content in printed form.

For Example:

Your production staff knows that every December there is a special “Gift Buying” section that has lists of items presented in it’s own unique way. These are the types of things that we would like to prepare for by building these templates ahead of time.

It is in foreseeing all these types of issues that we will ensure that we build you the most flexible and agile templates possible. And again, remember that we are trying to make this process as automated as possible, so that it requires the least amount of time spent massaging the content. So of course, the simpler the setup, the least time it will take to get the issue ready to publish.

What Can I Define in a Template?

These are the features you can change in your templates:

  • Font usage
  • Type size
  • Type color/boxed text
  • Rule lines
  • Numbering
  • Space Before/After
  • First line indent
  • Margins
  • Drop Caps
  • Sidebars
  • The order elements appear
  • Captions
  • Photo Credits
  • Default image location

Questions for Custom Templates


  • Should captions always appear, or should captions and sources be able to be hidden depending on the story?
  • Should rule sizes around the image be adjustable?
  • Should rules be removable?
  • Should some images have the same horizontal indent as the body text, while others bleed to the edge?

Section Headers:

  • Do you want the ability to run a photo above a header?
  • How many different headers would you like for your sections?
  • Does your font color/line color vary from section to section?
  • Does your rule line weight vary from section to section?
  • Would it be possible to make generic section headers and swap out section names such as: Food, Sports, News, etc...

Headline/Introduction text

  • Do your headline and Introduction fonts vary from section to section?
  • Does your headline and Introduction color vary from section to section?
  • Does your headline and Introduction font size vary from section to section?
  • Does your headline and Introduction text alignment/indent vary from section to section?
  • Does your headline and Introduction use of uppercase/lowercase letters vary from section to section?


  • We will need examples of literally every conceivable iteration a byline might take. For example: A doubly byline with multiple photographer / illustrator credits, etc. And whether or not some appear at the beginning or end of an article.
  • Does your byline font vary from section to section?
  • Does your byline color vary from section to section?
  • Does your byline font size vary from section to section?
  • Does your byline text alignment/indent vary from section to section?
  • Does your byline use of uppercase/lowercase letters vary from section to section?


Body Text:

  • Will the order of elements change based on section? For example, the byline could appear below the body. Or the main image could appear above or below the headline?
  • Do you want indents? If yes, do you want to use them only sometimes or always? We will need indent examples.
  • Do all of your paragraphs have a first line indent, or does this change by section?
  • What is the alignment of your body text? Does that change by section?
  • Do certain sections have dropcaps or lead in paragraphs?
  • Do the dropcaps always have the same paragraph line height?
  • Is your body font always the same in every section?
  • Do you use Zapf Dingbats mathtype, fractions, or any other special glyphs in your body copy?
  • Do you use rules to separate items in different sections?
  • Do certain sections need different types of lists for things such as a recipe or numbered list of items?
  • Headers within body. How many different header styles do we need within a section template? For example, a story could contain a list that needs a bigger and a smaller type treatment. We need to know the font, size, color, rule or indent involved with these types of headers. These need to be portrayed in the initial templates.
  • Does your magazine logo appear at the end of every story? If so, what sections?
  • Is there any other special text throughout your magazine?. For example, is the name of your magazine a different font, size or color within your body text?
  • Does your pullquote have a different look depending on the section? If so, what sections? These need to be portrayed in the initial templates.
  • Any color changes to fonts or rules based on section need to be represented in the template designs.
  • Do you use inline graphics within your copy such as a logo as a dropcap?
  • Do you have a special treatment for url’s within body text?
  • Do some sections or lists within type have a certain rhythm like using nested styles in InDesign, that we can recreate? For example, header is all caps and bold, price is italic and not bold, followed by body copy, and it repeats that style throughout a list.
  • Are numbered lists present in each section?



  • Do you have a certain sidebar style for each section or is it uniform throughout?
  • Do your sidebars have a frame around them to differentiate them from the story?
  • What is the text inset ratio for your sidebars?
  • Are your sidebars in a colored box?
  • Will your sidebars have a different body font, color, size, first line indent, margin?
  • Will your sidebar need headings and lists? These need to be portrayed in the initial templates.
  • How should the images that appear in your sidebars be aligned in relation to the text and side of the frame?
  • Do your sidebars have pull quotes or drop caps?
  • Will you need to use rules to separate items in a sidebar?
  • Any color changes to fonts or rules within a sidebar, based on section, need to be represented in the template designs.
  • Do you have a special treatment for url’s within sidebars?
  • Do some sections or lists within type have a certain rhythm like using nested styles in InDesign, that we can recreate? For example, header is all caps and bold, price is italic and not bold, followed by body copy, and it repeats that style throughout a list.

Custom Template Workflow

Custom Template Workflow 

  1. Zinio Pro team sends publisher a zip file with examples of different templates layouts.
  2. Publisher provides initial designs as PSD files.
  3. Zinio initially reviews the designs and provides feedback.
  4. The design is updated by the publisher and resubmitted to the Zinio Pro team.
  5. First review of the content on a device.
  6. Publisher approves design for all templates.
  7. Templates are built and applied to an issue in the publisher's Zinio Pro Publishing Platform.
  8. Second publisher review and feedback given to the Zinio Pro team.
  9. Templates are tweaked for final review.
  10. Final review for publisher.
  11. Apps are submitted to customer chosen channels.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk