Problems rendering prototype on mobile browser

[bettywacka]

Hi there. 

I'm trying to send my XD prototype out to the client for them to start testing. I have advised them once they open up the link in their browser they can save it to their home screen to avoid the browser options, however...

we still can not see the full screen as the status bar seems to be fixed and in the prototype, I have a fixed taskbar located at the bottom.

Because of the loss of real estate thanks to the status bar, this means we can only see the top half of the faux 'task bar'. Is there another workaround? The client intends to demonstrate this on their mobile but does not have Adobe CC.

[AkinGn]

Hi @bettywacka, I think the safe area for the mobile UI design excludes that status bar as seen in the image: https://xd.adobe.com/ideas/wp-content/uploads/2019/10/Adobe-5-7.png.webp of the post https://xd.adobe.com/ideas/principles/app-design/designing-apps-iphone-x-every-ux-designer-needs-kno...  I suggest updating the design minding the status bar (and notch at top, if it's necessary to be updated 😉 Hope this helps!

[bettywacka]

Thanksgood point but even if I delete the status bar (it's a component so easy to do) the design still sits within the safe areas and the task bar allows for the margin too

[bettywacka]

One more thing when I add the notch allowance to rise the margin at the bottom and whilst I can now see the fixed task bar but the page will scroll as the height of the page being rendered in full screen in the browser... hope that makes sense?

[AkinGn]

I'd increase the vertical padding of the bottom nav a little to keep icons above the status bar, oh and maybe your question can be answered by a screencast I recorded previously to answer another question, limiting the scrollable area of the content: https://www.dropbox.com/s/3hdmbd60nq96585/scrollable-content-test.mp4?dl=0 Hope this helps! 

[bettywacka]

Thanks, I know what you mean but the page already uses the scrollable content and I wanted to use the extended screen viewport too but it's the bottom navigation and page height that is the issue because of iOS's fixed status bar. If I render it in the XD mobile app or the desktop mobile emulator then it's not an issue but only when I browse in the mobile browser.

[AkinGn]

Building a prototype based on the environment that it's going to be used would be the best approach always right.