Check out my site created in Storyline

Dec 05, 2012

Hey there! I have finally updated my site that was created in Studio '09 a couple years ago to what is there today created in Storyline. This site itself demonstrates interactivity that could easily be applied to elearning modules.



30 Replies
Jesse Spinella

Nice site. Love the interactivity. Cool idea to drag and drop for your menu choices.

But this brought up a question that's been bugging me since I started with SL. 

What screen resolution you're setting your slides to? Are you using a "one size fits all" approach for screen resolution to play across all types of devices? Or did you choose that display size for another reason? Can you make the web page full screen, or is that an Articulate Storyline limitation in the player when you publish to a website? I've only published to CD so I'm not used to the player settings for the web. 

I love the potential though.

Thanks in advance,


Stephanie Harnett

I published the site in two different sizes; the "simple" version has some features in the content disabled that I know don't behave well in Storyline's HTML5 output. I used the default 4:3 ratio resolution and set the player to scale to fill browser window otherwise it looks a bit wonky on the ipad. I don't have an iphone so I don't know how it looks on that. For the "cool" version I left in drag and drop and hover states and multiple videos on slides, etc because this all works well in the flash and ios output. For this version I'm using a story size of 996x560 (16:9) and locking at optimal size. This works well on the ipad landscape and doesn't distort images (blur them) by scaling. There is an option in the player to force the web page to go full size (but that doesn't mean full screen aka F10).

All said and done, Storyline really isn't designed to build websites. I did this to profile what you can do with the tool more so as it relates to interactivity that you may find in an elearning course. Mobile output is geared to the ipad so if you stay at a 4:3 ratio then it should work fine in most situations.

Judith Blackbourn

Congratulations, Stephanie! What a great example

First, I love your use of stick figures, and you have so many poses! Did you draw them yourself?

Bringing the different sections down as books on the shelf was a great idea, and I like the moving illustrations for each section. The transition from the book (which didn’t get all the way down to the shelf) to the computer screen was a bit abrupt.

*  Within the Method sections, the activity was very smooth, staying on one screen (visually) and adding the elements as you talk about them.

The descriptions of your methods are great, although sometimes you may be talking a little fast.

*   I did have some trouble at first figuring out the navigation.

Overall, in my opinion, this an excellent offering and clearly shows the advantage of dynamic “learning” (although not a training course). 

Content section, Time 1:31

Below the words “filter & reduce”  “storyboard” is several lines of text I can’t read. Saw these again in Design.

Also, when I clicked Content again to replay it, the screencast played only the last phrase you said.

        *  I tried clicking on Strategy to see if I could sneak up on it, but Content this time showed a blank screen and no sound.

*  Then clicking on Design brought up the Design mode correctly, although with a slight pause.

*   However, each time I clicked on Deliver it stayed on the Design screen.

*   BTW, when I clicked Strategy the second time it showed all the graphics, but again played only the last phrase. When I tried clicking Strategy again, it returned to the screen that shows before Strategy, then automatically went to the Strategy screen.


Portfolio section

I was impressed by the layout of the introductory screen of the Portfolio, but thought the subsequent screens (after clicking on one of the three options) could use some narration to set the stage.

When I went back to the Portfolio introduction after looking at the Recent Work section, the photograph for that section didn’t display.

One consistency problem in this section was the method of closing sceens:

Current Work section zoomed the graphic when I clicked on the photo and had no identified way of closing the screen. I closed by clicking on the graphic again.

Recent Work section descriptions of each project contained a red X marker for closing the window. BTW, I like how you organized projects under industries and again, like the casual feel of drawings.

*  Past Work section descriptions of each project contained a black X marker, slightly bigger than the red X marker, for closing the window.

Although I really do like the hand writing and drawing, I thought putting the arrow and Portfolio as a back button was unexpected. I did not expect to click on handwriting.


And last

You may not have planned for someone to return to an area once they’ve read it, but you never know!

After you show the message “It looks like you’ve explored the entire site!” only the About Me book was on the shelf. I did go through each book, although didn’t click every link. The books that were not on the shelf were masked by a transparent white box.

At that point, clicking Home no longer worked.


Hope this helps,


Stephanie Harnett

Hi Judith. Than you for that fantastic feedback! I really appreciate your comment and suggestions - all very good to hear. I have made some adjustments to the site based on your feedback and will re-publish it today. A couple of the issues I do have some comments on as follows:

1. Sometimes the abrupt behavior is caused by caching (or lack thereof). I've tried to make each scene as smooth as possible by eliminating transitions and unnecessary animations, but still, there are hiccups that seem to happen like that and I'm thinking it's a chacing/bandwidth issue of some form.

2. The "movies" in the method section were lifted from an earlier PowerPoint/Studio version of the web site. I didn't have time to recreate those animations so I exported them out as movies and brought them into Storyline. The stick figures can be downloaded for free from the downloads section of the Articulate forums site. I did adjust the site so that when you return to one of the sections (Strategy, content, etc.) it restarts the slide from the beginning. The replaying the last bit at the end upon returning appears to be a bug.

3. I did plan for someone to return once they've explored all areas hence the message indicating you've done so, however, I can't replicate the issue that you mentioned about only the one book displaying. Which browser are you using?

Thanks again for the detailed feedback. I very much appreciate the time you spent doing that.



Nigel Ribeiro

Wow Stephanie your design is truly inspiring!  Thanks for sharing. I did my website on Storyline which is quite similar to yours but not as good.

Any feedback will be appreciated. 

Have you noticed that when the your open your menu the second time the fly in animation does not work. Under layer options if you change "when revisiting"   to "rest to intitial state" it should resolve that issue.  How did you get the menu to fly out when the used closes it. 

Again, thanks for inspiring us!!

Belen Casado

Hi Nigel,

I must say I love it!

I like that it's clear and bright, easy to follow, engaging. I only found difficulties in the 'Who we are' section, as I didn't understand what I had to do. I dragged one of the icons to the shape and then waited to see if something happened, till I realized there was a submit button right there.

I need to ask: how can a Storyline output be in a website?

I remember clearly having asked the same, but with Wordpress I found it very difficutl to do. 

Any thoughts about an easier way to do it?

Thanks again for sharing, guys!

Belen Casado

Stephanie Harnett

Hey Nigel.  Thanks for the tip on the left menu; I adjusted it as a result.

Nigel. I took a look at your site and it's very nice - as Belen mentioned - a clean, crisp design aids in ease of use. Very well done!

Comments? Well....I would say that the "who we are" section might benefit from less interactivity and more telling/showing/animating - letting site visitors sit back and watch what you have to say about what you do. Also, the contact form didn't work for me and the only othe thing were the testimonials - if you are going to include this information, I would recommend each quote be cited by its author.

Belen, Storyline can output as a website by removing the player and sizing the story appropriately (4:3 for tablet, for example). Storyline isn't a website development never wanted to be and isn't...after all, serious HTML5, jquery, css, javascript manipulation is better through other tools. That said, Storyline can hold its own and can produce results that would have taken a lot of effort previously in Flash to do.

So you can build flash-like interactiivty in a website without programming and also reach mobile audiences. Hmm.

What is elearning? It's learning. What is learning? It's communication. What is communication? Well....

Ryan Sweeney

Belen Casado said:

Hi, Stephanie, I'm wordless, really! 

I find your website really cool, and I'd hire you right now. I think you give a highly professional image with this website and also you show what can be done with SL.




I completely agree with Belen here.  Excellent use of SL.  I've seen many proposals come across my desk from different vendors that didn't show a tenth of the originality and creativity exhibited here!

Well done.

Nigel Ribeiro

Hi Belen and Stephanie, 

Thanks for your feed back.  I know the "who we are"  section needs some work. i was trying to have some interaction so users could test the interactivity (drag and drop) function in Storyline. I guess I move the interactivity to the portfolio section. 

Will work on improving based on your feedback. 

Belen, so they way I made the Storyline file look like a web site is:

I buy a hosting package from a vendor like bluehost or godaddy.  Just the basic account is fine and should cost $3 to $5 per month.

Then create the Storyline file and publish to the web. 

Then using an FTP tool or you could use the FTP option in Storyline transfer the published file to your server. 

the URL will be some thing like this:  www. 

I can do a Screenr if you are interested 



This discussion is closed. You can start a new discussion or contact Articulate Support.