Skip to content
Adapt

Full Screen Stories

by Bryan Patrick Posted on

The Parallax Articles extension has had a hidden feature that adds a caption that sticks to the bottom of the article. On it’s own this feature is fairly useless: You can’t use the caption when the article has content or it will cover the component. Adding too much text will end up covering the image.

However, when the field is used with the appropriate technique it can create a highly engaging story “meta-component” that learners will love. The technique is called the Full Screen Story.

Before You Begin

While this is a cool effect, it is fairly limited in scope. Before you set out to make your own story, there are a few things you’ll need:

  • Between 4-8 high-quality images in a sequence that tell a story.
    • Each image should be 1200px wide and should be a 4:3 aspect ratio (so 1200 x 900, 1600 x 1200).
    • The subject of all images should be centered so it works on mobile.
  • A short text-only caption for the image.
    • One line of a conversation or one step of a process is perfect.
    • You’ll want only 1 maybe 2 lines of text — no more.
  • A highly descriptive alternative text for each image.
    • Don’t get lazy here; If the alt-text does not provide the same context as the image does to a sighted user, it’s inaccessible.
  • A summary and takeaway for the user after reading the story.
    • The more complex the summary or talking points, the better.

Here’s How It Works

  1. Create an Introduction Article
    This should be simple, text-only introduction in it’s own article. If this is the first article on the page, make sure you enable Parallax and Force Article Height.
  2. Create a Panel Article
    Enable Parallax on this article and set the following settings:

    1. Remove the Display title (while giving the article a title that’s meaningful to you; “Story Article 1” or some such.
    2. Enable Parallax
    3. Add your background image
    4. Add your alternative text for this image
    5. Add your caption for this image
    6. Force Article Height
    7. Ensure there is no body or other visible text in the article.
  3. Remove the Display title from the block and ensure there is no body text.
  4. Add only a Blank component to the block and make sure it’s Display title is not visible.
  5. Repeat steps 2-4 until you’ve added all images, captions and alternative text.
  6. Add a Summary Article
    This should be one article and if it’s the last article on the page, ensure you’ve enabled Parallax on the summary article and Force Article Height so the previous articles are not visible when the learner is reading the summary.

The technique is very easy to implement, but does require some planning to get right. You can see a simple example of this technique in the Adapt Authoring Demo Course found in the Shared Courses.  To view the technique, launch the course, and from the main menu select the page “Special Techniques” then select “View” on the “Special Techniques” menu item.

Now, there are a few things that will break the effect and create courses that are “broken” for the learners if you’re not careful:

  • Tell a Story
    It’s called Full Screen Stories for a reason. If there’s not something engaging for the learner to see, they’ll scroll past it.
  • Four Panels Minimum
    Less than four panels isn’t a story, it’s an oddity. You’ll need enough meat to be a pattern for the learner to explore.
  • …But Don’t Go Crazy
    Eight is probably the maximum panels you should do this with. Any more and learners might find it distracting or over load their ability to absorb the message.
  • Choose Images With Care
    This technique has the potential to massively bloat your course. Images should be as small as humanly possible Keep them around 40-60K — heavy compression is required! Blurry backgrounds can help with this as will avoiding .PNG files unless you’re using line art.
  • Captions Must Be Short
    When you preview your course, make sure your caption only uses 1 line when viewed at desktop resolution. Use 2 lines if there is absolutely no other choice. If your caption is too large, it will cover the image and perhaps other parts of the course on mobile.
  • Let the Image Do the Talking
    Don’t try to describe the image in the caption. Images speak for themselves, all you have to do is add the specific “step” or “line” of the process or conversation.
  • No Titles, Body or Components
    The Captions will break any content in the Article or Block and will cover any components. Remove all Display titles, Body text and use only the Blank component.
  • Include a Summary
    Don’t forget the summary! Some learners might scroll right past this technique. That’s OK. Follow up with a text component that summarizes the action. Pair that with an Accordion, Carousel, Card or other interactive that gives the learners their takeaway messages.