If you were an Adobe Muse user, you might now be looking for an alternative that lets you create web content with no coding.
This article will show you how you can use in5, an add-on for Adobe InDesign, to create content similar to what you made in Muse.
Many print designers who transitioned to web design discovered Muse as a solution for building websites without having to code. Muse’s features targeted designers with a workflow similar to creating layouts in InDesign. As Muse grew in popularity, new features gave designers additional options for what they could create, and more users became dependent on the application to deliver HTML for the web.
Then Adobe announced the end of service for Muse. The policy shift meant the application would still be available to Creative Cloud subscribers, but as of March 26, 2020, there would be no new features and no technical support. The announcement left many Muse users wondering what their options were.
Coincidentally, in the same year that Muse was introduced, in5, a plugin for InDesign was being developed by Justin Putney, owner of Ajar Productions. The in5 workflow starts with the designer creating a layout in InDesign—a tool many designers already use. Then the content is exported using in5 to generate the HMTL5 with no coding required. Like Muse, in5 added features to make creating engaging and interactive digital publications. In a side-by-side comparison of the Muse versus in5, in5 delivers similar if not better features than Muse, and in5 continues to deliver new features and equally important ongoing support.
Comparable Muse and in5 Features
This table compares popular Muse features to in5 features.
|Design and Layout|
|Master Pages||InDesign Master Pages|
|Limited Output Types||Multiple Output Types|
|Fluid Width||Liquid Layout in InDesign|
|Responsive Design||Responsive Layouts|
|Pinned Objects||Fixed Position Element|
|Embedded HTML||InDesign’s HTML Object|
|Text Synchronizing Across Desktop and Mobile||Linked Text in InDesign’s Alternate Layouts|
|Widgets||Multi-state objects (MSOs) in InDesign|
|Menu Widget||Menu Builder|
|Scroll Effects||Animation Based on InDesign Presets|
|Parallax Scrolling||Parallax Background|
|Hyperlinks||InDesign and in5 Hyperlinks|
|Built-in Contact Forms||Embedded Google Forms|
|System Fonts||Text Rendering as Images and SVG|
|Standard Fonts||HTML with Web-Safe Fallback Fonts|
|Self-hosted Web fonts||HTML with Local Font Embedding (when possible)|
|Typekit Integration||Adobe Fonts (formerly Typekit) and Google Fonts|
|Google Analytics with Tracking Code||Google Analytics with Tracking ID|
|Hosting and Distribution|
|Third-party Hosting, Adobe Business Catalyst||Third-party Hosting, GitHub, and Local|
|Integrated FTP, FTP||FTP, in5 WordPress Plugin, Sales Enablement|
Let’s now compare popular features in a bit more detail.
Design and Layout
Master Pages vs. InDesign Master Pages
Muse’s master pages were based on the InDesign workflow that was familiar to designers. In Muse’s Plan view, the user would set up one or more master pages and apply them to the pages in the website layout.
With in5, the layout is completely done in InDesign with the option of using Master Pages in the Pages panel and then exported as HTML5 with in5.
Limited Output Formats vs. Multiple Output Formats
Because Muse was designed as an application for creating websites, the targeted outputs were desktop, tablet, and mobile as static or scrolling pages.
By contrast, in5 users can target a variety of digital output formats for a number of different use cases including the following:
- Modern digital (a magazine with horizontally sliding transitions between pages)
- Longform ebook
- Mobile app
- Web app
- One-page site (with Borderless Page Scroll)
- Landing page (responds more like a traditional website)
Any of these presets can be modified for customized output.
Fluid Width vs. Liquid Layout in InDesign
Muse added the Fluid Width option to accommodate websites of various widths. The option would be set when a user created a new site. The user would set breakpoints to signal the change to the layout at the points where the width of the browser broke the layout.
Flexible layouts with in5 are created using a similar feature in InDesign that can be added at any time using InDesign’s Liquid Layout panel. The rules can be set to adjust the scaling and positioning of objects.
Responsive Design vs. Responsive Layouts
Muse’s responsive design made targeting multiple screens possible for non-coders. The user could design a layout and create additional layouts based on the original design. The layout options could target up to three total layouts: Desktop, Tablet, and Phone. When adding an alternate layout, the user could select which content should be copied from the existing layout including the site plan, the page attributes, and the browser fill.
in5 uses InDesign’s Alternate Layouts for Responsive Layouts to visually create layouts for different screens and devices. There also isn’t a limit on the number of alternate layouts, so multiple devices and orientations can be targeted. When used in combination with Desktop Scaling (or Liquid Layout), Responsive Layouts automatically scale for a more seamless transition between layouts.
Pinned Objects vs. Fixed Position Element
Muse made pinned objects such as sticky menus easy to make. Clicking on the appropriate icon would set an object to the top left, center, or right of the browser; bottom left, center, or right of the browser; or left, center, or right of the page. Pinned objects could be set to not resize with a regular layout, have a responsive width and height, have a responsive width, or stretch to the browser width.
The fixed position element was recently added to in5. This interactive widget lets the user enable fixed positioning on the selected element. Scaling settings include none, use desktop scaling which is applied to the document when exporting, and stretch to fill. The fixed position can be applied to the document, the selected layout, or the page. Pinning for X and Y can be set to Left, Center, Right, and Top, Center, and Bottom respectively. Scrolling can be set to show or hide the element. An action can be set on the element to make the page scroll to the top or to the bottom (e.g., to let you easily make a “scroll to top” button).
Embedded HTML vs. InDesign’s HTML Object
Muse made embedding HTML content from other sites such as YouTube or Google Maps pretty simple. The embed code would be copied from the external site and pasted either directly onto the page or by going to Object > Insert HTML.
InDesign uses the same process of copying and pasting the embed code from an external site into the InDesign document directly or into the HTML Object (Object > Insert HTML) that in5 can export with the document.
Text Synchronizing Across Desktop and Mobile vs. Linked Text in Alternate Layouts
Text synchronizing in Muse could be a time-saver for updating content in one layout and having it automatically update in another layout, but it required setting up the text frames with tags.
When an alternate layout is created in InDesign to create responsive layouts with in5, a dialog appears with the option to link stories selected by default. If a change is made to the parent text frame in the original layout, the child text frame in the alternate layout will display an alert at the top that can be clicked to apply the edit.
Widgets vs. InDesign Interactivity
Muse contained a Widgets Library for adding Buttons, Compositions, Forms, Menus, Panels, and Slideshows. The widgets were templates for a specific type of interactivity. The user would customize the widget with their content.
Interactivity with in5 is enabled through support of options available in InDesign such as Buttons and Forms, Hyperlinks, and Object States. These options become the building blocks for making a wide range of custom interactive solutions. Beyond those basics, in5 offers Build Wizards that automatically generate menus, pop-ups, and slideshows.
Menu Widget vs. Menu Builder
The simplicity of adding a menu to navigate to the other pages in the Muse site was appealing. There were widgets for both horizontal and vertical menus. The options allowed the selection of which pages to include and the styling that included the visibility options for the page label (name), the label positioning, and an icon and its positioning.
Menu creation in in5 can be automated with the Menu Builder (in5 > Build Wizards > Menu Builder). The Menu Builder can use either page Bookmarks or page headlines that are styled with a Paragraph Style to automatically create the content for the menu. The Menu can optionally be applied to the Master Page to make it appear on all pages where the master is applied. You can create a compact hamburger menu that shows or hides the menu when clicked, a sliding door menu that creates a vertical menu with a hamburger icon that animates sliding into or outside of the page when clicked, and a top bar menu that creates a horizontal menu that spans the top of the page.
Scroll Effects vs. Animation Based on InDesign Presets
Animation in Muse could be added in one of two ways—as an OAM file or as a scroll effect.
Complex animation needed to be prepared outside of Muse as an OAM file. It could be prepared in an application such as Adobe Edge Animate (which after September 2019 became no longer available) or Adobe Animate and imported into a Muse site.
Muse scroll effects could be added to initiate animation based on scrolling through a site. Animation could be applied to motion, opacity, slideshows, and Edge Animate animations.
in5 can also include OAM files through the Web Content Interactive Widget…but in5 also lets you use InDesign’s super easy tools to create animation.
There isn’t exactly an equivalent to scroll effects, per se, in in5, but the effect can be simulated. InDesign’s preset animations are supported, so they can be combined with the On Page Load event, the page size set to custom heights, and the Page Format set to one of the Continuous Scroll options (Borderless is recommended for scrolling websites).
Unlike Muse, animation with in5 is not dependent on scrolling. The InDesign preset animations can be applied or customized. They can be triggered when a page loads, when a page is clicked, when the object is clicked, when the cursor rolls over it, or when a separate button, including an invisible button, is clicked. And the animation timing can be set using InDesign’s Timing panel.
Parallax Scrolling vs. Parallax Background
In Muse, a parallax effect could be added to images by selecting Motion in the Scroll tab. In order to access the Scroll effect, the layout needed to be a fixed width.
A parallax background can be added to any layout with the in5 Parallax Background Interactive Widget. The selected element can be set as a parallax background with the option to size it to the window and have the image created from its container or the content.
Hyperlinks vs. InDesign and in5 Hyperlinks
Muse made adding a hyperlink easy. Once the URL was entered and selected, the URL, the location within the Muse project, or a file could be entered or filtered and applied. Additional options such as opening in a new window or tab and applying a text link style were also available.
InDesign offers similar options for adding hyperlinks that are supported by in5 including links to a URL, a file, an email address, a page, and a text anchor. InDesign also offers the time-saving feature of converting URLs in the text to hyperlinks that can be performed at once. The in5 Hyperlink Interactive Widget allows for advanced hyperlinking where the linked content can be set to open in the document default, the same window, the top window, a new window, a lightbox, inside a web app, or a browser from app. The launch options can be applied to the selected hyperlink, to all text hyperlinks, or to all hyperlinks.
Built-in Contact Forms vs. Embedded Google Forms
Muse included two types of contact forms in the Widget Library, a Detailed Contact and a Simple Contact. These widgets were basically the same form. One had more options selected by default than the other. Both forms could be customized with text fields to enter. The forms didn’t interact with a database, but clicking the Submit button sent the entered content to the designated email address and offered the option of having the user stay on the current page or be taken to a specified link.
Adding a contact form to in5 content combines setting up a form similar to Muse’s contact form and embedding HTML with greater visibility into the data that’s received. The contact form is customized using Google Forms. Then the embed code is copied and pasted directly in InDesign or by using Object > Insert HTML.
Google Forms gives the option of collecting email addresses, sending an email notification when a response is received, and collects the response data within Google Forms in a visual dashboard and can be viewed in Google Sheets as a spreadsheet.
A designer can choose to render the text of a digital document in one of four ways: as images, as HTML text with web-safe fonts, as HTML text where the selected fonts are self-hosted, and as HTML using a third party web typography service. Each text rendering option has its pros and cons. The text rendering selection is made based on aesthetic and usability priorities.
System Fonts vs. Text Rendering as Images and SVG
Muse allowed users to work with any font they wanted—it didn’t have to be a web font. To allow the fonts to appear as intended, Muse rendered the text as images with the caveat that system fonts should be used sparingly because of the size and because the text wouldn’t be selectable.
Rendering text as images is strongly encouraged for in5 users as it is the primary means of maintaining a fixed layout. The file size associated with text as images isn’t as much of a concern because of in5’s image compression and image optimization options.
For in5 users who want to maintain their fixed layout but have crisper text, there’s the Scalable Vector Graphic (SVG) text rendering option. SVG text looks especially good on High Definition displays.
Standard Fonts vs. HTML with Web-Safe Fallback Fonts
Muse referred to web-safe fonts as Standard Fonts and offered a small set of them with fallbacks as the preferred fonts for longer paragraphs.
The wisdom of using web-safe fonts with fallbacks is embraced as one of in5’s text rendering options that renders text as selectable HTML with fallbacks that are based on which fonts are available on the viewer’s computer.
Self-hosted Web Fonts vs. HTML with Local Font Embedding
Muse allowed—and in5 continues to allow—self-hosting of web fonts in the supported file formats that the designer has purchased.
Typekit and Edge Web Fonts vs. Adobe Fonts (formerly Typekit) and Google Fonts
The early days of web fonts made their use with Muse somewhat limited and confusing. Typekit (now Adobe Fonts) were restricted to a selection of fonts for Muse users with any level of Creative Cloud subscription. The full font library was available with a paid subscription to Typekit. There were additional Typekit web-hosted fonts that were available as a part of Muse, but they were known as the Edge Web Fonts. Each type of web font, Typekit, Edge Web Font, or Self-Hosted fonts needed to be specified when added.
Now, Adobe Fonts or Google Fonts can be added as web fonts to in5 content through the addition of CSS in the Resources section of the Export HTML5 with in5 dialog. With Text Rendering set to HTML with Web-Safe Fallback Fonts and the added CSS, the exported text is selectable and appears in the desired font.
Muse offered developers the ability to create additional widgets that could be used personally or sold. The extensibility was made available in what was known as a MuCow, a Muse Configurable Options Widget.
Google Analytics with Tracking Code vs. Google Analytics with Tracking ID
Muse projects could be set up with Google Analytics. After the Google Analytics account was created and the Tracking ID was assigned, clicking on the Tracking ID button would present the tracking code. That code could be copied and pasted into the Page Properties, in the Metadata section for either a specific page or a master page.
To set up Google Analytics with in5, all that’s needed is for the Tracking ID to be entered in the Google Analytics Tracking ID field in the Analytics & Sharing section of the Export HTML5 with in5 dialog. More granular tracking can be implemented by adding an App ID and selecting specific interactions with pages, button clicks, audio and video playback, and social sharing.
Hosting and Distribution
Adobe Business Catalyst and Third-party Hosting vs. Third-party Hosting, WordPress, GitHub, and Local
Muse users transitioning from print to web had to navigate the change from printing to having their digital content hosted on a web server. Early adopters of Muse who purchased a Creative Cloud membership prior to May 1, 2015 got to take advantage of 5 free web Basic sites through Adobe Business Catalyst. The upload process was simple with a single dialog that allowed the creator to give the site a name that was used as a subdomain for their business catalyst site. Later Muse users who wanted their sites on Adobe Business Catalyst had to purchase hosting or use a third-party hosting service.
Likewise, in5 users need to have their content hosted on a web server. For most, that means paying for third-party hosting. Some have sites hosted on WordPress.com. One enterprising user described a means of using GitHub to host content that he embedded in another site. It would also be possible to create in5 content for a presentation or a kiosk to run locally on a computer at fullscreen.
Integrated FTP and FTP vs FTP, in5 WordPress Plugin, and Sales Enablement
Muse had an integrated FTP feature that made uploading content to a web server less intimidating to new users that would step them through what information was needed. Exported Muse content could also be uploaded with other FTP software.
Similarly, exported in5 content can be uploaded with FTP software. For WordPress users, in5 content can be embedded in a WordPress site using the free in5 WordPress plugin. An option for sales teams that need in5 content to be easily updated, distributed, and made available offline are sales enablement platforms like Vablet.
More in5 Features
In many ways, Muse was groundbreaking in creating an application for designers to create HTML5 websites without code, with some unparalleled features such as the limited free hosting and e-commerce setup through Adobe Business Catalyst (which is also no longer available), integrated FTP upload, and its hierarchical site map. However, due to its end-of-service, Muse didn’t get to mature and evolve with new features. By contrast, in5’s feature set continues to grow.
Additional in5 Features that aren’t available with Muse
- Free, timely support
- Multiple output formats (flipbook with page peel animation, one-page scrolling app, website, web app, mobile app, banner ad, ebook, presentation)
- Table of Contents
- Video playback customization
- Audio playback customization
- 3D Flip Cards
- Image Sequence
- Pan and Zoom
- Scrolling Frames
- Slideshow Interactive Widget
- Web Content Interactive Widget
- Presentation Mode
- Custom Slide Transitions
- Downloadable PDF
- Customizable Viewer Display bar
- Helper Scripts (Merge Pages Vertically, Merge Spreads, Merge Text Frames, Split Text Frames)
- GIF Maker
- in5 WordPress Plugin
- Opening images in Lightboxes
- Form Element Data options
- Document Presets
- Export Presets
- Magic Layouts Using InDesign’s Adjust Layout
So if you’re one of the Muse users who felt displaced by the end of Muse, join the growing community of in5 users who are enjoying the freedom to create engaging interactive HTML5 content with no coding required.
Or check out this video course on how to Create a Scrolling Website with InDesign & in5.
Get updates from Ajar Productions
Sign up today and get the InDesign Split Text premium extension for free!