Design for the popup page

[liquid06]

Users have clicked on a link to get to the tutorial, but if it's a tutorial for a resource that framebusts (that's a word now, right?) they'll see this screen instead.

We may need to communicate:

• We're going to open an actual popup window (no surprises)
• We're not doing some suspicious pop-under advertising
• How not to lose the window because it didn't end up in the front (I haven't seen that behavior is consistent on this)
• You actually have to click something to make this work (this button.)

Things we should probably include:

• The name of the tutorial - if users are coming from a link given to them by an instructor, or from a link on our website, the title of the tutorial is probably the best information scent we can offer.
• Brief instructions on what's going to happen and/or what they need to do.
• A call to action - if nobody reads the text, we want them to still get there.

Existing things we should pay extra attention to:

• The margin on the h1
• The structure of the .ctp files for that page

[liquid06]

@michaelhagedon Can we review why layouts popup.ctp, default.ctp and public.ctp are separate? (And maybe quickly summarize how institution.ctp relates to those.) Popup mode used to point at default, and that could still work if we can add a class on the html or body to describe that the tutorial is in popup mode. When I look at those files overall though, it seems like there are a lot of similarities...

[liquid06]

[michaelhagedon]

Sure. They are a mess. ☺

[liquid06]

I think we should call this issue resolved and work on cleaning up the templates later, after beta4.

Currently the popup page shows the name of the tutorial, the One quick thing heading, instructions, a gif showing the behavior of the popup window and the Start Tutorial button.