InVision-like fluid Axure demo

[bermanatalie]

Hi,

Right now, I am exploring the InVision – like responsive design option for Axure demos: The idea is to have the UI content presented as a dynamic panel with a background image. This way, this UI could be made fully fluid, depending on the user’s window size/ratio.

The difficult part comes with the highlights (flashing dots) that indicate specific UI areas and trigger descriptive pop-ups. These highlights ‘seat’ on the layer on top of the dynamic panel with the background image. Ideally, they should change their x/y location (in the context of this solution, it would be more like the x position would be, for example, 5/12th of the total width and the y position would be, for example, 7/12th of the total height), depending on the user’s widow size/ratio dynamically. I am struggling with finding a universal formula that can dynamically place the highlights over the pre-determined UI areas no matter what size/ratio the window is.

Preview

InVision-like fluid Axure demo.rp (356.3 KB)

If you have such a formula, it would be a tremendous help in creating a really interesting responsive Axure demo solution.
Thank you in advance,
Natalie

[josephxbrick]

Hi Natalie!

Interesting. Try this:

OnWindowResize
   Move (highlight) to x: [[Window.width * 5/12]], y: [[Window.height * 7/12]]

If you are specifying placement based on the center point of the highlight, subtract half the width/height of the Target. E.g.

   Move (highlight) to x: [[Window.width * 5/12 - Target.width/2]], y: [[Window.height * 7/12 - Target.height/2] ]

[bermanatalie]

Hi Joseph,

Thank you so much for your brilliant advise!

This formula totally works. To make the positioning of the highlight even more accurate, I can make a greater than 12 grid, for example 24. This would provide event better highlight precision.

Many thanks again,

• Natalie

[josephxbrick]

Oh good! (I didn’t try it first. )

If you want EXACT positioning, there is another tack you can take:

Create global variables for authored-width and authored-height of your prototype. So if you create your prototype where everything is laid out for a screen size of 375 x 667, v_authoredWidth would be 375 and v_authored height would be 667.

Then, it’s super easy. Just use those variables in conjunction with Window.width and Window.height, using hardcoded numbers for x and y of your highlights in their authored position. By that, I mean where you placed them when you created your prototype in Axure.

OnWindowResize --assuming highlight was authored at (200, 300)
   Move (highlight) to x: [[Window.width/v_authoredWidth * 200]], y: [[Window.height/v_authoredHeight * 300]]
.

[Edit] Note: In InVision you can “anchor” the highlight to various edges of the window. The above assumes that the layout “property” is anchored to the upper-left corner.

If it were anchored to upper-right corner:

OnWindowResize --assuming highlight was authored with its right edge 15 pixels from the right edge of the window and at y = 15
   Move (highlight) to x: [[Window.width - Window.width/v_authoredWidth * 15 - Target.width]], y: [[Window.height/v_authoredHeight * 15]]
.

Anchored to lower-left corner:

OnWindowResize --assuming highlight was authored at x=15 and its bottom edge 15 pixels from the bottom edge of the window
   Move (highlight) to x: [[Window.width/v_authoredWidth * 15]], y: [[Window.height - Window.height/v_authoredHeight * 15 - Target.height]]
.

Anchored to lower-right corner:

OnWindowResize --assuming highlight was authored 15 pixels from the right edge and 15 pixels from the bottom edge of the window
   Move (highlight) to x: [[Window.width - Window.width/v_authoredWith * 15 - Target.width]], y: [[Window.height - Window.height/v_authoredHeight * 15 - Target.height]]
.

If you also want to make the highlight sizes to resize based upon the window size, you can take a similar tack.

OnWindowResize --assuming highlight was authored at a size of (50, 30)
   Set size of  (highlight) to width: [[Window.width/v_authoredWidth * 50]], height: [[Window.height/v_authoredHeight * 30]]
.

[bermanatalie]

Absolutely, Joseph!

Thank you so much for this additional idea!!

I will definitely try it out

[bermanatalie]

Hi Joseph,

Thank you so much for your help, I played with your script, and here is a result.

Preview

InVision-like fluid Axure demo.rp (1.6 MB)

[josephxbrick]

Hi Natalie!

Here’s a widget that covers this situation that you might find useful. No need for OnWindowResize code, as this widget handles that, and you don’t need to hardcode the starting position of the widget - just place it and go. No global vars needed, either, and you can have as many copies of it as you need.

You DO need to tell it what the authored window size is: there are two “variables” for that in the (hidden) DP named “_system” inside of the widget.

Note that It takes advantage of the fact that a master receives window-resize messages.

invision_like_positioning_widget.rp (57.2 KB)

[bermanatalie]

Hi Joseph!

Wow! This is amazing. Thank you so much!!!

This option is phenomenal in its simplicity and it totally works

Many Thanks and Happy New Year!

• Natalie