Web Preview mode isn't 1:1 resolution / scale
The shared preview mode (link) is not 1:1 size matching the artboard resolution (f.e. like invision), but in smaller size and cannot be adjusted, so client cannot see the original scale and details of larger (long) websites... Maybe it's not a bug, but a missing feature, but I would not mind if you just copy invision in this:))
Now that we have artboard scrolling, you should be able to view your artboards at 100% and scroll through in the Preview window.
-Elaine
-
platypusman commented
Consider voting for this issue, which is from 2016 and has 58 votes:
Zoom in the Preview Window
Also note that the "Viewport height" setting will determine the scale of your preview. Make sure to set that to a value slightly smaller than the height of your screen - otherwise XD will shrink your design and you'll have black bars on the sides. (I don't like or understand this, but that seems to be how it works.)
Suggestion to Adobe: ignore the viewport height, and just render the design based on the artboard width. Or make this a setting/option. In either case, this needs to be more obvious because lots of people on lots of forums are, like myself, confused by the size at which the preview is getting rendered.
-
Mik commented
The issue that is being dealt with here is the viewport height being added. This scales the width and screws up the width to longer long show 1:1
-
Alexander D. commented
It would be good if the "artboard scrolling" were an option in the SHARE area, , so one doesn't have to waste time searching for it when sharing.
-
Jonas commented
Please just add an option to display the shared design review in 100% 1:1 regardless of screen resolution. Clients get the totally wrong impression and I keep having to explain to clients that "it will not look like that in real" and "it's a limitation in the design application" and "Imagen if it would ....".
-
Shaun commented
We really need an option to fix the scale to 1:1 for desktop. Even if the user screen is too small, we should be able to do this, as clients are currently seeing zoomed out prototypes that are not as I intended them to be seen.
-
Manuel Moreno commented
In my case, a 1920x1080 web resolution, I'm afraid It's true in the Desktop Preview but not in the Share online mode, despite the fullscreen mode.
-
Anonymous commented
Thanks for your reply Joan! The fullscreen mode is helpful, but if you have a wide and tall design (which is how I do full homepage design mockups) the fullscreen mode still scales down on smaller monitors.
For instance, I'll have a design at 1600px wide by 2800px tall and my client will be previewing on a 13" MacBook. When they click on fullscreen, they see the design scaled down to the width of their screen. So, the 14px font in my design looks like an 11px font on their screen. Then I have to explain that, no, the font isn't actually that small in the design, it's just being scaled down.
If there was a 1:1 button, they could see the design at the actual size, and the 14px font would be 14px on their screen.
I don't actually think that 1:1 should be the default in fullscreen mode — no one likes needing to scroll left and right to see the content — but having 1:1 as an option would allow the client to evaluate whether a font is readable, whether a graphic is large enough, etc. without having to just take my word for it.
-
Is the full screen view (that we already give as an option on the web, but, it is not default) the way you want artboards displayed?
If so, would just giving you an option to default to full screen mode on the web be a solution?
-
Anonymous commented
It's very disappointing that this is not yet a feature. I'm using Adobe XD to create desktop website design mockups. Back when I was sending mockups as PDFs or PNGs, it was always a hassle to try to instruct a client (usually not very technically inclined) how to preview the design at 1:1 resolution.
Now that they're previewing in a browser it seems like CSS is the perfect solution to ensure that the client sees 1:1 resolution of the design. In fact, I just took 30 seconds, went into the code inspector, and set the preview to 1:1 resolution. The CSS part is theoretically easy.
I really hope that there's a fix to the 1:1 resolution issue coming soon.
-
AdminVic Mitnick (Admin, Adobe) commented
If your artboard is no larger than your monitor, you can put your browser in full-screen, and hit the little "full screen mode" icon in the upper right of your shared prototype page. This will show your design fullscreen.
If you have content that goes beyond the normal height of the artboard (such that you'd have to scroll to see the whole thing on your phone, etc.) -- we're looking at a solution for that ;)
- Vic
Adobe XD team