Responsive Content Settings

While making a website or creating a course for users, we always strive to make it responsive. We ensure that it looks perfect in all devices, and the content on the page comes up clearly.

In GrassBlade xAPI Companion v2.0, we made xAPI content more responsive and fluid. In this new update, your content will show up elegantly in all different devices.

Now, you can set the content aspect ratio with popular preset sizes like in 16:9, 4:3, and 1:1. With this, you can fix the aspect ratio to show content in a fixed ratio in different screen sizes.

Find this setting: xAPI Content edit page > xAPI Content Details > Override Global Settings

If you don’t want to use these presets, you can set it with your desired content aspect ratio. Alternatively, you unlock the aspect ratio to make content more fluid.

How to use?

Example 1: Responsive Content – Videos

Videos are responsive and have a fixed aspect ratio, so let’s say you have used YouTube video which has a 16:9 (or 1.7777) aspect ratio. Your settings would be:

1. Lock Aspect Ratio: Checked.
   (clicking 16:9 will automatically set height based on width.)
2. Width: 100%
3. Height: 56.25%

Based on your UI and preference, you can change the Width/Height in the same ratio.

Example 2: Fluid Content – Articulate Rise 360

Articulate Rise 360 content is fluid and works with any aspect ratio. So, you might want to keep it fluid. Your settings would be:

1. Lock Aspect Ratio: Checked.
   (clicking 1:1 will automatically set height based on width.)
2. Width: 100%
3. Height: 100%

Based on your UI and preference, you can change the width and height to a smaller value like 90%.

Example 3: Using Viewport size to set the width and height of the content

You can set up the content’s width and height with respect of viewport’s width and height. For that you will have to use ‘vw’ and ‘vh’ at the end of the value. ‘vw’ is used to set the value with respect of view port width and ‘vh’ is used to set the value with respect of viewport’s height.

1. Lock Aspect Ratio: Unchecked.
2. Width: 100vw
3. Height: 100vh

Example 4: Non-Responsive – Articulate Storyline 2

Contents that are fixed size and non-responsive like Articulate Storyline 2 (especially the flash version) do not work well with a responsive container and you would want to have a fixed size setting for them. For example, if you have a content of size 960 x 640px. Your settings would be:

1. Lock Aspect Ratio: Unchecked.
2. Width: 960px
3. Height: 640px

In this mobile world, every other person is using multiple devices. To make the user experience more smooth, we have to provide support for all type of screen sizes.

At Next Software Solution, we also believe in interoperability and smooth user experience. Our team is always ready to make the necessary changes to meet the latest design and technology trends.

Hope you find these features useful. If you have any comments, suggestions, or feature requests feel free to drop a message in the comment section below or contact us.

Follow us on Facebook, Twitter, and LinkedIn for more latest and quick updates.