So I took a punt at 360 and I need responsive help...

Hi there guys! I have designed a new competition for a client - it works, I'm happy, in fact it is great! HOWEVER - I can't for the life of me get it to embed to my site and look clean on mobile. 

I was using storyline 2 but the new 360 is showing off to be responsive and slick. I want this, I want to iframe the storyline to a page and then have that iframe be responsive and not do the LAUNCH button in blue etc that storyline does.

Can you look at my webpage: http://www.drugsandalcoholni.info/alcoholmot/

Then here is a direct link to the main build: http://www.alcoholandyouni.com/DACTS/story_flash.html

What is my best practice to do this and:

1. Avoid app installation for mobile

2. Fit content to screen

3. Make it nice!

Thanks and 2-3 design hugs in advance — Chris

11 Replies
Brian Allen

Chris, here are a couple of references that may help you with the iFrame container itself, however if the content you're loading in your iFrame is not responsive it won't help you to make the iFrame itself responsive.

https://benmarshall.me/responsive-iframes/, and

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

chris spam

Thanks for that. I did do a quick google on embedding a css driven iframe to dynamically resize. but mixed results really. My link above is live for the client and I think its just okay. In my minds eye I envisaged a iframe that fits every device. 

 

I am not sure that the new 360 actually does any more than storyline in this regard. although the removal for the app install prompt is lovely.

Ashley Terwilliger

Hi Chris,

If you include the option for the Articulate Mobile player you'll still see that blue launch button when choosing to open the content on a mobile device that supports it. If you didn't include that, and you publish with a tool such as Storyline 360 you'll be directed to the responsive player as shown here and described in the FAQ about the player. 

Ashley Terwilliger

Hi Chris,

I think we're talking about separate things now -

If you publish to Articulate 360 - you're actually publishing to Review which is where you could share the content for SME and others to take a look and weigh in on your content. You'll see this described here. 

I was referring to how you'd view the published output within the Articulate Mobile Player or the Responsive player (within the HTML5 output). 

Designboy Chris

Yes I took another look and discovered that :) I think as I had removed the
player features it has removed the rest of the responsive elements to the
player.

I used the html5 .html file yo iframe and added some css to dynamically
size it. But I think some of you have a better way to do this.

But so far this week Ive got the google spreadsheet to gather all my
variables and Im back in love with storyline.

Matthew Bibby
Designboy Chris
But so far this week Ive got the google spreadsheet to gather all my
variables and Im back in love with storyline.

Back in love? C'mon Chris, we all know you never really fell out of love with Storyline!

Brian has referred you to a couple of great resources regarding responsive iFrames, but I appreciate how frustrating this can be. I looked into the same thing a while ago and couldn't figure out a neat way to handle this. 

I'm planning on experimenting some more at a later stage. I'll be sure to update here if I figure out a good solution.

Designboy Chris

Well... to be honest, it is a darn cool bit of software and I'm happy. But I'd really, really like with extra sprinkles—a full wrap on the elements I drop in on an iframe. It does this nasty black bar thing. But 360 (after 3 days of using it) I really want now and trying to talk myself out of a new playstation pro to own it ;) The struggle is real.

Ashley Terwilliger

This one made me LOL, Chris...I mean the holidays are coming, maybe Santa brings you the other one? ;-) 

I'm not sure I'm clear on the black bar you're describing, but if you've got some screen shots handy - I'd be happy to take a look and get those into the hands of our team for a better idea in terms of design or if it can be a feature request.