In today’s ultra connected world, a good portion of your students probably own multiple devices. Of course, they may want to take your eLearning course on all their devices. They might want to start the course on their desktop computer at work, continue it on their phone while commuting back home, and finish it at night on their tablet. In other situations, students might only have a mobile phone available to take the course, and sometimes the topic to teach only makes sense on a mobile device. To address these needs, you want to deliver your course on multiple screens.
As of Captivate 6, you can publish your courses in HTML5, which makes them available on mobile devices that do not support the Flash technology. Now, Captivate 8 takes it one huge step further by introducing Responsive Projects.
A Responsive Project is a project that you can optimize for the desktop, the tablet, and the mobile phone. It is like providing three different versions of the course in a single project.
In this article, by Damien Bruyndonckx, author of the book Mastering Adobe Captivate 8, you will be introduced to the key concepts and techniques used to create a responsive project in Captivate 8. While reading, keep the following two things in mind. First, everything you have learned so far can be applied to a responsive project. Second, creating a responsive project requires more experience than what a book can offer. I hope that this article will give you a solid understanding of the core concepts in order to jump start your own discovery of Captivate 8 Responsive Projects.
(For more resources related to this topic, see here.)
About Responsive Projects
A Responsive Project is meant to be used on multiple devices, including tablets and smartphones that do not support the Flash technology. Therefore, it can be published only in HTML5. This means that all the restrictions of a traditional HTML5 project also apply to a Responsive Project. For example, you will not be able to add Text Animations or Rollover Objects in a Responsive Project because these features are not supported in HTML5.
Responsive design is not limited to eLearning projects made in Captivate. It is actually used by web designers and developers around the world to create websites that have the ability to automatically adapt themselves to the screen they are viewed on. To do so, they need to detect the screen width that is available to their content and adapt accordingly.
Responsive Design by Ethan Marcotte
If you want to know more about responsive design, I strongly recommend a book by Ethan Marcotte in the A Book Apart collection. This is the founding book of responsive design. If you have some knowledge of HTML and CSS, this is a must have resource in order to fully understand what responsive design is all about. More information on this book can be found at http://www.abookapart.com/products/responsive-web-design.
Viewport size versus screen size
At the heart of the responsive design approach is the width of the screen used by the student to consume the content. To be more exact, it is the width of the viewport that is detected—not the width of the screen. The viewport is the area that is actually available to the content.
On a desktop or laptop computer, the difference between the screen width and the viewport width is very easy to understand. Let’s do a simple experiment to grasp that concept hands-on:
- Open your default web browser and make sure it is in fullscreen mode.
- Browse to http://www.viewportsizes.com/mine.
The main information provided by this page is the size of your viewport. Because your web browser is currently in fullscreen mode, the viewport size should be close (but not quite the same) to the resolution of your screen.
- Use your mouse to resize your browser window and see how the viewport size evolves.
As shown in the following screenshot, the size of the viewport changes as you resize your browser window but the actual screen you use is always the same:
This viewport concept is also valid on a mobile device, even though it may be a bit subtler to grasp.
The following screenshot shows the http://www.viewportsizes.com/mine web page as viewed in the Safari mobile browser on an iPad mini held in landscape (left) and in portrait (right). As you can see, the viewport size changes but, once again, the actual screen used is always the same. Don’t hesitate to perform these experiments on your own mobile devices and compare your results to mine.
Another thing that might affect the viewport size on a mobile device is the browser used. The following screenshot shows the viewport size of the same iPad mini held in portrait mode in Safari mobile (left) and in Chrome mobile (right).
Note that the viewport size is slightly different in Chrome than in Safari. This is due to the interface elements of the browser (such as the address bar and the tabs) that use a variable portion of the screen real estate in each browser.
Understanding breakpoints
Before setting up your own Responsive Project there is one more concept to explore. To discover this second concept, you will also perform a simple experiment with your desktop or laptop computer:
- Open the web browser of your desktop or laptop computer and maximize it to fullscreen size.
- Browse to http://courses.dbr-training.eu/8/goingmobile.
This is the online version of the Responsive Project that you will build in this article. When viewed on a desktop or laptop computer in fullscreen mode, you should see a version of the course optimized for larger screens.
- Use your mouse to slowly scale your browser window down. Note how the size and the position of the elements are automatically recalculated as you resize the browser window.
- At some point, you should see that the height of the slide changes and that another layout is applied.
The point at which the layout changes is situated at a width of exactly 768 px. In other words, if the width of the browser (actually the viewport) is above 768 px, one layout is applied, but if the width of the viewport falls under 768 px, another layout is applied. You just discovered a breakpoint.
The layout that is applied after the breakpoint (in other words when the viewport width is lower than 768 px) is optimized for a tablet device held in portrait mode. Note that even though you are using a desktop or laptop computer, it is the tablet-optimized layout that is applied when the viewport width is at or under 768 px.
- Keep scaling the browser window down and see how the position and the size of the elements of the slide are recalculated in real time as you resize the browser window.
This simple experiment should better explain what a breakpoint is and how these breakpoints work. Before moving on to the next section, let’s take some time to summarize the important concepts uncovered in this section:
- The aim of responsive design is to provide an optimized viewing experience across a wide range of devices and form factors.
- To achieve this goal, responsive design uses fluid sizing and positioning techniques, responsive images, and breakpoints.
- Responsive design is not limited to eLearning courses made in Captivate, but is widely used in web and app design by thousands of designers around the world.
- A Captivate 8 Responsive Project can only be published in HTML5. The capabilities and restrictions of a standard HTML5 project also apply to a Responsive Project.
- A breakpoint defines the exact viewport width at which the layout breaks and another layout is applied.
- The breakpoints, and therefore the optimized layouts, are based on the width of the viewport and not on the detection of an actual device. This explains why the tablet-optimized layout is applied to the downsized browser window on a desktop computer.
- The viewport width and the screen width are two different things.
In the next section, you will start the creation of your very first Responsive Project.
To learn more about these concepts, there is a video course on Responsive eLearning with Captivate 8 available on Adobe KnowHow. The course itself is for a fee, but there is a free sample of 15 minutes that walks you through these concepts using another approach. I suggest you take some time to watch this 15-minute sample at https://www.adobeknowhow.com/courselanding/create-responsive-elearning-adobe-captivate-8.
Setting up a Responsive Project
It is now time to open Captivate and set up your first Responsive Project using the following steps:
- Open Captivate or close every open file.
- Switch to the New tab of the Welcome screen.
- Double-click on the Responsive Project thumbnail. Alternatively, you can also use the File | New Project | Responsive Project menu item.
This action creates a new Responsive Project. Note that the choice to create a Responsive Project or a regular Captivate project must be done up front when creating the project. As of Captivate 8, it is not yet possible to take an existing non-responsive project and make it responsive after the fact.
The workspace of Captivate should be very similar to what you are used to, with the exception of an extra ruler that spans across the top of the screen. This ruler contains three predefined breakpoints. As shown in the following screenshot, the first breakpoint is called the Primary breakpoint and is situated at 1024 pixels.
Also, note that the breakpoint ruler is green when the Primary breakpoint is selected. You will now discover the other two breakpoints using the following steps.
- In the breakpoint ruler, click on the icon of a tablet to select the second breakpoint.
The stage and all the elements it contains are resized. In the breakpoint ruler at the top of the stage, the second breakpoint is now selected. It is called the Tablet breakpoint and is situated at 768 pixels. Note the blue color associated with the Tablet breakpoint.
- In the breakpoint ruler, click on the icon of a smartphone to select the third and last breakpoint.
Once again, the stage and the elements it contains are resized. The third breakpoint is called the Mobile breakpoint and is situated at 360 pixels. The orange color is associated with this third breakpoint.
Adjusting the breakpoints
In some situations, the default location of these three breakpoints works just fine But, in other situations, some adjustments are needed. In this project, you want to target the regular screen of a desktop or laptop computer in the Primary view, an iPad mini held in portrait in the Tablet view, and an iPhone 4 held in portrait in the Mobile view. You will now adjust the breakpoints to fit these particular specifications by using the following steps:
- Click on the Primary breakpoint in the breakpoints ruler to select it.
- Use your mouse to move the breakpoint all the way to the left.
Captivate should stop at a width of 1280 pixels. It is not possible to have a stage wider than 1280 pixels in a Responsive Project. For this project, the default width of 1024 pixels is perfect, so you will now move this breakpoint back to its original location.
- Move the Primary breakpoint to the right until it is placed at 1024 pixels.
- Return to your web browser and browse to http://www.viewportsizes.com.
- Once on the website, type iPad in the Filter field at the top of the page.
The portrait width of an iPad mini is 768 pixels. In Captivate, the Tablet breakpoint is placed at 768 pixels by default, which is perfectly fine for the needs of this project.
- Still on the http://www.viewportsizes.com website, type iPhone in the Filter field at the top of the page.
The portrait width of an iPhone 4 is 320 pixels. In Captivate, the Mobile breakpoint is placed at 360 pixels by default. You will now move it to 320 pixels so that it matches the portrait width of an iPhone 4.
- Return to Captivate and select the Mobile breakpoint.
- Move the Mobile breakpoint to the right until it is placed at exactly 320 pixels.
Note that the minimum width of the stage in the Mobile breakpoint is 320 pixels. In other words, the stage cannot be narrower than 320 pixels in a Responsive Project.
The viewport size of your device
Before moving on to the next section, take some time to inspect the http://viewportsizes.com site a little further. For example, type the name of the devices you own and compare their characteristics to the breakpoints of the current project. Will the project fit on your devices? How do you need to change the breakpoints so the project perfectly fits your devices?
The breakpoints are now in place. But these breakpoints only take care of the width of the stage. In the next section, you will adjust the height of the stage in each breakpoint.
Adjusting the slide height
Captivate slides have a fixed height. This is the primary difference between a Captivate project and a regular responsive website whose page height is infinite. In this section, you will adjust the height of the stage in all three breakpoints. The steps are as follows:
- Still in Captivate, click on the desktop icon situated on the left side of the breakpoint switcher to return to the Primary view.
- On the far right of the breakpoint ruler, select the View Device Height checkbox.
As shown in the following screenshot, a yellow border now surrounds the stage in the Primary view, and the slide height is displayed in the top left corner of the stage:
For the Primary view, a slide height of 627 pixels is perfect. It matches the viewport size of an iPad held in landscape and provides a big enough area on a desktop or laptop computer.
- Click on the Tablet breakpoint to select it.
- Return to http://www.viewportsizes.com/ and type iPad in the filter field at the top of the page. According to the site, the height of an iPad is 1024 pixels.
- Use your mouse to drag the yellow rectangle situated at the bottom of the stage down until the stage height is around 950 pixels.
It may be needed to reduce the zoom magnification to perform this action in good conditions.
After this operation, the stage should look like the following screenshot (the zoom magnification has been reduced to 50 percent in the screenshot):
With a height of 950 pixels, the Captivate slide can fit on an iPad screen and still account for the screen real estate consumed by the interface elements of the browser such as the address bar and the tabs.
- Still in the Tablet view, make sure the slide is the selected object and open the Properties panel.
- Note that, at the end of the Properties panel, the Slide Height property is currently unavailable.
- Click on the chain icon (Unlink from Device height) next to the Slide Height property.
By default, the slide height is linked to the device height. By clicking on the chain icon you have broken the link between the slide height and the device (or viewport) height. This allows you to modify the height of the Captivate slide without modifying the height of the device.
- Use the Properties panel to change the Slide Height to 1024 pixels.
On the stage, note that the slide is now a little bit higher than the yellow rectangle. This means that this particular slide will generate a vertical scrollbar on the tablet device held in portrait. Scrolling is something you want to avoid as much as possible, so you will now enable the link between the device height and the Slide Height.
- In the Properties panel, click on the chain icon next to the Slide Height property to enable the link.
The slide height is automatically readjusted to the device height of 950 pixels.
- Use the breakpoint ruler to select the Mobile breakpoint.
By default, the device height in the Mobile breakpoint is set to 415 pixels. According to the http://www.viewportsizes.com/ website, the screen of an iPhone 4 has a height of 480 pixels. A slide height of 415 pixels is perfect to accommodate the slide itself plus the interface elements of the mobile browser.
Summary
In this article, you learned the key concepts and techniques used to create a responsive project in Captivate 8.
Resources for Article:
Further resources on this subject:
- Publishing the project for mobile [article]
- Getting Started with Adobe Premiere Pro CS6 Hotshot [article]
- Creating Motion Through the Timeline [article]
