Full width prototype on mobile (with fixed elements)
After fixed elements update (Jun 19, 2018) my prototypes, when previewed on mobile, no longer stretch to the side edges of the screen (see image).
I want my client to see it proportionally stretched no matter what mobile device they are using.
I assume this was done to accommodate positioning of fixed elements on a page.
Maybe we can add an option where the designer chooses if the design will stretch proportionally (and hides the bottom of the design) and when it will shrink and show the whole design.
And to address positioning of fixed elements in the stretching option. The designer will choose if they are fixed to the top of the page or the bottom. That way, stretching will not affect the fixed elements. They will move as in finished/developed product.
Michael Caporale commented
Well it's weird because we have our artboard sized to 375x667px for mobile which is directly proportional for the iPhone 8 that I'm viewing on, but still getting white bars on either side when viewing in safari. Looks fine in the app. I'd rather see the full width but pushed down given the extra top and bottom bars inside the browser.
I suppose we should be accounting for this height in our design mockups, but it's hard to accomodate for all browsers. There's really no situation where the design would scale down to less than the width in the wild, so this seems like undesirable behavior to me.
We have provided a fix for this issue recently in XD 12.0 release. Request you to give it a try, and access your prototype links on mobile devices again. You should now see the designs taking full width available, and let it overflow vertically if height is greater than available height of the device.
Do let us know if you are still seeing the same issue?
Yes, me personally, I'd prefer the other option - to always fit the width first. Although I am sure there are designers that would rather see the whole design regardless of those white edges.
There is a way to accommodate both, but it becomes a bit more complex to code of course.
It's a 2 step solution.
1. When uploading prototype (or when setting up document?) ask if the designer wants to see the prototypes
- "rigid" - see the whole height (with possible white edges)
- "fluid" - fit width of the design first (let the rest fall beyond available viewable height)
Now when you have "fluid" prototype, there will be an issue with fixed elements near bottom of the page, they might fall beyond the viewable area, but we don't want that (example: a persistent CTA button at the bottom of the page would be half or completely hidden).
2. To accommodate for that, the designers will need an option to fix (anchor) elements either to the top of the page or to the bottom of the page.
3. And as a bonus to this approach, there could be an option to fix (anchor) elements to other elements. I saw this sort of request here on this forum somewhere and that would be super helpful too.
What you mentioned here about mobile browsers having lesser vertical area available to display content is the main reason why this issue is happening.
We are trying to fit height of the design first, and then reduce width proportionally to maintain aspect ratio. This is why you see white gaps on left and right as the width has reduced slightly than its original size. This is the only way we can fit in the entire design within the available viewable area inside of the mobile browser.
The other option is to always fit to width of the design and then let there be vertical scrolling possible to view any content that would fall beyond the available viewable height in the browser. Do you think that would be acceptable behavior?
Suhasini Basu commented
Thanks for those information. We got a bug logged for this issue for further investigation.
I tested it on following devices with the same outcome (they all show white edges):
- Samsung Galaxy S7 - Chrome, Firefox, native Internet browser
- Samsung Galaxy S7 Edge - Chrome
- iPhone 6 - Safari
My artboard size is standard android size: 360x640
The issue with the "standard" size is that no regular browser lets you see the full 360x640. They all have permanent header, some have permanent footer. And also phones show their own header with notifications, battery and time information on top. All those make the actual prototype viewable area shorter (while keeping the same width).
As I mentioned before, I think the issue here is the addition of fixed elements, that are fixed to the whole exact size (640x360). Which needs to be shown in full to properly position elements near bottom of screen. Maybe better way to do this would be: instead just "Fixed Position" checkbox, have 2 checkboxes - "Fixed Position from the top" and "Fixed Position from the bottom". And let the prototype stretch to the sides. And have the fixed elements fall to their places based on the distance from top and/or bottom.
Suhasini Basu commented
Thanks for reporting this issue. I would require more information to investigate further :
- Which mobile device ?
- Which mobile browser ?
- Size of your artboard, is it standard size or custom size ?