HTML5 Tutorial:

Creating Responsive Content

design web content to resize to suit different devices


Responsive Content Overview

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.

Beyond Responsive Limitations

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.

Keep Control

Opus lets you set minimum and maximum sizes so you can limit the amount the content scales and with Opus Pro you can even use JavaScript to monitor the screen size and switch to more suitable content if the screen is too small - see Opus Xtras for Device Checker script.

HTML5 Components

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.

Tutorial Introduction

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.

Screen Widths

Most responsive web design relies on what are called media queries to get the size of screen the visitor is using but we have designed a simple script to do a similar thing using javascript. The final section of the tutorial shows how to update an Opus variable to tell Opus what the screen size is so you can switch the material if required.

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