HTML5 project only in landscape view? (delete breakpoints?) Cap.9

[Contentbee]

Hi,

is there a way to set a HTML5 project only in landscape views - desktop, tablet landscape, mobile landscape?

We are going to add a snippet to inform users to change their device to landscape view, because of 16:9 ratio videos. So for this I´d like to get rid of the standard portrait breakpoints and set only landscape. I´ve thought of setting the portrait sizes to match a landscape dimension, but I´m not sure if the device detection might get in trouble with this 😉

Any idea how to get "landscape only"?

I´m using Captivate 9.

[floriank38625530]

Hi Contentbee,

I'm struggeling with a similiar problem but I'm using Captivate 2017 responsive project. But maybe my thoughts could help you too?

I don't think that it is possible to show only the landscape mode, so for that you can try to put a blank solid shape on top of the slide, which says to rotate the device.

With Captivate 2017 the handling with the responsive design is not the same. Here I try to figure out the ratio of the screenwidth and screenlength via javascript. When the ratio says it is portrait mode then you can show a solid shape too with an advanced action. I suggest to work with "while" loop and to execute the advanced action by entering the first slide.

The problem I have now, is that the advanced action isn't execute all the time. So when I see the solid which says that the user should turn the devices into landscape mode nothing happens. So I think there is a problem with my "while" loop.

Greetings

Flo

[Paul Wilson CTDP]

Just use a non responsive design project (Blank project) and publish it with HTML scaling turned on. This will force a landscape view on any device. Keep in mind you may end up with blank space on either side for iPads as they use a 4:3 aspect ratio instead of 16:9. 

[floriank38625530]

Hi Paul,

of course thats a solution, but I think its not what Contentbee was asking for. The state of the art and what users expect is that the costum UI fits to any device ratio. Also the UX will increase. And especially  slide video content make no sense to display in portrait mode.

In Storyline, while you set the settings for HTML5 export, you can set an option to force landscape mode. So thats very easy in that tool, in Captivate there isn't that option and we have to find solutions on our own to get the similiar user experience compared to any other video player, for example.

Greetings

Flo

[RodWard]

I have to say that I tend to agree with Paul on this one.  What he suggested is the same thing I was thinking of posting when I saw he'd already done it.

What might be regarded as "state of the art" in any industry is not necessarily always the best solution for a given situation.  And "what users expect" isn't always the most practical way to fulfil their actual needs either.  There are in fact quite a few situations and types of e-learning content that are NOT practical to develop in responsive output.  Anything heavily dependent on software screenshots or containing large amounts of landscape oriented video content will usually be seen at its best using just good old Scalable HTML5.

What Storyline's marketing refers to as "responsive" output from their product is in fact little more than what Captivate calls Scalable HTML5, which is normally Landscape anyway.  It doesn't reorganise and reposition objects on the screen layout to accommodate the differences between portrait and landscape viewports. Captivate's breakpoint-based output or fluid boxes by contrast DO actually do this and are therefore truly responsive.

You are correct that it makes no sense to display video content in Portrait mode because video is almost always Landscape (unless it was captured with a mobile phone in Portrait orientation).  And anyone that doesn't know how to turn their Smart Phone on its side to better view landscape video content is...well..obviously not familiar with the technology.

[Lilybiri]

It would be so much easier to compare tools really if they used the same terminology.

In my mind real responsive project can only e designed with Captivate, Breakpoint views. Storyline cannot realize a real responsive project, where you have control over the layout for every breakpoint view. That means being able to replace, not only delete, objects for smaller screen sizes. Fluid Boxes is sort of a half-way responsive project because you can make objects optional, but never replace them. As for rescalable HTML5 (which Storyline is producing), it has indeed lot more use cases as Rod very clearly explained.

I offered a comparison, based on my experiences so far in CP2017, in one of my latest blog posts:

Fluid Boxes Or Breakpoint Views? - Captivate blog

[TLCMediaDesign]

You can add this CSS

#cpMainContainer { display:block; }

@media only screen and (orientation:portrait){

  #main_container {

    height: 100vw;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

@media only screen and (orientation:landscape){

  #main_container {

     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(90deg);

     transform: rotate(90deg);

  }

}

[floriank38625530]

@Rod: You are right. I use scalable HTML5 in 16:9 ratio for my videos too. I also provide fullscreen mode (only works for android and desktop), so therefore it would be nice when I got a solution to fit at 18:9 and 16:9 ratio for the future.

@TLCMediaDesign

can you explain the CSS a little bit more. You are in non-responsive mode, right? Not sure how and in which szenario this should work. Can I combine this with my JavaScript go to fullscreen action? Or do I have to insert it into assets/css...?

Greetings

Flo

[TLCMediaDesign]

You can add it to the head of the html page, make sure you surround it in <style></style> tags.

If on a mobile device it will always be in landscape to matter the devices orientation, normal on desktop.

[priscillah40858567]

Hi TCLMediaDesign,

I tried following your instructions and could not get it to work.  I'm using Captivate 9.  I added right after the

<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-c

olor:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>

In the <header>.  i.e.

<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>

<style>

#cpMainContainer { display:block; }

@media only screen and (orientation:portrait){

  #main_container {

    height: 100vw;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

@media only screen and (orientation:landscape){

  #main_container {

     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(90deg);

     transform: rotate(90deg);

  }

}

</style>

Not sure what I did wrong.

[priscillah40858567]

... FYI:  Tested on an iPhone 8 using the Safari.  It's a non responsive design project (Blank project) and publish it with HTML scaling turned on.

[TLCMediaDesign]

I'll have to check it sometime this weekend. It worked for me with the CSS posted, but not sure I was on CP9.

[Dame_Sophie]

Hi TLCMediaDesign!

I have to make a "landscape view only" responsive project and I wonder if the CSS you have posted still is accurate. And: where do you insert this CSS code?

Many thanks 🙂

[TLCMediaDesign]

I'd need to revisit this, pretty busy right now, but should be able to look at it in a couple of days.