Full screen web prototype view on mobile browser (hide browser chrome)
after i've shared a prototype URL then i view it on my phone, is there a way to disable browser UI when viewing the prototype on mobile device? can you tuck away the browser chrome? it is a bit fussy and annoying trying to tap through a native app experience when i keep having to scroll around to get rid of the browser chrome. it feels clunky.
thanks so much! apologies if this is a duplicate, but i can't find similar request anywhere.
If the browser chromes are appearing over your artboard in the mobile browsers, then you can scroll up to dismiss the browser chromes.
Please try it and let us know your feedback.
This is not good enough. The scrolling doesn’t always hideaway the toolbar. Also my prototype bottom Navi doesn’t comes up immediately.
Without hiding browser bar immediately means my test participants can’t get the “true” app experience and test properly.
I had try to scroll up but nothing happen. the browser chrome is still there.
Hi .. same issue... "For some reason after latest XD update I lost all options to see prototype full screen on real device/phone....... " .. help us !!!
AdminRizurekh Saha (Admin, Adobe) commented
We are looking to get some feedback on the prototype viewing experience on mobile devices. If you want to share your experience with us, please reach out to me at firstname.lastname@example.org.
Ray Aizer commented
For some reason after latest XD update I lost all options to see prototype full screen on real device/phone. Non on safari browser, non when you download prototype to home screen. Using XD App it will not show fonts used, so that's not the option too. I am using windows so I don't even have ability to live preview via USB.
So how can I design and create perfect UI/UX without having proper testing on real device/phone???
Please advice how can I test prototypes on iphone and how to share prototype with client so they have real feel and taste of the prototyped app.
Yes, i´ve done that once in the last 2-3 monts. It worked well.
But whatever settings i set in adobe xd within "puplic prototyp" (Version 18.104.22.168 Mac), it doesn´t work anymore. Everytime it opens with the safari browser frame.
I ve checked "open in fullscreen" as well as "show hotspint hints".
It doesn´t work anmore.
Any help from your side? Can you please double check? iPhone iOS 11.4
Elaine, What happens when we want to send the link to users for testing, who do not have the XD App, and/or users who we do not expect to download the app? For example, I need the prototype to load in full screen like the app would, after the user clicks on the link that I send them, either through email or text. They should be able to experience the app like normal and not have the web interface in the way, and should not have to download/install the XD App.
An example could be that you are a freelance worker. Yes, you have XD, and yes you have the app. However, the business owner who you are making the app for, does not. Now, sure, the least they could do for their app is to download the XD app and test the app the freelancer makes for them. However, what if they do not have an Adobe account, do not want to download the app, etc.
Or, what if you are a student and just want to text the link to you grandmother so she can be proud of your work ;P She is not going to install the app, doesn't know how to use the internet, or the phone, etc...there are a lot of people out there like that, but they will need to see/use the prototype link in full screen.
The Xd mobile app has full screen but I found my design had fonts in it that weren't supported.
The old work around on android mobile USED to work before the latest Xd update. You could add the link to your prototype on the home screen. Then when you clicked on it you would get a custom icon it looked cool -- that's still there. The workaround to hide the status bar was you would slide the design up and it would stay there. Then when you clicked to different pages they all stayed up and the actual status bar of your phone hid the status bar on your designs. Now every time you click on a page you have to slide up every time to hide the design status bar under the phone's actual status bar. Hook us back up Xd. And of course give us sticky or fixed objects like a nav bar. Come on dog. xoxo
yes, the app is great when you are testing at your desk. Problem is when you want to show the prototype and can't be tethered. Can the app pull the prototype down to the phone for non-tethered viewing?
Hi guys, when I save a prototype on my home screen, there is no chance to simulate a full-screen app right now. I would like to have the opportunity to hide the statusbar.
Kaue Lima commented
In Android, when you view a prototype, the user get a notification prompting to "Add to homescreen" for a better viewing experience. There should be a way to toggle on your shared project if you want it to be viewed fullscreen by default.
With this option I would not get duplicated navigation and notification bars (One for the user OS and other for the prototype). I could also design without navigation or notification but they are important to document color changes or back button behaviors (in the future maybe even notifications).
I found this workaround too eventually. It works fine and does what I hoped. But I still wish there would be a simpler solution for fullscreen preview - one that doesn't require elaborate instructions to clients who find this process complicated.
When sharing a prototype on a phone (iPhone in my case), the prototype appears with the address bar in Safari and the bottom (action?) bar. As I am prototyping a native app this really bothers me. If I want to show a prototype to my client - I can't show it this way. It is - to me - a deal breaker, and I think I'll stick to InVision, until this is solved.
Hi Byron, to remove the browser chrome you will need to add the prototype to your homescreen. There instructions for all different devices here: http://www.howtogeek.com/196087/how-to-add-websites-to-the-home-screen-on-any-smartphone-or-tablet/
Let me know if this works for you! We're hoping to making this clearer in the future.
That sounds interesting, I need to try that...
Mario Contreras commented
Open the link that you created for your xd project on your iPhone Launch the Safari browser and navigate to the link given to you by XD to add to your home screen. Tap the Share button on the browser's toolbar — that's the rectangle with an arrow pointing upward.
To install, the mobile version on your iPhone tap the ""Add to Home Screen" icon and now it works as a app proto.