3. 3
1. Introduction
This document includes a series of recommendations on the use of multimedia elements within the projects created
with Netex learningMaker, such as images, audios, videos, documents, animations, interactive activities or fonts.
These resources are usually created by tools external to Netex learningMaker. That is why it is so important to take
these recommendations into account so that the quality of the content we are going to produce is not affected by the
misuse of other type of tools when creating the resources we are going to include in our projects. Therefore, we do not
only make recommendations for the formats and configurations, but also for tools which make creation easier in an
appropriate way.
2. Images
Images can be displayed in our projects in different ways, depending on the template and the component we are going
to use to insert them.
In some cases, images will have to have a specific height and width, and in others we will be completely free to decide
their size. You can consult all these details in the user guide of the template/s you are going to use, within the Appendix
corresponding to the images sizes, where you will find an image similar to the following:
2.1 Supported formats
The supported image formats are:
JPEG (recommended for photographic images)
GIF (recommended for images with blocks of plain colours, such as icons or cliparts)
PNG (recommended for images with effects such as shines or shadows, which also require transparency)
2.2 Recommended configurations
Whatever format and configuration we are going to apply to our images, we can use the following guide to check that
the weight of our image is optimal:
4. 4
Background images should not weigh more than 10 KB.
The images we use for the header of a page, section or similar should weigh around 60 KB.
The images which correspond with pictures or other relevant elements within our project should not weigh
more than 100 KB.
According to the image format we use, the recommended configurations will be different. It is important to highlight
that these recommendations are generic, as they can vary depending on the specific characteristics of each image we
are going to use:
For JPEG format images:
Property Recommended value
Quality High (70%)
Height Specified in the component in which it is going to be used, in case it exists.
Width Specified in the component in which it is going to be used, in case it exists.
Resolution 72 PPI
For GIF format images:
Property Recommended value
Colours 256 or less, depending on the number of colours the image contains
Palette Web
Height Specified in the component in which it is going to be used, in case it exists.
Width Specified in the component in which it is going to be used, in case it exists.
For PNG format images:
Property Recommended value
Depth 24 bits
Height Specified in the component in which it is going to be used, in case it exists.
Width Specified in the component in which it is going to be used, in case it exists.
Resolution 72 PPI
2.3 Recommended programmes
We recommend the use of Adobe PhotoShop and Adobe Illustrator to create, design and manipulate images.
If our images have already been created and we just need to convert them following the recommendations in this
guide, we recommend the use of the free online tool Yahoo!Smush.it
3. Videos
Videos can be placed in our projects in different ways: within the body of a page, a pop-up or a multimedia gallery.
Depending on the template we are going to use in our project, we will have different possibilities.
In any case, unlike images, video formats and configurations are independent of the place where we use them within
our project.
3.1 Supported formats
The only supported video format is MP4, as it is the only one which offers compliance with all the devices and browsers
on the market.
3.2 Recommended configurations
The recommended weight of a video depends on its durations and its frames. The longer the video is, the heavier it will
be. Besides, videos which have many transitions and which are very dynamic will be heavier than the static ones.
5. 5
In any case, we can take as a general rule the fact that each minute of video should not be exceed 8 MB. That is, if we
have a 4-minute video, the weight should not exceed 32 MB.
Therefore, we recommend the following codification settings:
Property Recommended value
Resolution 640x360
Codec H.264 (x264)
H.264 Profile Baseline
H.264 Level 3.1
Bitrate Video 1 Mb/s
Bitrate Audio Mono (if there is only one voice) / Stereo (if there is music and/or several voices)
3.3 Recommended programmes
We recommend the use of Adobe Premiere and Adobe AfterEffects to create, design and manipulate videos.
If the source video is already available and we just want to convert it to any of the formats supported by learningMaker,
we recommend the use of the free open source tool Handbrake.
4. Audios
Audios can be included in our projects in different places: within the body of a page, a pop-up or a multimedia gallery.
Depending on the template we are going to use in our project, we will have different possibilities.
The following configuration and recommendations are of general application for any audio we use in any project.
4.1 Supported formats
The only supported audio format is MP3, as it is the only one which offers compliance with all the devices and browsers
on the market.
4.2 Recommended configurations
The weight of an audio depends on the sound complexity of the recording we are going to use and its duration. The
longer the audio is and the more sound spectrum it has to cover, the heavier it will be.
Despite the fact that there is no master rule to know if the weight of an audio is correct, each minute of audio should
not exceed 1 MB. That is, if we have a 3-minute audio, the weight should be about 3 MB.
Property Recommended value
Bitrate 128
Codec MP3
Codec Profile VBR (Variable Bit Rate)
Encoding lossy
Channels 2 (Stereo) if there is music or several voices / 1 (Mono) if there is only one voice
Sample Rate 44100 khz
Bit Float 16-bit
4.3 Recommended programmes
We recommend the use of Adobe Audition to create, design and manipulate audios.
6. 6
5. Documents
Documents are resources which can be introduced into our projects so that students can download them or view them
online, serving as support or additional material.
For this reason, we will link them in general to components in our project, whether from a link in a text or an image, or
from a widget. Depending on the template we use, we will have more or less options to do it.
In any case, the following recommendations can be applied to any document we want to include in our project.
5.1 Supported formats
In general, all types of files are supported, but the use of PDF format resources is recommended because it is the only
one which can be viewed on any device and browser without requiring the user to install a specific viewer.
5.2 Recommended configurations
The weight of a PDF document depends on the number of pages and the type of information it is going to include. The
more pages and images it contains, the heavier it will be.
A good criterion to know if the weight of our PDF is correct consists on checking that each page of our document
weighs about 50KB. That is, if our document has 10 pages, its size should be about 500 KB.
Property Recommended value
Resolution 72 PPI
5.3 Recommended programmes
We recommend the use of Adobe InDesign to create, design and manipulate PDF documents.
6. Animations and interactions
Animations and interactions are resources which can be introduced into our projects through the “External resource”
and “Iframe” components.
They are generally used to include elements created by external tools which provide our content with interactivity and
animation, usually activities.
6.1 Supported formats
It is important to emphasize that these external resources have to be developed in formats which are compatible with
our final users’ devices and browsers. Not only on a technological level, but also on a screen resolution level.
The tool supports the inclusion of external resources in the following formats:
SWF (Flash)
HTML
Given that the support of Flash resources is inexistent or limited on many devices (iPhone, iPad), it is recommended to
use external resources created in HTML format, specifically in HTML5 and with “Responsive Web Design” capacity; that
is, being able to automatically adapt to the size of the user’s device.
For those cases in which it is complicated to obtain the desired functionality with HTML5, it is recommended to create
two versions of the resource: one in Flash with all the functionality and another one in HTML5 with reduced
functionality. Netex learningMaker components allow you to include both resources in one component and then our
project will show one or other version depending on the capacities of our device and browser.
7. 7
6.2 Recommended configurations
It is impossible to define a rule which establishes the weight of an animation or interaction because the content can be
varied and different. A good practice consists on including external resources with a weight below 10 MB, as they can
make projects too heavy and the user experience can be affected by the required loading times.
6.3 Recommended programmes
We recommend the use of Adobe Edge to create animations and interactions in HTML5, which will also allow them to
automatically adapt to the different devices. Besides, Adobe Edge allows us to publish the resources both in HTML5 and
Flash.
If we just want to generate resources in Flash, we recommend the direct use of Adobe Flash Professional.
7. Fonts
Depending on the template we are going to use in the project, we have different alternatives for the fonts:
Use of basic combinations (use of serif, sans serif and monospaced fonts which are practically standard in all
browsers and operating systems)
Use of safe combinations (normally used on pages or applications for the Web, and which include fonts with
similar visualizations for all browsers and operating systems)
Use of aggressive combinations (they include fonts into the safe combinations which are not supported by all
browsers and operating systems, but which are supported by the most important ones)
Use of embedded fonts (you can use any font you want, but on low capacity devices there will be performance
problems and a considerable increase on the content weight)
The templates included by default in the tool always use “safe combinations”; but if you are a customer with custom
templates you are probably using “aggressive combinations” or “embedded fonts”.
It is important to take into account that each browser and operating system uses their own way to render the fonts.
Therefore, it is almost impossible to make two things look exactly the same on different browsers.
7.1 Use of basic combinations
There are three families of basic fonts on any browser and operating system:
SANS-SERIF, typeface without projecting features at the end of strokes (serif), also known as gothic or
linear. Eg: Arial, Helvetica or Verdana.
SERIF, typeface with projecting features at the end of strokes (serif), also known as Roman. Eg: Georgia or
Times New Roman.
MONOSPACE, typeface in which all characters occupy the same amount of horizontal space and are usually
very clear and wide. They can have serifs or not, but they are not very useful for working with long paragraphs.
Eg: Courier or Courier New.
The use of classic combinations of fonts is materialised with the definition of a list of fonts based on these families. We
are talking about the following combinations:
Sans serif «wide» combination: Verdana, Geneva, sans-serif.
Sans serif «narrow» combination: Tahoma, Arial, Helvetica, sans-serif.
Serif «wide» combination: Georgia, Utopia, Palatino, 'Palatino Linotype', serif.
Serif «narrow» combination: 'Times New Roman', Times, serif.
Monospace combination: 'Courier New', Courier, monospace.
As you can see in the combinations, the last font reserve is defined as the family base font, which always has an
equivalent font in any operating system or browser because all of them use some of the fonts of these families as its
“implementation by default”.
8. 8
7.2 Use of safe combinations
If basic combinations are not enough or not attractive enough, we can complement them with a “safe” additional font.
A font is said to be “safe” when it is available on almost all operating systems and browsers on the market. The industry
considers the following fonts as safe:
Arial/Helvetica
Courier/Courier New
Georgia
Times/Times New Roman
Trebuchet MS
Verdana
Taking this into account, the most used “safe combinations” in the Web are the following:
Safe sans serif combination: Arial, Helvetica, sans-serif; Tahoma, Geneva, sans-serif; "Trebuchet MS",
Helvetica, sans-serif; Verdana, Geneva, sans-serif.
Safe serif combination: "Palatino Linotype", "Book Antiqua", Palatino, serif.
Safe monospace combination: "Lucida Console", Monaco, monospace.
7.3 Use of aggressive combinations
Nowadays, a lot of people use less traditional “stocks” and include in the combinations names of fonts which are not
normally considered to be safe, but they are usually installed by default in most browsers and operating systems.
In these cases, the order of the combination is the following: exact font, closest alternative, alternative provided by the
operating system, safe font, family name.
Taking this into account, the most used combinations are:
Serif based on Times New Roman: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L
Regular", Times, "Times New Roman", serif;
Serif based on Georgia: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif",
"Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
Serif based on Garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua",
Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond",
"ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia,
serif;
Sans serif based on Helvetica/Arial: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT",
"Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva,
"Helvetica Neue", Helvetica, Arial, sans-serif;
Sans serif based on Verdana: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans",
"Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
Sans serif based on Trebuchet: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera
Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
Sans serif based on Impact: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat",
"Bitstream Vera Sans Bold", "Arial Black", sans-serif;
Monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier
New", Courier, monospace.
7.4 Use of embedded fonts
Finally, the option to embed the fonts directly in the template is available by using the @font-face property. It is
possible to use any font we want with this alternative and it is guaranteed that it will be displayed in any situation.
9. 9
However, the use of embedded fonts seriously affects the performance of our content and their weight, as the font
needs to be stored completely within the content, and the browser has to download and render it for each access to
them.
Besides, in the case you use property fonts, you will need to have the licences which allow their use and distribution.
7.5 Recommendations
Depending on the template we are going to use in our project, we will have different possibilities. Nevertheless, we
recommend the use of basic and safe combinations, avoiding the use of embedded fonts as much as possible.
