Design Guidelines

This page outlines some of the design requirements to make a visually appealing publication. For H5mag many of the same principles that apply to other online publications apply. This page is mainly intended for designers who are converting an existing print publication to an online H5mag publication.

Document dimensions

Since a magazine can be viewed on many different devices with different screen dimensions there is no fixed size for the result.

By default the landscape artboard has a size of 1280 by 720 pixels. This is a good starting point, however you can adjust the artboard size and specify the amount of bleed for better display on a wider variety of devices.

Text

H5mag supports uploading custom webfonts and all fonts that are available on fonts.com. However, designers should be aware that using a font online may require a license.

For every font variant (bold, italic, light...) another webfont needs te be loaded, which will increase the loading times. For an optimal user experience a limited amount of webfonts should be used in a publication.

H5mag supports text columns, but there are some restrictions. More information on what can be done with text can be found on the text area page.

To ensure an optimal user experience across different devices, apply auto height for text areas instead of fixed height. This approach accommodates varying font rendering on different devices.

Colors

As H5mag publications are displayed on a computer screen all colors are defined as RGB. The colorpicker uses a hexidecimal notation. To ensure the proper reproduction of colors, the color codes should be supplied as hexadecimal values (six characters with numbers 0-9 and letters A to F, for example: #139ACF)

Artwork

All images should be in an RGB colorspace. Images that are in CMYK or other colorspace will be converted and may lose some fidelity. They can even look completely different for some users. JPEG is the preferred image format for photography.

Images with transparency

Images with transparency should be PNG images. You can also use SVG for vector images. We automatically convert SVG to PNG for browsers that don't support SVG.

Background images

Background images should contain some trailing space around the edges. This allows for the correct (full screen) display on devices with different aspect ratios.

For a background image to fit on an iPad tablet (with an aspect ratio of 4:3) on landscape and portrait mode the image should be at least 1024 by 1024 pixels (square). In portrait mode the left and right side are not visible, 768 pixels in the center are used. This may be less on other tablets with an aspect ratio of 16:9.

Don't forget that for retina devices double the pixels is needed, so images with a width of 2048 pixels are preferred. Images get automatically scaled to the optimal resolution.

More about recommend image resolution and file sizes

Animation

Within H5mag it is possible to animate elements. While possible to create your own animations through scripting, this is very labor intensive. It is recommended to use the predefined animations which can be configured and mixed in order to create complex and unique effects.

Video

Videos have to be uploaded to either Vimeo or Youtube. This can be done at the highest quality that each of these services support.

Navigation bar

The amount of customization of the navigation bar depends on your plan.

Loading screen

Wheter the loading screen can be customized depends on your plan.