Highlighted

Closed Captioning and Responsive Design

New Here ,
Jun 02, 2020

Copy link to clipboard

Copied

I am new to both responsive design and accessibility design.

 

I was previewing my module to view the slides from desktop to smartphone. Closed Captioning was on.

 

When viewing the slide from desktop to smartphone it appears that the closed captioning is not responsive and is moving on to the lower navigation bar. See attachment for visual.

 

My questions:

  • Is there a way to keep this from occurring?
  • Is there a way to keep closed captioning on for desktop through a tablet, but to hide when a smartphone view?
  • When it comes to best practice when is best to provide transcripts of audio as a PDF vs providing closed captioning?

Thanks in advance for your help! 🙂

 

Views

172

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Closed Captioning and Responsive Design

New Here ,
Jun 02, 2020

Copy link to clipboard

Copied

I am new to both responsive design and accessibility design.

 

I was previewing my module to view the slides from desktop to smartphone. Closed Captioning was on.

 

When viewing the slide from desktop to smartphone it appears that the closed captioning is not responsive and is moving on to the lower navigation bar. See attachment for visual.

 

My questions:

  • Is there a way to keep this from occurring?
  • Is there a way to keep closed captioning on for desktop through a tablet, but to hide when a smartphone view?
  • When it comes to best practice when is best to provide transcripts of audio as a PDF vs providing closed captioning?

Thanks in advance for your help! 🙂

 

Views

173

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 02, 2020 0
Most Valuable Participant ,
Jun 02, 2020

Copy link to clipboard

Copied

Please can you insert the screenshot? I don't download attachments for security (and time) reasons.

CC is part of the skin, it is normally indeed near the playbar.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
New Here ,
Jun 02, 2020

Copy link to clipboard

Copied

Captivate19-CC-ResponsiveDesign.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
New Here ,
Jun 02, 2020

Copy link to clipboard

Copied

I don't think this is a skin issue as no skin is used. I used custom buttons. They do work and you can toggle CC on and off.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
New Here ,
Jun 02, 2020

Copy link to clipboard

Copied

This is how the CC views in desktop view

 

Captivate19-CC-ResponsiveDesign-DeskTop view.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
Most Valuable Participant ,
Jun 02, 2020

Copy link to clipboard

Copied

I told CC was part of the skin. It looks like your CC is overlaying the custom buttons. How did you set up the fluid boxes who contain those custom buttonos (I don't see the CC toggle button?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
New Here ,
Jun 02, 2020

Copy link to clipboard

Copied

CC toggle upper left CC in the circle.

 

Here are two more pics. 1st is the fluid box and second the layout for the CC settings.

 

Captivate19-CC-ResponsiveDesign-Fluid box.pngCaptivate19-CC-ResponsiveDesign-CC Settings.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
Adobe Community Professional ,
Jun 02, 2020

Copy link to clipboard

Copied

As Lieve pointed out, if you are seeing Closed Captions in a Captivate module then the skin has to be working to at least that extent.  You have to turn on the Skin Editor to even configure the Closed Caption area, otherwise you cannot get to it.  Then, even though you turn the Skin OFF again, the Closed Captions will still work.

 

You can try adjusting the percentages for the display area of the Closed Captioning so that it mirrors the positioning of the Fluid Box you have allowed for it.  But even then, trying to get a layout like yours to work across all devices and orientations is unlikely to be possible unless you reduce the amount of text that appears inside the Closed Captioning so that even when it IS shown on a mobile phone held vertically there are no more than two lines of text to accommodate. 

 

If you do NOT need to support Portrait orientation on mobile phones, that would make your life a lot easier because your first screenshot (where you show the problem) indicates that the issue is worst when on a portrait mobile phone, right?  So, either ditch the Portrait view, or reduce the text amount.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
Adobe Community Professional ,
Jun 02, 2020

Copy link to clipboard

Copied

One other tip.  You currently have your Closed Caption text aligned to be at the top of the text area and flow downwards.  If you MUST have your playbar controls underneath the Closed Captioning, set the text to be at the bottom of its fluid box and flow upwards instead so that it flows away from the controls rather than over the top of them.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
New Here ,
Jun 04, 2020

Copy link to clipboard

Copied

Thanks for your feedback. I will try to work through your guidance. Crossing fingers.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 04, 2020 0
New Here ,
Jun 04, 2020

Copy link to clipboard

Copied

Rod,

I started to read through your comments.

 

1. When originally designing I thought I did set the CC to the fluid box. as you see in the graphics above the CC box was placed within the fluid box... or did I do something wrong I am not aware of.

 

2. How do you turn off CC for smartphones, while keeping it for everything else?

 

3. I don't have to have the playbar under the closed captioning. Is it best practice to place the closed captioning under the playbar or is this subjective? I am just curious .... part of my learning process 🙂

 

4. I did not know that "set the text to be at the bottom of its fluid box and flow upwards instead so that it flows away from the controls rather than over the top of them." was an option ... I will look into that next.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 04, 2020 0
Adobe Community Professional ,
Jun 04, 2020

Copy link to clipboard

Copied

You cannot put the CC text INSIDE a Fluid Box.  All you can do is place a Fluid Box on the screen at the location where the Closed Captioning will appear so that you are effectively 'making room' for the captions.  The CC text is actually floating over the top of the fluid box area because the Captivate Skin is a totally separate component.

 

I would suggest you allow the learner to decide whether or not they want the CC text to appear rather than arbitrarily turning it off for Smart Phones.  On a recent project for a client where all users would be viewing the content on Smart Phones in Portrait orientation, we were quite surprised to find that most users WANTED the CC turned on by default.  By all means provide a menu option that allows them to turn it off, but I still think you need to give control to the learner.  If you were worried about the amount of room the CC takes up, you probably should be using portrait view for mobile phones.

 

On mobile phones I do not use the playbar.   The playbar buttons still have to be big enough to be usable but in my view there really isn't enough room for everything.  

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 04, 2020 0
KIT9 LATEST
New Here ,
Jun 05, 2020

Copy link to clipboard

Copied

Thanks. 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 05, 2020 0