Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 10: Extending Functionality with External Resources

One of the great advantages of publishing with HTML is its flexibility. Content can easily be modified or extended to function in new ways. This lesson will show you how to add new looks and behaviors to your in5 output.

Expert Contributors to this lesson

Justin Putney

Justin Putney

Creator of in5

Today's Course Outline

  1. Why Extend?
  2. Adding CSS
  3. Adding JavaScript
  4. Where to Find Code Snippets

Estimated time for lesson

Today’s lesson should take approximately 20 minutes with the videos.

Why Extend?

When you export content from InDesign using in5, the sky is the limit on what you can create.

Would you like to create a custom menu? Custom page scaling? Do something that would be impossible with InDesign alone?

You can extend your output by attaching CSS, JavaScript, HTML, or other content in the Resources section of the in5 export dialog (found under File > Export HTML5 with in5... within InDesign). Your customization will then be written into the output.

You can write your own code, hire a web developer to write code for you, or grab some the of pre-written snippets that are already available.

The sky is the limit when publishing HTML with in5

Adding CSS

Cascading Style Sheets (CSS) are used to visually style HTML content. CSS can be added to change the look of your output.

Local CSS Example — Change the "Content Loading" Message

Some in5 users have asked if there is an easy way to change the "Content Loading" message (i.e., to a different language).

default loading message

Yes, there is. Let's take a look at it right now.

The first step is to create a simple text file with a .css extension.

Then paste the following text into that file and save it.

#loadIndicator span:after { content:' My special message'; }

Next, choose File > Export HTML5 with in5... and navigate to the Resourses section of the in5 dialog.

Click the plus sign (+) in the CSS section.

click the plus sign to add a CSS resource

Browse for the CSS file you saved and attach it.

Click OK to export and view your content.

Your custom message can be seen as the page loads.

the new loading message

Once you've set up a resource, it will be retained each time you export this document. The same CSS file can also be attached to other documents.

Remote CSS Example — Using Google Fonts

Google Fonts is a free service that lets you embed fonts for any device. Google Fonts serves up whatever type of file is needed by the browser.

Font licensing is one of the more complex aspects of digital publishing, but Google Fonts makes it easy. All Google Fonts are free and licensed for digital use.

To use Google Fonts with in5 follow the steps below.

  1. Choose the Font Family and Font Weights that you'd like to use in your project.
  2. Download the font(s).
    download the font
  3. Add the font(s) to your system (using Font Book on Mac or using the right-click menu on Windows).
  4. Open InDesign and apply the font family to your text (or better yet, your Paragraph Style).
    font display in InDesign
  5. Choose File > Export HTML5 with in5... and navigate to the Resourses section.
  6. Copy (just) the URL from Google Fonts.
    grab the URL portion from Google fonts
  7. Click the plus sign (+) to add a new CSS resources, paste in the URL, and click Add.
    add the URL as a resource
  8. Export and view.
the live, selectable text in the browser

Here are the same steps in video form.

Other CSS Customization Examples

Adding JavaScript

The steps to attaching JavaScript files are the same as adding CSS files.

  1. Choose File > Export HTML5 with in5... and navigate to the Resourses section.
  2. Click the plus sign (+) next to the JavaScript heading.

From there you can add a remote URL (like a hosted JavaScript library or jQuery plugin), or a local file that contains customizations.

Custom Menu Example

This video shows how CSS and JavaScript can be used to create a different type of experience with the same content.

Highly Requested JavaScript Snippets

Where to Find Code Snippets

You can find additional snippets (and post requests) on the in5 Answer Exchange.

Take Aways

  • You can extend both the look and functionality of your output.
  • CSS and JavaScript snippets can be reused.
  • Your output is not limited by the settings that exist within in5 or InDesign.