So I took a punt at 360 and I need responsive help...
Nov 14, 2016
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
10 Replies
Here is the mobile version of the screen I get at present (save you testing it)
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/
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.
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.
I thought the top option was to publish to the 360 server. This option I
did not like as it took the files away from me and placed them on an
external server.
I might take a look later this evening at that option as I would try
anything to get it to look better.
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).
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.
Hi Chris,
Yes, if you remove all the player elements to use your own custom navigation that would change how it appears as a part of the responsive player as well. As far as the custom CSS you're using - it's not something I'd be equipped to support but folks in the community may be able to help.
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.
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.