muse vs id and in5

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.

Adobe Muse in5
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
Interactivity
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
Text Rendering
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
Extensibility
MuCow (Muse Configurable Options Widget) Extensibility with CSS and JavaScript
Analytics
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

Figure 1 – InDesign Pages panel contains Master pages and pages.

Figure 1 – InDesign Pages panel contains Master pages and 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:

  • Flipbook
  • 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)
  • Presentation

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

Figure 2 – InDesign Pages panel displays alternate layouts for desktop, tablet, and phone.

Figure 2 – InDesign Pages panel displays alternate layouts for desktop, tablet, and phone.

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.

The Create Alternate Layout dialog with Link Stories selected and Highlighted and an example of the Linked text in a text frame.

Figure 3 – Linked text can be enabled in the dialog that appears when creating an alternate layout.

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.

Interactivity

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.

figure4-compact-slidingdoor-topbar

Figure 4 – Compact, sliding door, and top bar menus can be created with the in5 Menu Builder.

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.

cat in the bag looping

Figure 5 – An animation can be triggered by a button click in exported in5 content.

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

Figure 6 – The in5 Hyperlink Interactive Widget includes options for customizing hyperlink options.

Figure 6 – The in5 Hyperlink Interactive Widget includes options for customizing hyperlink options.

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.

Figure 7 – A Google Form can be embedded in an InDesign Layout to be exported with in5.

Figure 7 – A Google Form can be embedded in an InDesign Layout to be exported with in5.

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.

Check out this free InDesign interactivity course

Text Rendering

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.

Figure 8 – This exported in5 content includes Great Vibes Regular and Noto Serif Regular from Adobe Fonts as selectable text.

Figure 8 – This exported in5 content includes Great Vibes Regular and Noto Serif Regular from Adobe Fonts as selectable text.

Extensibility

MuCow (Muse Configurable Options Widget) vs. Extensibility with CSS and JavaScript

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.

Extensibility with in5 is more targeted toward individual users and the community of in5 users who want to tweak the output of their content either with CSS for styling or JavaScript for functionality. The process of adding CSS or JavaScript is now even simpler. Code can be copied and pasted into the Resources section of the Export HTML5 dialog. A CSS or JavaScript file can be linked via URL or added from a local file.

Analytics

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.

Check out this free video course on web hosting

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

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.

Download the free trial of in5

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!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. Martha Shelley says:

    Can you please create an easy way to create accordion styles. Very good day to do in muse. An example are questions and answers collaspable accordians

  2. Martha Shelley says:

    Can you please create an easy way to create accordion styles. Very easy to do in muse. An example are questions and answers collapsible accordions

  3. Daniel Horn says:

    I recently created a website on iWeb. Now seeing that Apple are discontinuing iWeb it would make sense to move to another web design creator. I have tried looking around yet maybe someone here can give me some personal advice and/or suggestions.

    I like iWeb for its WYSIWYG system. Its easy, simple to get what you want

  4. Your Post Is very Helpfull Thanks For share best post share to public

  5. emmabenjamin says:

    This community is one of the best community and I think this community and people are very helpful so I want to ask a question here that I downloaded the designing font style from the Fonts Bee website so now I can not find any way to add the fonts style on PhotoShop if anyone knows about this please tell me about this and proper guide me
    https://fontsbee.com/permanent-marker-font/

  6. kevin gates says:

    Your content is interesting you explain very well about muse but Can you please tell me the easy way to create accordion styles. Please write an article that which tool is best that can help us to Create a Brand Logo.

  7. kevin gates says:

    ff

  8. Easy Sight says:

    Comparison between Adobe Muse and in5 Features is quite Informative.
    Please Write about Adobe Illustrator and Maya Comparison.

    Cheers,
    EasySight | eyeglasses

  9. Kurt says:

    I’ve been surf riding on the net for over three hours these days; nevertheless, I ne’er found any gorgeous article like yours. It’s alluringly valued on my behalf of me. As I might see it, if all Net proprietors and bloggers created puzzling substance as you probably did, the world wide web is in a general sense additional helpful than at no matter purpose in late memory.
    Best Regards:
    Your Pet Planet

  10. Rose says:

    Anytime I make a GIF using the InDesign-In5 plug-in, Chrome changes the speed of the GIF. Is there a way to keep the speed as you planned it (and see it in Epub preview) without Chrome changing it?

  11. Joe Clarke says:

    Very good post. I want to ask you about Squarespace. Please give details of this as well. Thank you

    1. Justin says:

      I believe it’s possible to host in5 content inside of Squarespace within an iframe. Or are you asking about a comparison to the web builder in Squarespace?

  12. Very amazing post. thank you so much for sharing. hope will see this type of comparison in your blog website.

  13. HAMZEY SOBH says:

    Amazing Blog nice to see this blog, it’s very helpful.

  14. Your Post Is very Helpfull Thanks For share best post share to public

  15. Sarah J. says:

    Hey there! I noticed the discussion about Amazon store setup, and I couldn’t resist chiming in. Having a well-optimized Amazon store can significantly boost your sales and brand visibility. If you need any assistance or have questions about the process, feel free to ask. I’m here to help you navigate the exciting world of Amazon selling

  16. Sarah J. says:

    Engage in a discussion about the pros and cons of using professional Wikipedia page creation services. Share your experiences, ask questions, and gain insights into the advantages and potential drawbacks of outsourcing the creation of Wikipedia pages.

  17. this is a very good article i thank the author of this article. and please visit to Tel U

Leave a comment

Your email address will not be published. Required fields are marked *