Digital Publishing Technology Guide.pdf

Digital Publishing Technology Guide by Keith Gilbert & Justin Putney

CONTENTS Seeking the Perfect Solution . . . . . . . . . . . . . . . . . . . 2 Assessing Your Needs . . . . . . . . . . . . . . . . . . . . . . . . . . 2 HTML, CSS, & JavaScript . . . . . . . . . . . . . . . . . . . . . . . 4 Mobile App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Mobile Web App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Reflowable EPUB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Fixed Layout EPUB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Publish Online. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 PDF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Which Technology Is Right for You?. . . . . . . . . . . . . 14 Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Digital Publishing Technology Guide If you are reading this, you probably want to publish your content digitally—to tablets, phones, E-readers, and Web sites. But there are so many digital publishing solutions to choose from, and the digital landscape is changing so rapidly. Where do you start? This guide is here to help! Rather than focusing on specific products, this guide will provide you with an overview of the file formats and technology that products are built upon. That way you’ll have the background, tools, and concepts to evaluate any available product or solution. Let’s dive right in!



1.1

© copyright 2016 Ajar Productions

page 1 of 16

SEEKING THE PERFECT SOLUTION Here’s what we all want: a universal file format that can be output from Adobe InDesign; is easy to learn, produce, and update; allows for rich interactivity and media; can be easily distributed a variety of ways; will look great on any device with any size screen; contains searchable and selectable text; and works great with social sharing. And this is the short list!

Wanted

The bad news: there is no magic file format that meets all these requirements. At least not today. Compromise will be required. This guide will help you find the best solution that meets as many of your requirements as possible. This guide assumes that you want to create your digital content in Adobe InDesign, or easily repurpose InDesign print content for digital use. Only digital publishing technologies that begin with InDesign content authoring are covered in this guide.

ASSESSING YOUR NEEDS Begin by assessing your needs. Who is your audience? On what type of devices are they likely to want to access your content? How technically sophisticated are they? What is your budget, both in terms of money and time? Consider only what you need today. Technology is moving so quickly that its impossible to predict which solution will fit your needs 3–5 years into the future. Consider this: the iPad was first shipped in the spring of 2010. In the short time span since, tablets have completely changed digital publishing requirements. Looking back a bit further, the iPhone was released in the summer of 2007. Prior to that, most of us didn’t have a clue what an “app” was. Now apps are everywhere. Lately, as phone screens have gotten larger, clearer, and brighter, more and more people are consuming content on their phones, leaving their tablets behind. No wonder it’s hard to keep up! Use the following list to assess your needs. It may be helpful to rank the importance of each of the criteria on a scale of 1–10, attempting to separate the “must-haves” from the “nice-to-haves.”



1.1

© copyright 2016 Ajar Productions

page 2 of 16

Digital Publishing Requirements __I need to create my content in Adobe InDesign and output it with pixel perfect precision __The solution must be easy to learn __I need to be able to produce output quickly and efficiently __I want to include rich interactivity and media in my content __I need to distribute my content to readers via a Web site __I need to be able to send my content from person to person as a file attachment __I need to be able to distribute my content through app stores __I need to be able to monetize my content, and protect it from casual theft

__My content must look great on: ☐☐ iPads

☐☐ Windows tablets

☐☐ iPhones

☐☐ Windows computers

☐☐ Android tablets

☐☐ Macintosh computers

☐☐ Android phones

☐☐ E-readers

__My text must be selectable and searchable __My content must be accessible by screenreading devices for the visually impaired __My content must be exposed to search engines so that it is discoverable on the Web __I must be able to update and add content periodically __Users must be able to download content for reading off-line __Content must be easy to share on social sharing platforms such as Twitter and Facebook __The solution must include analytics about how many people are accessing which portions of content

Use this list to rank each of your requirements on a scale of 1–10.

Once you have some clarity on your requirements, you can begin evaluating technologies. We will compare and contrast seven digital publishing technologies. They are: 1. 2. 3. 4. 5. 6. 7.

HTML, CSS & JavaScript Mobile app Mobile Web app Reflowable EPUB Fixed-Layout EPUB Publish Online PDF

Once you understand the strengths and weaknesses of these technologies, you can shop for a product or solution built on that technology.



1.1

© copyright 2016 Ajar Productions

page 3 of 16

HTML, CSS, & JAVASCRIPT HyperText Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript are the technologies that make every Web site work. The HTML language by itself contains only very simple formatting instructions. But the addition of CSS makes it possible to include rich formatting that nearly rivals print typography and layout in variety and precision. Adding JavaScript into the mix allows for rich interactive experiences. Once created, your HTML/CSS/JavaScript output can be put on a Web server and viewed in a browser running on a phone, tablet, laptop, or desktop computer. HTML can even be written in such a way that the layout changes depending on the size of the screen on which the page is being viewed. This is called “responsive” or “adaptive” HTML. But, as you can imagine, this type of HTML is more time consuming to create. Someone has to decide what the layout should look like at the various screen sizes. HTML, CSS, and JavaScript are foundational technologies that are used in one way or another by all of the other digital publishing technologies described in this guide except for PDF. Briefly, here are three ways to create HTML output from InDesign layouts: 1. Copy and paste text and images from InDesign, recreating the layout and formatting in a code editor like Adobe Dreamweaver or a visual Web authoring tool like Adobe Muse. 2. Use InDesign’s Export command to export your layout to HTML. However, this is only effective for highly repetitive documents where strict layout rules are enforced and paragraph and character styles are used fastidiously.

in5 is an InDesign plug-in that exports InDesign layouts to HTML5. This HTML content can then be used on a Web site, in a Web app, or in a mobile app.

3. Use the InDesign plug-in in5 to export your layout to HTML. in5 does an excellent job of translating the richness and complexity of an InDesign layout into corresponding HTML, CSS, and JavaScript. Besides posting your HTML output on a Web site, HTML output can also be turned into a Web app, or “wrapped” in an app package. See the mobile Web app and mobile app sections of this guide for more information.

This is an example of how a typical folder of HTML, CSS, and JavaScript may be organized.



1.1

© copyright 2016 Ajar Productions

page 4 of 16

Top 3 Pros

Top 3 Cons

Easy to create from InDesign with in5

Difficult to create from InDesign without in5

Output viewable on any device with any size screen (phones/tablets/laptops/desktops, iOS/Android/ Windows/Mac OS X)

No simple, standard way to distribute a “package” of HTML/CSS/JavaScript as a file via email or other adhoc methods

Selectable, editable text that is accessible by screen reader software

Difficult to monetize

Learn more… • To learn more about HTML for digital publishing see 10 Reasons to Consider HTML for Digital Publishing at bit.ly/29oBNzK. • A good training resource for exporting HTML from InDesign is Michael Murphy’s excellent InDesign CS6 to HTML course at bit.ly/29s25BF. Still relevant for current versions of InDesign.



1.1

© copyright 2016 Ajar Productions

page 5 of 16

MOBILE APP From the perspective of a user, the biggest advantage of a mobile app is simplicity. Since the advent of smartphones, almost everyone understands how to obtain and install apps for their mobile devices. A mobile app “lives” on a device’s home screen. But how are mobile apps created? Highly-interactive mobile apps such as games, social media apps, and photo editing apps are typically created by developers using a programming language such as Objective-C or Java. However, there are various ways to create mobile apps without writing any code that can display rich interactive content created in InDesign. One low-cost, fairly easy way is to create HTML content (see HTML, CSS, & JavaScript above) and then package the content into a mobile app using a service like PhoneGap Build (build.phonegap.com) or Baker Framework (bakerframework.com). Another way to produce content-rich mobile apps without coding is to use a solution such as AEM Mobile (adobe.ly/1Zxmcyq), Twixl Publisher (bit.ly/2a3riDO), Aquafadas (www.aquafadas.com), or Mag+ Designd (www.magplus.com). These products each offer a complete ecosystem for building a mobile app, producing interactive content in InDesign, and distributing your content into the app. Services such as Liquid State (liquid-state.com) or Paperlit (paperlit.com) are similar, but work with content created from InDesign using in5, as well as PDF content. All of these solutions make periodical content easy to distribute, “pushing” your periodical content into the app whenever you are ready to publish new content. On iOS devices mobile apps can only be distributed two ways: through the Apple App Store, or privately within a single company through “enterprise” distribution. If your app and content are free, Apple will host it on the Apple App Store free of charge. If you charge for your app or your content, Apple will retain a percentage. There is no way to distribute an iOS app to the public outside of the Apple App Store. On Android devices, you can either distribute your app through Google Play, with a similar financial arrangement to the Apple App Store, or by distributing it yourself and instructing users how to “sideload” the app directly on their mobile device, bypassing Google Play.



1.1

© copyright 2016 Ajar Productions

Combining in5 with PhoneGap Build, Baker Framework, Liquid State, or Paperlit is a powerful, low-cost way to create content-rich mobile apps.

There is no way to distribute an iOS app to the public outside of the Apple App Store.

page 6 of 16

Top 3 Pros

Top 3 Cons

Brand experience (icon lives on home screen)

Some app-building solutions are very expensive

Easy to monetize in an app store

On iOS, apps must be distributed through the Apple App Store

Good for periodicals (multi-issue publications)

Restricted to mobile devices only. iOS and Android mobile apps can’t be installed on desktop or laptop computers. (Some mobile app solutions such as AEM Mobile and Twixl Publisher automatically create a Web-based simulation of the app content.)

Learn more… • How to create mobile apps with in5, PhoneGap Build, Baker Framework, and Liquid State at bit.ly/29JzerV.



1.1

© copyright 2016 Ajar Productions

page 7 of 16

MOBILE WEB APP A mobile Web app is a Web site that contains some special code that prompts the user to add the site as an icon to the home screen of their tablet or smartphone. This causes the app to occupy some valuable screen real estate on the user’s device, hopefully reminding them to revisit the app again and again. Here is how a mobile Web app works: 1. Convert your InDesign layout to HTML using one of the methods described in the HTML, CSS, & JavaScript section above. 2. Add special code to the HTML that causes the mobile Web app behavior. (in5 has an option that makes this one-click easy. Just choose one of the “Web App” options in the Output list.)

3. Put the HTML on a Web server and send the URL to your audience. 4. When a user visits the URL in a Web browser on a smartphone or tablet, they receive a message prompting them to add the page to their home screen.

5. When they follow the prompt, an icon is added to their home screen. The appearance of the icon is specified in the HTML code, or if you’re using in5, the in5 Advanced screen.

6. Now, when the user wishes to run the app, they just tap the icon on their home screen.

With some additional HTML code, or using the in5 Advanced dialog box, mobile Web app content can be set to “cache,” meaning that once the user has visited the page, the content of the page will be viewable off-line in the future. Since mobile Web apps are just a special bundle of HTML, CSS, and JavaScript, they have the same “top 3” pros and cons as regular HTML, CSS, and JavaScript listed above. But, they also have some unique pros and cons:



1.1

© copyright 2016 Ajar Productions

page 8 of 16

3 Additional Pros

3 Additional Cons

A branded experience that looks like a “real” mobile app

Unlike a true mobile app, mobile Web apps require a Web server

Easy installation of the app on devices, no App Store required

Limited support on older versions of the Android operating system

Off-line viewing of content is possible

No Windows Mobile support

Learn more… To learn more about mobile Web apps, check out the following articles: • Create an iPad Web App, a Lynda.com course by Chris Converse at bit.ly/29mUbpX. • Introducing the Web App, an article by Justin Putney at bit.ly/29q3hn3. • Publishing to a Web App, lesson 15 from the Becoming a Digital Publishing Master with in5 course at bit.ly/1TQHTGf.



1.1

© copyright 2016 Ajar Productions

A Web app has many of the advantages of a “real” mobile app without the complexities and costs of app store distribution.

page 9 of 16

REFLOWABLE EPUB EPUB is an open-standard file format for publishing, distributing, and reading content on e-readers such as Nook and Kobo devices, as well as e-reader apps on tablets, smartphones, laptop, and desktop computers. The EPUB format is maintained by the International Digital Publishing Forum (idpf.org). There are two types of EPUB files: reflowable and fixed-layout (see next page). Reflowable EPUB files dynamically reformat to fit the device on which they are being viewed. The reader, not the designer, controls the typeface, type size, line spacing, and margins. In-line graphics can be included, but options for embedding video and interactivity are very limited. For these reasons, reflowable EPUBs are typically used for novels and other long, text intensive documents. To create a reflowable EPUB in InDesign, choose File > Export, and select EPUB (Reflowable) from the Format drop down list. Then, select a few options in the Export Options dialog, click OK, and you’re done. That part is easy. But in most cases a fair amount of document preparation needs to happen first. In particular, paragraph and character styles need to be applied consistently throughout the document, which may require some learning and changes to workflow for some users. Amazon Kindle e-readers use their own proprietary “mobi” and “kf8” file formats. EPUB files cannot be read on Kindle e-readers. Thankfully, once you’ve created a reflowable EPUB file, converting it to Amazon’s file format is not too difficult. EPUB files are generally distributed through online stores like iTunes or Kobo. Typically, these stores will distribute free EPUB files at no charge, but they take a cut of any EPUB files that you offer for sale. EPUB files can also be distributed via your own Web site, email, or whatever distribution method you choose. However, users may not know what to do with an EPUB file that they obtain outside of a store. If they are on a laptop or desktop computer, they would need to have e-reader software installed to read the EPUB file. Top 3 Pros

Top 3 Cons

Easily monetized

Very little control over layout and appearance. Complex layouts are impossible.

Easy to distribute

Support for media and interactive content very limited

Low cost to create and distribute

Creating a quality EPUB file that looks good on all e-readers can be somewhat technical

Learn more… • InDesign CC 2015: EPUB Fundamentals, a Lynda.com course by Anne-Marie Concepcion at bit.ly/29IyWjL.



1.1

© copyright 2016 Ajar Productions

page 10 of 16

FIXED LAYOUT EPUB Fixed layout EPUB files, part of the EPUB 3.0 specification, are very easy to create in the latest versions of Adobe InDesign. You simply choose File > Export, and select EPUB (Fixed Layout) from the Format drop down list. Then, select a few options in the Export Options dialog, click OK, and you’re done. No special preparation of your file is necessary, aside from the requirement that you use only fonts that are legal for embedding in EPUB files. The resulting EPUB file will look exactly like your InDesign layout. The appearance will be preserved no matter what device is being used to view the file. The layout will simply scale up and down to fit the screen of the device. Unfortunately, fixed-layout EPUB files created from InDesign can only be read in the iBooks app for iPhone and iPad, the iBooks app for Mac laptops and desktops, and the Kobo reader. Specifically, they aren’t supported by any of the Kindle e-readers or tablets. Furthermore, converting an InDesign-generated fixed layout EPUB file to the kf8 format required by Amazon is very difficult. Top 3 Pros

Top 3 Cons

Very easy to create from InDesign

Supported by a limited number of e-readers and e-reading apps (primarily iBooks and Kobo at this point)

Good support for interactivity and media

Content doesn’t reflow to accommodate different screen sizes.

Easy to distribute and monetize

No mechanism for periodical content or subscriptions

Learn more… • Creating Fixed-Layout EPUBs with InDesign CC, a Lynda.com course by Anne-Marie Concepcion at bit.ly/29N0Qxu.



1.1

© copyright 2016 Ajar Productions

page 11 of 16

PUBLISH ONLINE Publish Online, a relatively new feature added to InDesign CC v11.0, is an easy way to publish pixel-perfect layouts to a Web site. Just click the Publish Online button at the top right corner of the screen in InDesign, answer a few questions, and the layout is uploaded to a Web site hosted by Adobe, and the URL is given to you. You can then include this URL on your Web site, in an email, or whatever you want to do with it to drive people to your content.

After clicking the Publish Online button, you can specify a Title, Description, and a few other publishing options.

Once the Publish Online upload is finished, you are given a unique URL for the document.

To see what the Publish Online interface and user experience is like, see this example: adobe.ly/29VCrFj. Publish Online works really well. But the main drawback for many people is that the content must be hosted on Adobe’s servers. You cannot download the code and put it on your own Web server. Nor can you customize the URL. It will begin with the domain indd.adobe.com. There is no way to monetize the content, or protect it with a password.

There is no way to monetize Publish Online content, and the content must be hosted on Adobe’s Web servers.

Top 3 Pros

Top 3 Cons

Free and easy to create from InDesign

Content must be hosted on Adobe’s servers

Good support for interactivity and media

Text is not selectable or searchable

Good social-sharing mechanism

No way to monetize content

Learn more… • A curated list of some examples created in InDesign and published with Publish Online at adobe.ly/29TE7Qf. • Publish Online from InDesign, an Adobe.com tutorial at adobe.ly/29NcTuF. • Publish Online with InDesign, a Lynda.com course by Diane Burns at bit.ly/2a3QNVE.



1.1

© copyright 2016 Ajar Productions

page 12 of 16

PDF The venerable Portable Document Format (PDF) still has a place in digital publishing. A PDF is a single file that is easy to create and can be easily distributed in a number of ways. Most people know what to do with a PDF when they encounter it. But as mobile devices have proliferated, so too have the number of different PDF “reader” apps. As a result, the on-screen fidelity of a PDF and support for interactive features isn’t as robust as it once was. In fact interactivity, animation, and video in PDF is so poorly supported in many mobile PDF reading apps, that unless you can dictate which PDF reader app your audience uses, it is best to avoid including most interactivity, animation, and video in PDFs. Top 3 Pros

Top 3 Cons

Free and easy to create from InDesign

Difficult to monetize; may require download to view

Can be shared via email or the Web

Not responsive for different screen sizes

Selectable, editable text that can be made accessible by screen reader software

A lot of interactive content doesn’t work on mobile PDF readers



1.1

© copyright 2016 Ajar Productions

page 13 of 16

WHICH TECHNOLOGY IS RIGHT FOR YOU? Since any solution you choose will require some investment in time, learning, and money, your inclination will be to invest in a solution and stick with it. However, be open to using multiple solutions. You may want to publish the same content using two or three technologies so that you can reach the broadest possible audience. Or, you may need to use one solution for one project, and another solution for a different project. Here are some rankings of each of the technologies in four categories, from most to least capable. Control over appearance

Device compatibility

1. Mobile app; Publish Online; Fixed-Layout EPUB (tie)

1. HTML, CSS, & JavaScript

2. PDF

2. Publish Online

3. HTML, CSS, & JavaScript; Mobile Web app (tie)

3. PDF

4. Reflowable EPUB

4. Reflowable EPUB 5. Mobile Web app 6. Mobile app 7. Fixed-Layout EPUB

Ease and cost of production

Capacity for interactivity and media

1. PDF; Publish Online (tie)

1. HTML, CSS, & JavaScript; Mobile Web app (tie)

2. Fixed-Layout EPUB

2. Mobile App

3. Reflowable EPUB

3. Publish Online

4. HTML, CSS, & JavaScript

4. Fixed-Layout EPUB

5. Mobile Web app

5. PDF

6. Mobile App

6. Reflowable EPUB

The following table documents whether or not each technology meets each of the criteria that you ranked earlier. Keep in mind that there are many exceptions, as well as some gray areas, depending on which commercial solution is being used to implement the technology.



1.1

© copyright 2016 Ajar Productions

page 14 of 16

✓

✓

✓

✓

✓ ✓

✓

✓

✓

✓

✓

Allows for rich interactivity and media

✓

✓

✓

✓

✓

Can be distributed via a Web site

✓

✓

✓

✓

✓

✓

✓

Can be distributed through app stores

✓

✓

✓

Ability to monetize content, and protect it from casual theft

✓

✓

✓

✓ ✓

Supports content scaling to fit any size screen while keeping pixel perfect layout intact

✓

✓

✓

Supports reflowing content to provide a better reading experience on smaller screens

✓

✓

✓

✓

Selectable and searchable text content

✓

✓

✓

✓

✓

✓

Accessible by screen reading devices for the visually impaired

✓

✓

✓

✓

✓

✓

Content exposed to search engines so that content is discoverable on the Web

✓

Ability to update and add “issues” of content periodically

✓

✓

✓

✓

Can be read off-line with no internet connection required



✓

Can be produced quickly and efficiently

Can be sent from person to person as a file attachment

1.1

PDF

Easy to learn

Publish Online

✓

Fixed Layout EPUB

Reflowable EPUB

Mobile Web app

Mobile app

HTML, CSS, & JavaScript Can be created in Adobe InDesign with pixelperfect precision

✓

Provides analytics about how many people are accessing which portions of content

✓

✓

✓

✓ ✓

✓

✓

Is easy to share on social-sharing platforms such as Twitter and Facebook

✓

✓

© copyright 2016 Ajar Productions

✓

✓

✓

✓ page 15 of 16

CONCLUSION Certainly there is an awareness on the part of software creators, mobile device makers, and others that content authors and publishers are seeking a universal solution that just works everywhere. We aren’t there yet, so you need to find the best solution that works for you and your content today. Keep in mind that you may need to employ more than one solution in order to meet the needs of your audience. As the creators of in5, we believe that in5 is the solution that meets the needs of many content authors and publishers. in5 can be used to create content for Web sites, Mobile apps, and mobile Web apps. We are continuing to develop and refine in5 so that it meets the needs of more and more users. Please download a trial version of in5 at bit.ly/13lOGiV and give it a try!



1.1

© copyright 2016 Ajar Productions

page 16 of 16