Responsive Artboards

Every article is made up out of several artboards which allow you to create a responsive magazine with optimized layouts for different screen sizes and orientations.

The system updates the content and layout automatically to the other artboards; optimization of the layout and styling can be done manually. You can disable and enable the automatic copying of styles to other artboards with the "copy changes" checkboxes on the right side of the screen under 'Responsive Artboards'.

Switching artboards

You can switch to another artboard anytime by clicking the icons in the statusbar on the bottom of your screen.  The artboards are listed in the order 'landscape', 'portrait', 'mobile' and 'PDF / Print'.

Any changes you make to the content will automatically be applied to all artboards. Switching to another artboard allows you to get an approximate view what your magazine will look like on different devices. We highly recommend you to demo the design on multiple devices after finishing it.

The artboard switch is not a setting to set the article size.

Scaling artboards

In the editor, you can scale the artboard to fit to your available screen size or you can zoom in to view specific details of your magazine. To scale, select the zoom-level you want from the list next to the artboard selection.

Available artboards

The following artboards are available:

  • Medium landscape tablet / desktop Used on all desktop, and laptop computers and tablets with with screens of at least 6".
  • Portrait tablet This is a narrower artboard that is used on tablets that are turned 90 degrees into portrait mode.
  • Mobile portrait This is an even more narrow artboard, meant for smartphones and similar devices with screens that are smaller than 6". Usually text should be put in one column for this artboard.
  • PDF / Print This artboard is disabled by default, but can be enabled in the Edition Settings. It's size and orientation will depend on the paper size and orientatio you set there.

Screenshots of an article's different artboards:

What changes are shared between artboards?

The system will try to guess which changes should be shared between artboards. In general the following principles apply:

  • All content, text and images added to one artboard will be present on another.
  • Some style attributes are copied from the landscape to other artboards, but never the other way around.

Diagram showing which changes are shared between artboards.

Controlling shared changes

In the "Responsive Artboards" section of the sidebar there are some checkboxes which allow you to control what kind of styles are automatically copied to other artboards.

You can choose not to copy animations to the portrait and mobile artboards. Additionally, it is also possible to change the behavior of popup windows on the mobile artboard. Rather than having the popups open and fill the screen, you can choose to have the content of the popups displayed inline, making it a long scrollable page.

The checkboxes to copy styles from Landscape to other artboards will be disabled when you edit on those artboards, to prevent undoing changes any you made. If you want to revert the styles of a specific artboard to the base styles H5mag would generate, you can use the 'reset' links behind the Copy styles option.

Custom artboards

In the Edition settings you can change the dimensions of your artboards and set the amount of bleed for more control over how the magazine looks on different devices. Read more about configuring artboards.

Last modified: