Web design now needs to accommodate visitors using mobile devices including phones and tablets which means the content must adapt to the different screen sizes using special scripts and layouts.
This is called responsive or adaptive web design. In a responsive design the website will resize to match the screen of the monitor it is beng displayed on. Adaptive design usually relies on a website being broken down into a grid of sections (called DIVs (for division - see W3Schools for details). For smaller screens these DIVs are stacked on top of each other but for larger devices they are placed across the screen in a grid and so these DIVs are designed as a percentage of the available space rather than the fixed pixel widths which most interactive content relies on.
There are a number of responsive web templates available on the internet, especially those based on the Bootstrap system. We have some recommendations of our own on our Additional Tools and Opus Xtras pages.
Responsive design often means dropping interactive or animated content as it is not flexible enough. From v9.75, both Opus Creator and Opus Pro let you design active content which can resize to fit whatever space the design requires, even when published to individual DIVS and when the DIV is designed as a percentage of the space rather than a fixed pixel width.
Ideal for banner adverts, animations, quizzes, web apps, games and infographics.
By allowing content to be resizable, Opus Pro and Creator allow you to create HTML5 components, games and widgets which you can not only use on your site but also offered to other web designers to use as ready-made web components without being stuck with a set size.
This tutorial provides instructions for creating full pages which are responsive as well as material which can be placed in a section of a standard web page and will resize according to the size set by the surrounding HTML. You will see how to set a minimum size in Opus to ensure the material is still viewable/usable or how the size can be limited by the surrounding HTML.
In the next section of this tutorial we learn to set the Chapter Properties to allow the publication to resize.
creating responsive content in Opus Creator