August 11, 2019
Interacting with Web Objects in a Mobile-First Design
Comments
(0)
August 11, 2019
Interacting with Web Objects in a Mobile-First Design
Instructional designer and e-learning developer. Certified Adobe Captivate Specialist.
Newbie 12 posts
Followers: 20 people
(0)

I created this short grammar exercise to showcase interactivity with scrolling text in Web Objects.

A scree with Scrolling textWhen it is necessary to present a lot of text, I think scrolling text works particularly well on mobile devices because users can simply swipe up or down through the text. However, there is the danger of loss of engagement. Hence the addition of some relevant interactivity.

I have presented this exercise as a short game whose purpose is to identify just one type of grammatical error: incorrect capitalization.

JavaScripted Interactions

In the game, the user scrolls through the text, clicking on the errors to score points. As they correctly identify an error, some underlying JavaScript updates the Captivate variable that tracks the score and ensures that each error is logged only once. Then, more JavaScript is used to display a star by unhiding an image.
Greg Stager does a great job of describing how to use JavaScript to update Captivate variables in this article.

fluid box layout in Adobe CaptivateMobile-First Design

The primary device for which I designed this module was my smartphone, so the design is optimized for that device. However, I used Fluid Boxes to enable the course to display correctly across a range of devices. Hence, most objects stretch, contract, and scale according to the device. One notable exception is the demonstration video in the Show Me section. I recorded it on my smartphone and made the decision not to adjust its size. Instead, it maintains its position centered on the screen on every device. I made this design choice deliberately as I wanted optimal viewing in portrait mode on my smartphone.

Ensuring Portrait Mode on Smartphones

To ensure that portrait mode had priority on mobile phones, I checked the Project > Publish Settings > Disallow Phone Landscape Orientation option.

View the Course

Once again, I am unable to upload a completed project to this venue, so please visit my website to try out the course.

0 Comments
Add Comment