- Publish Online outputs a digital version of an InDesign document that works on any device and in any modern web browser, and supports all interactivity included in the InDesign document. Click the Publish Online button or choose File Publish Online, set the export options, and click Publish.
- The electronic publishing process follows some aspects of the traditional paper-based publishing process but differs from traditional publishing in two ways: 1) it does not include using an offset printing press to print the final product and 2) it avoids the distribution of a physical product (e.g., paper books, paper magazines, or paper newspapers).
- InDesign works on Windows and Mac. To use it, you need to have a subscription to Creative Cloud. That can cost you $20.99 every month for a single app—or $52.99 per month for the whole Adobe suite. InDesign is a desktop publisher which works best for users with advanced skills, so expect a steep learning curve.
Just like design, writing is also an iterative process, and it often takes many revisions to get it right. Achieving the perfect balance between graphics and text means rounds of back and forth between designers and writers, using multiple tools. This collaboration process can be challenging and time-consuming. We need tools to help us work together in a simpler and more efficient manner.
InDesign: Publish Online (2016) with Diane Burns. Learn how to publish interactive documents to the web with Publish Online, a great new sharing feature built into InDesign CC. 1h 2m Beginner May 03, 2016 Views 38,014. InDesign for Editors with Nigel French.
InDesign is a powerful layout design tool, especially for multi-page, text-heavy documents, and now, we’re bringing online editing capabilities to InDesign. We’re rolling out many enhancements, but here are three key features we are working on (currently in beta) that are sure to make your editing workflows even smoother.
Share documents online from InDesign
Designers will be able to securely share documents online with copywriters and editors, directly from InDesign. This eliminates the need to export files to PDFs and share them via email.
Edit text in your InDesign files right in the web browser
Recipients will be able to make edits to text via their web browsers and preview what they would look like in the context of the layout. The text edits will sync with the original InDesign files automatically. This means writers don’t have to download the files, mark them up in the PDF or print them out, scan them and email them back to designers. Since the copy edits will flow directly back into InDesign files automatically, designers can stay focused on their design workflow, eliminating the need to compile feedback from different files or channels, type them out, copy/paste or reflow text again and again.
Control access and editing permissions of your InDesign files
Designers will also have control over which sections of their InDesign files collaborators are able to edit. Editors can edit the texts, but not the graphic design elements. Designers can put their mind at ease that no matter how many people are editing the file together, the layout will stay just the way they want it.
These new copy-editing features are just the beginning. Your feedback will help us decide where we take InDesign online copy editing next, and we’re excited to build the product with you!
Join our InDesign copy editing beta program.
In addition to joining the beta program, there are other ways for you to be involved in this journey:
- InDesign UserVoice: We launched UserVoice so you can log, track, and vote on new features or bugs. Here you’ll discover what others are requesting and the latest status of those requests.
- Social media: Join us on Facebook, Twitter, and Instagram to get the latest news on InDesign. These channels feature webinars and information on the latest product updates. Most importantly, you can always tag these accounts or send a direct message to connect with our team.
- Adobe Beta forums: The Adobe Beta forums, a.k.a. prerelease forums are open to any Creative Cloud member. In these forums, you’ll have the opportunity to join in vibrant discussions on features and road-map requests directly with the product team.
Adobe InDesign
Collaborate 3X faster with the industry-leading layout and page design software for print and digital media
This article will walk you through the process of creating a digital magazine: from the layout in Adobe InDesign to sharing your content on the web or through a mobile app.
It will show you how to use the options within the in5 (InDesign to HTML5) export tool to create your ideal digital magazine layout.
Designing your layout
Not only is InDesign the world’s best page layout tool, but it also comes loaded with easy-to-use interactive features.
If your layout is already in InDesign, then it’s essentially ready to go.
However, you might want to consider how certain items will look onscreen.
You could also think about adding interactivity that wasn’t possible with your printed materials:
- Hyperlinks
- Audio and Video
- Animation
- Buttons
- Object states
You can also create your layout from scratch. This lets you plans for digital viewing right from the start.
Converting to a digital format
Once installed, the in5 (InDesign to HTML5) extension adds an Export to HTML5 with in5… option to your InDesign File menu.
To export, simply select the option from the file menu.
You can click OK to see how the results look with the default settings (as shown in the video below).
Over the next few steps, we’ll alter the look and functionality of the output by selecting different export options.
Choosing the look of your magazine
Simply by changing the Page Format option within the in5 dialog, your digital layout can look and feel very different.
Let’s explore some of those options.
Working with two-page spreads
Two-page spreads are standard in a printed magazine, but they consume a huge amount screen real estate when it comes to mobile devices.
We’ll address maintaining your print layout and offering a good mobile-reading experience below, but keep in mind that mobile screen space is limited and that single-page spreads are optimal on mobile devices when you’re designing a digital layout from scratch.
That being said, in5 has two excellent ways to maintain the look of your two-page spreads in the output.
First, you can merge your spreads into pages using the Merge Spreads script found in the InDesign Scripts panel (this script is automatically installed with in5). This will create a new document where each spread is now a page.
Then you can export with the Page Format set to Slider (Fade in) to display an entire spread (both steps are shown in the video below).
Adding a flipbook page curl effect
The other way to export your document and display two-page spreads is to use the Flipbook with Page Peel option in the Page Format menu.
Your output will look and feel like a printed magazine with corners that curl up and animated page turns.
You don’t have to run any scripts beforehand with this one.
This option is responsive, so it displays a single-page layout in portrait mode (when the browser is taller than it is wide) to create an optimal viewing experience.
As long as the browser is wider than it is tall (landscape mode), a two-page spread will be displayed (shown in the video below).
Note: there’s also a way to create Responsive Layouts.
Note that a Pro plan (or higher) of in5 is required to create entire flipbooks, but you can test out a few pages of any document with this option using the in5 demo.
Adding page thumbnail navigation
Now that your magazine is digital, you can start taking advantage of some of the options that you might expect in a digital publication.
Let’s start by adding thumbnail navigation so that it’s easy for the reader to scan through the pages and jump to a desired location.
The thumbnail option can be found in the Viewer Display section of the in5 dialog.
Simply check the box before export and the thumbnails button will appear on a viewer control frame in your output (see the video below).
Note that the thumbnail navigation feature requires a Pro plan (or higher). See all plans on this page.
Adding full screen, zooming and scaling
Now let us add features so your readers can have a closer look at your magazine.
Back in the in5 export dialog under the Viewer Display section, you can select the options for Full screen and zoom in/out to add these options to the control frame.
In the Advanced section of the dialog, let’s choose Best Fit under Desktop Scaling, and Use Desktop Scaling under Mobile Viewport Device Zoom.
This will ensure that your layout scales proportionally to fit into any browser window, including on mobile devices.
While under Advanced, let’s also up the Image Quality to High Definition since your layout may be scaled up or viewed on retina screens.
And to shrink those images for faster loading, let’s select the Optimize images option as well (available on Pro+ plans of in5).
See how it all comes together in the video below.
Adding reading progress indicators
If you want to put a little digital icing on this cake, you can add some user interface elements to let the reader now how their progressing in your magazine.
In the Viewer Display section of the in5 dialog, select the Current page / total pages option and the Page progress bar option.
Now the reader will know exactly where they are in your magazine (see video below).
Adding easy reading for mobile
in5 helps you render your layout in several different ways.
You can choose how you want your InDesign text to be rendered in HTML.
For example, if you choose the HTML with Local Font Embedding, in5 will export your text as live, selectable HTML text and embed any fonts that in5 can from your InDesign document.
This makes you output lightweight and really easy to edit (you can make charges in a text editor). It’s also great for Search Engine Optimization (SEO) because all of your text is available on the page for search engines to find.
However, InDesign is capable of rendering text attributes and complex text wraps that HTML cannot replicate with live text.
To solve that and preserve your layout precisely, you can instead render your text as images or SVG (Scaleable Vector Graphics).
When you render your text as images, you solve the problem of precisely maintaining your layout, but that layout maybe oversized on a small mobile screen.
With the zooming settings applied (from above), the mobile reader can easily zoom in and drag the layout around, but this isn’t an ideal experience.
To facilitate easy reading on small mobile screens, you can use the Mobile Article Explorer widget to provide a straight-forward reading experience for mobile (see it in action in the video below).
Publishing your layout
Now that you’ve got your magazine into HTML format, what the heck do you do with it?
The short answer is anything you want.
HTML is everywhere and can live almost anywhere. The trick is learning how to get it there.
Let’s start with the simplest option first.
Publishing your magazine layout to the web
The web is the original home of HTML.
All you have to do to get your HTML digital magazine available to readers on the web is upload (aka copy) your files to a web server.
A web server is a computer that can be accessed from a web address (e.g.,ajarproductions.com).
The typical method of uploading files is using an FTP (File Transfer Protocol) application, like Filezilla (which is free and cross-platform).
It’s usually as easy as dragging and dropping the files.
Once your files are uploaded, simply share the URL and your digital magazine can be viewed right on the web!
See how easy it is in the video below as the local file I’ve exported becomes a shareable digital magazine on the web.
Hosting your digital magazine on a WordPress site
You can host in5 content inside of a WordPress page using an the free in5 embed plugin for WordPress. How to install spongebob squarepants employee of the month.
The video below will show you how to add an iframe to a WordPress page or post.
Collecting money for your magazine
If you want limit readership to paying subscribers, there are a number of ways to selectively allow who is able to view your digital magazine.
If you’re hosting on WordPress, you can use a plugin like Wishlist Member to create subscription only pages.
Or you can simply password protect certain directories on your web server (more info in this publishing to the web article).
Publishing your magazine layout as a mobile app
There are several good ways to turn HTML-based digital magazine into a mobile app.
By putting your logo on a reader’s device, mobile apps can offer more of a branded experience.
It’s also pretty straightforward to charge money for an app when it’s in an app store.
PhoneGap Build and Baker Framework both offer inexpensive and non-coder-friendly ways to convert your HTML into an app.
Indesign Online Publishing
If you’re looking for a more premium service and the ability to distribute an app with regular “issues,” several products are capable uploading your HTML magazines into a custom app.
For more, see this article on creating mobile apps.
How to skip the hassle of the app store
Did you know that there’s also a way to get your logo onto a mobile reader’s home screen without going through the app store!?
That’s right. No fees. No signing certificates. No submission process.
It’s called a Web App and it let’s you web content be saved to the home screen with a custom icon.
Read all about in this article on creating Web Apps.
Go digital
You can download in5 right now and go digital. It’s that easy!
Indesign Online Publishing Service
Just export your magazine as I did above.
Get the VIP Edition of Digital Publishing Mastery
Indesign Online Course Free
Sign up and I'll guide you through the entire Digital Publishing course written by leading InDesign experts.
Online Indesign Course
Download adobe photoshop 2018 trial. Lessons will be delivered to you over a period of a few weeks.
Indesign Online Publishing Services
Related