Responsive layouts using InDesign publish online and liquid layouts

[paulr96090412]

Hi,

Is it possible to use InDesign to create responsive layouts for publishing online? I have a brochure design that im going to rework to landscape iPad dimensions and add some interactivity using some of the animation features. Is it possible using liquid layout for this to be responsive so it might work on an iphone in portrait. I have got things like background imagery to work but is it correct that only one item on a page can be liquid?

Thanks

[Just Shoot Me]

I've moved your post to the proper forum

[BobLevine · Accepted solution]

No. Publish Online is fixed.

What you want is a website. Any good WordPress theme will let you do this.

[paulr96090412]

Thanks Bob. Needs to be an interactive brochure im afraid. I will probably produce two versions one for ipad/desktop and then one for mobile in that case. I was kind of hoping that with an add-on like IN5 there may have been away of making it responsive.

[JonathanArias]

you can't achive responsive using indesign. In5 has an option to allow you to scale the layout. 

if you want true responsive use soemthign  like pugpig,  those are html platforms that are template based for publication design. However Pugpig is not cheap and you can achieve the same with wordpress like Bob said.

[Justin Putney]

Responsive is coming to in5, see below.

[JonathanArias]

darn, i forgot that you had that on beta out..  minus 2 for me..

hope you are doing well Justin

[Justin Putney]

LOL. No worries, Jonathan. 🙂

I'm doing well. Staying inside. Hope you're well too!

[Justin Putney]

Hi Paul,

I have a product called in5 that exports HTML from InDesign. It's similar to Publish Online, but it lets you host the files on your own server.

in5 supports Liquid Layout, which is somewhat limited by itself, but in5 is also about to support responsive layouts from InDesign's Alternate Layouts. This can even be combined with Liquid Layouts as seen in the video below:

This feature is currently in beta, but will be released in a few weeks. The beta is open to anyone interested, but requires a certain license level to access.

[paulr96090412]

Hi Justin,

Thanks for the message. That looks like the exact thing I need. We currently pay for In5 although I cant recall what level of licence we have. What level do you need for the BETA?

Paul

[Justin Putney]

Hi Paul,

The responsive feature is available in the Gold plan (formerly called the Quad plan). If you send me a message, I can get you the beta download (and/or upgrade your plan).

Best,
Justin

[paulr96090412]

Thanks Justin

[annel26234997]

Yes, this is very cool! Thank on you for working on this! So, is the export in-line and can I also use CSS spezifications, which can be exportet? 

Thanks

Anne

[Justin Putney]

Hi Anne,

Not sure what you mean by "in-line." in5 essentially exports a "fixed" layout.

You can append custom CSS to be exported.

This video explains the basics of using in5:

This article explains about attaching CSS:

https://ajarproductions.com/in5course/?lesson=resources

[annel26234997]

Hi, I was directly motivated and downloaded the free version. Everything looks great. I already did some lessons 🙂 But, it is possible with the full version to use styles created in InDesign as CSS in the in5 Export, right?

Thanks, Anne

[Justin Putney]

Much of what you create in InDesign is translated to a style in the output.

If you mean text specifically, then choose one of the HTML options for Text Rendering. You'll get live text in the output with styles that match your InDesign styles.

The positioning of the text will not be exact the way it is when you render the text as images, but it will be selectable, editable text (even tables).

[Bevi Chagnon - PubCom.com]

Justin, how does In5 deal with accessibility requirements? WCAG in this case.

[Justin Putney]

Hi Bevi,

The first goal of in5 is to replicate the layout and interactivity created in InDesign.

After that, I aim to make in5 as accessible as possible.

in5 does several things automatically to create a minimum level of accessibility (e.g., generating alt attributes even when you don't manually create them), but the quality of the accessibility depends heavily on how you create your InDesign document, and which options you choose when you export.

I'm actively looking for accessibility feedback to improve elements. That will be an ongoing effort, but it is a priority of mine (after layout and interactivity).

Here's an article with some details:

https://ajarproductions.com/blog/2017/07/24/how-to-export-accessible-508-compliant-html-layouts-from...

I'm also planning an in-depth video course focused on accessibility with in5.