Full screen viewing of web prototypes (responsive) does not allow fix position elements, why?

[theoakmaster]

Hi there,

First of all I would like to say that I truly appreciate the latest update version 12.0.12.10.

But I have to say that some things are confusing me. So far I've figured out that in order to have the prototypes in full screen and responsive one needs to either match the "viewport height" to the height of the composition you've been working on or completely remove vertical scrolling. Is that how it is supposed to work?

I'm guessing the answer is yes given that the explanation in the update page reads as follows: "If you have defined the viewport height (set in the Property Inspector), the prototype fits to the height first and proportionally scales width to maintain the aspect ratio. You can also scroll vertically to view content that is below the viewport height."

Because if that is the case I must say that this logic is rather counter intuitive and also has some pretty negative side effects. The main one, and very important, is that elements which are marked as "fix position when scrolling", stop being fixed completely. Is this supposed to happen or am I going completely the wrong way about this?

On a more general note I would like to express that from my point of view the engineering philosophy behind defining a "viewport height" seems to be what was has been creating big problems for this tool. I understand that it makes sense from an engineering stand point but from an UX perspective that doesn't seem to make much sense, let me explain why. If you select a viewport that implies that you know the target viewport you'll be using, that might be true for in-house user testing (when you know the machine specs you'll be using) but its not true for remote user testing (where a pool of users can have any device type and access the prototype), which, both, are my case. That basically renders the prototyping aspect of Adobe XD useless and that is why I have to resource to other prototyping tools to issue the prototypes to users. I would really appreciate if someone could address this aspect of the tool given that I would be more then happy to use the prototyping aspect, which I simply can't currently.

I thought this responsive update would literally tackle this aspect of the tool but in effect it did very little on the prototyping side but improve greatly the design side of the tool. I would really appreciate if you would take in consideration the use case of Designers that have to do remote user testing and cannot know the target device height or width.

I apologise for the long text but it was necessary to describe in depth the issue.

Once again thank you very much for the update, the time and the effort you folks put into this tool. It's greatly appreciated!

[Preran]

I am checking with the team, please stay tuned for a response.

[theoakmaster]

Thank you for the follow up Preran, I'll keep an eye in the post.

[ArunKaza]

Hi theoakmaster​,

From what I am understanding from your description is that you are really looking for the designs to be "best fit" within the device while previewing it in fullscreen mode? Is that correct?

If yes, were you able to get this behaviour prior to this latest release of XD 12.0?

It would also help us to be on same page if you had a prototype link that you are share and showcase the use case you are looking for here.

Thanks,

Arun

[theoakmaster]

Hi ArunKaza​,

Answering your first question, that's exactly right. I would like for the design to always fit the device given the fact that I'm unable to know my target devices width and height.

Answering your second question: No, I was never able to do this with Adobe XD and thats why I have to resource to other prototyping tools when issuing it to testers.

Now, following your recommendation I've made an example prototype to show the behaviours that it displays. Also I'm adding a few images to better explain the existing behaviour.

You can find the prototype here: https://xd.adobe.com/view/d3153ee3-c3b2-42e1-7542-8e588b13a9c5-a524/?fullscreen

Setting the viewport height to the height of the composition

Doing this ultimately provides a better responsive behaviour then setting a viewport height, because now at least the prototype takes 100% of the width of the browser window. Similarly to the behaviour in CSS which would be described as "width:100%;". The issue here is that as you can see, the bottom and top navigation bars are not fixed anymore. Also, if you shrink the browser window it will keep everything 100% of the width, which is good, but the entire composition scales down, meaning, the navigation bars which are set for a height of 90px start shrinking until becoming basically a line (around 10px height). That doesn't correspond to the CSS behaviour where the window shrinks but does not affect the height of the div.

Disabling vertical scrolling

Basically the outcome here is the same as the one described above for the case of "Setting the viewport height to the height of the composition".

Setting a viewport height, in this case 1080.

In this first image you can see how, when the browser window is wider then established ratio, you gain whitespace in the sides of the browser. Again not congruent to a responsive behaviour, where the width of the div, if set to take 100% of the width always adjusts to the browser width.

And in this second case (you can see below) its even more problematic due to the setting of a "viewport height", here, as you can see, white space is generated in the bottom of the browser. Which is a behaviour that, personally, I have never experienced in any website or web application.

I hope that helps explaining my situation.

Thank you very much for your time and attention.

Have a nice day!

[crosscreations]

Dude, you okay? This guy is missed since over a year and no one noticed... So what about the issue then...?