I'm having some serious issues when previewing mobile web prototypes on iPhones. I've been in discussions with Adobe Support about this, but I wonder if I'm the only one experiencing the issue. Would love some help from the community. If this really is an issue, I can't believe it has taken so long to get fixed as it's such a basic interaction (prototyping a scrolling page for mobile web).
Here's a link to my simple prototype for demonstration. For reference, this was created on both a Mac and a Windows machine running the latest versions of XD (v126.96.36.199 Mac and Windows).
Make sure you open this link on an iPhone (Chrome or Safari):
This artboard is a simple 320 width artboard that you have to scroll to view its contents. Open the above link on an iPhone (problem doesn't seem to exist on Android). The scrolling behavior is erratic and jumps right to the bottom of the mobile web page as you scroll. Try and scroll up and it flies to the top and almost slams against the top.
Has anyone else experienced this? Is there a fix? My usability tests for our actual designs are being held back by this.
These Preview browser links aren't intended to be viewed om mobile devices.
You should use the Adobe XD app to preview cloud based or directly loaded XD files.
The scrolling behavior of the browser window on the mobile conflicts with the scrolling interactions of the previewed app. This is a long-standing issue (not really a bug, a flaw at most), and I don't believe it's going to be addressed soon, since there's an app to do that.
Thanks for responding. I'm curious then how you conduct remote usability tests with a mobile web design? How do I get my designs in front of people through remote usability testing platforms if they're required to view it in the Adobe XD app? And I'm really surprised by this comment to be honest, that these links aren't intended to be viewed on mobile devices. That seems so counterintuitive, given the fact that we're in a mobile-first world. Is every remote usability testing participant that I recruit supposed to download the app to view my mobile web designs? Will they need an account? COVID-19 has changed some things, and I don't have the ability to sit down with every customer. I have to do this remotely. What's the process for customers to interact w/mobile web prototypes?
These are very good and legitimate questions – for Adobe to answer !
I'm just stating the status quo of Adobe's browser previews, explaining the trouble with it on mobile devices.
There have been similar discussions about this issue, like this one:
And to add insult to injury, the preview in a browser also has trouble with scrolling:
And many designers want the app and browser previews to be responsive, so they can test them on different screen sizes, without requiring the user to adhere to the designed size.
(Downloading the XD app is not the only caveat...)
The XD app is available for free to anyone.
They need an Adobe ID, so you can share XD files with them. But this is all for free – no subscriptions required.
Don't think this is an Adobe-only problem. This one-year old article describes a similar situation with Sketch (although they do have an app for Android now), but also suggests using it together with Protopie, a testing platform which also integrates with Adobe XD !