HTML5 Solutions:

Responsive Content

create resizable and flexible content for responsive web designs

HTML5 Resizable Web Content

All websites now need to accommodate different size screens as their visitors view them from mobiles, tablets as well as desktops. That used to mean dumping banners, animations and interactive elements produced to a fixed size. But now, truly flexible responsive/adaptive content is available in both Creator and Opus Pro via a simple setting in a WYSiWYG editor and without any scripting!

All the content provided on this website is resizable. View any of the examples below and resize your browser window to view truly responsive content.

No Scripting, Just Select and Apply

You can simply choose to let your content resize vertically, horizontally or both by setting the options in the Chapter Properties.

Responsive Content Settings

Ensure the Maximum Width and Maximum Height settings are deselected to ensure the content always fits the screen. (If your content contains lower resolution bitmap images you might want to set maximum sizes here to preserve the quality when those images are resized.)

We recommend you set the minimum height and width separately to give you full control and ensure your content remains usable. If the surrounding DIV is smaller than your minimum then the content will still work it will just be cut off. If you are familiar with CSS you can also use standard CSS options such as min-height and min-width to set the minimum size for the DIV your Opus content will fill.

Controlled by The HTML Around It

Then simply publish your Opus HTML5 as a Single DIV and embed it in any other DIV in your responsive/adaptive page. Whenever your responsive design resizes the surrounding DIV your Opus content will resize with it - even if it contains animation and interactive content.

view tutorial