Problems rendering prototype on mobile browser

Community Beginner ,
Mar 31, 2022 Mar 31, 2022

Copy link to clipboard

Copied

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.IMG_388DDD504372-1.jpeg

TOPICS
Design , Import and export , Missing feature , Product performance , Prototyping , Share or publish

Views

249

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

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! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 03, 2022 Apr 03, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines