Your Interactive Publication in 6 steps!

You are 5 minutes away from your digital publication! Check out our Tutorial below for detailed explanations on how you can quickly create your interactive content.

This document is addressed to all those who wish to create a digital brochure, an interactive press kit, a mini-site, etc. Follow these 6 steps to a successful interactive publication.

If you have not downloaded the new version of the plugin, please follow the steps here

Step 1: create your InDesign file.

You will need two different InDesign files:

  • a file for your publication,
  • another to group all your popups.

Step 2 : set the pages display mode for your publication. 

Choose the most appropriate mode for your output.

Plugin - Configuration du projet
Plugin - Project configuration

A - Double page mode (plugin screenshot - A )

Create the file for your publication in A5 format and select the double page mode. On a computer, the double pages will be displayed side by side in landscape mode. On mobile and tablet, the pages will be displayed one after the other in portrait mode. This mode is preferred for “mobile friendly” publications. NB: all pages must be in A5 format.
Example: Anpère Magazine

Computer
Ordinateur
Tablet
Tablette
Mobile
Mobile
Concerning the “Double page” mode, now you have the option to choose a Simple page cover, a Double page cover or to Reorganize pages manually.

With this new option, you will be able to create more imposing responsive publications.

You can alternate “Double Page” spreads with “Single Page” spreads.

B - Simple page mode (screenshot of the plugin - B )

Create the file for your publication in A4 landscape format. On computer, tablet and mobile, the pages will be displayed one by one in full screen. The mobile experience is better in landscape mode. NB: all pages must be in A4 format.
Example: Renault Press Kit

Computer
Ordinateur
Tablet
Tablette
Mobile
Mobile

C - Cross navigation mode (screenshot of the plugin - C )

Create your document by defining a width common to all your pages as would do for a site (we advise you 1366 px for the width).
Then set the height of each page (each page can have its own height).
This mode is ideal for reproducing the ergonomics of a “mini-site”.
Example : WP mini-site

Computer
Ordinateur
Tablet
Tablette
Mobile
Mobile

Step 3 : optimize the readability of your publication.

1 - Density of text and information

Whether you start from an existing document or decide to create your publication “from scratch”, avoid putting too much content on the first level of reading.
When there is too much information on a page, consider moving some of your content into a popup to optimize the reading experience.

Here are two examples to show you how to simplify the first level of reading.

Here we added pages.

Print document

High density of text.

Page A4
A page in A4 format

Digital document

Less text, larger images. The double page mode for mobile is appropriate.

Pages A5
Two pages in A5 format

Here, we have deported part of the text in popups (second level of reading).

Print document

High density of text.

Page A4
Une page au format A4

Digital document

Less text, larger images. The double page mode for mobile is appropriate.

Pages A5

2 - Typography

You can keep your typography. You are no longer limited to web typography.
Always check if your text is readable on the devices you are targeting. To test your desktop version, click
“Preview” from our plugin.
Use the “Share” function to test it on mobile and tablet.
NB: the simplest rule is to double all the fonts sizes.
Example: if your font size is 9 on your print version, it will be 18 on its digital version.

The texts must be regrouped on the same layer, which is placed at the top of the stack.

3 - Image optimization

Optimize images before adding them to the document: only use images under 2048 px wide. Or 2048 px high.


Step 4 : enrich your publication.

You can now start enriching your publication!

First select a button (made with the “Buttons and Forms” panel in InDesign) or create a rectangular frame to create the enrichments A to E here below.

Enrichissements
Plugin - Enrichments

A - Animations (screenshot of the plugin - A)

  • Pre-animated resources. You will find buttons and animated graphics, slideshows and animations of titles to download on Webpublication academy. A simple copy and paste of the resource in InDesign and some modifications (color, text) will be enough to adapt the animation to your publication.
  • InDesign animations.
    Use InDesign palettes (Window> Workspace> Digital Publishing) to simply make your own animations
  • Animate or HTML Animations.
    Compress your Animate or HTML animations in .zip format before importing them. Then create a rectangular frame , select “Enrichment > Animation” using the plugin and then upload your animation.

B - Video (screenshot of the plugin - B)

To insert a video into your document, create a rectangular frame where your video will be placed. Then select “Insert a ideo” and upload it. Our solution will convert your video automatically to mp4 format. You can also choose to insert a Youtube link.

C - Go to page (screenshot of the plugin - C)

To create a direct link to a page in the publication, click “Go To Page” and enter the number of the page where you want to redirect your reader.

D - Panel (screenshot of the plugin - D)

Select a button (made in InDesign with Buttons and Forms) or create a rectangular frame to apply one of the following actions:/p>

  • Share: Opens the sharing panel that allows sharing on mail, social networks etc.
  • Thumbnail: Displays the thumbnails of the publication.
  • Favorites: Displays the Favorites page.
  • Search: Opens the search page of the publication.
  • Summary: Opens the contents panel of your publication.

E - Background (screenshot of the plugin - E)

Set the background color for the active page of your publication.

You can also enrich your popups with rich media content!
Your popups can contain InDesign animations, videos, images, pdf, as well as links to pages in your publication or to external sites.

If you add an image behind a mask larger than this same image, the export will generate a very heavy PNG image. And the empty area will be exported as transparency.


Step 5 : add your popups.

Create a new InDesign file that will group all your popups. Your popups should be the same width (we recommend 1366 px wide for a compatible desktop and tablet, and 600 px wide for compatibility computers, tablets and mobiles) but their heights may vary.
Example mypopups.indd.

Plugin - Project Configuration

n our plugin, go to the “Project” tab, and apply the “Popup” mode (screenshot of the plugin - A). Your InDesign popup file is now created. Save each active page using the plugin, this action will create a popup per active page on our solution. Having all the popups in a single InDesign file it is very practical.

Plugin - Enrichissements
Plugin - Project Configuration

To link your popups to your publication, create a button or a “Rectangular Frame”  in your Publication file. Select it and click on “Open popup” (screenshot of the plugin - B).

Your popup can contain InDesign animations, videos, images, pdf as well as links to pages of your publication or to external sites.


Step 6 : upload your publication and customize the interface.

You’re almost done, all you have to do is to complete your publication!

In the plugin, click on “Project Completion> Manage Settings” to set the final details for your publication.

You will be redirected to our platform. If you weren’t already logged in, enter the credentials of your account (the same as for the plugin).

Now complete your publication:

A - Settings (screenshot of the plugin - A): set the parameters you want to activate. Release dates, Google analytics code, interface language etc.

B - Design (screenshot of the plugin - B): customize the interface with your logo, choose the icons, set the color for the bar, for the background etc.

C - Integration (screenshot of the plugin - C): get the url of the project, or download your master.

D - Publish (screenshot of the plugin - D): publish your publication to a definitive URL (50 credits).

NB: the “Share” function (screenshot of the plugin - E) allows you to validate, for free, your projects with your customers or your colleagues.

+44 203 286 7919