Help choosing the recommended size for web prototyping.

[Endoflife]

Hello everyone. I'm going to start developing my first web prototype in Adobe XD. I would like to know in what size of the desktop version do you recommend me to make the design so that later the font size is translated on the web in the same size. I look forward to your help. Thanks.

[Ansubedi03]

Hello,

From Homescreen of XD , you can select any of the Web canvas : Web 1920 is recommended and have responsive ON.

So that canvas and its elements will be responsive to other Web size too.

Please continue with your work, for any further confusion. Keep us posted.

Thanks,

Anita Subedi

[Endoflife]

Thank you very much, for your answer I will continue forward. All the best.

[Dan Rodney · Accepted solution]

To be honest, I strongly disagree with XD's 1920 default. It's too large for designing for the average desktop. It creates problems later when a client or developer tries to view the prototype, and can't view it at regular size (without scrolling) because they'd need a monitor that's even larger than 1920 to fit their menubar, web browser interface, and the design. 

If you look at website monitor stats (like these) you'll see that 1920x1080 makes up only about 22% of people. The majority of the rest have smaller monitors. For designing for a desktop/laptop montitor, I recommend 1440 at the largest, or 1280 at the smallest. I think 1440 is a good size. That's what I design with and typically recommend the people I teach XD to (I teach XD at Noble Desktop in New York City and online).

I would love to see Adobe add some smaller desktop sizes (like 1440, 1366, and 1280) and make 1440 the default.

If you already started your design, you can change your artboard size to 1440 (and set the Viewport Height to 900, which affects where the scrolling starts).

Best wishes on getting started with XD. I hope you enjoy designing with it!

[Spas K.]

I agree with what Dan said. Although most new Windows laptops have 1080p screens, the majority still use 1440x900 (mac) and 1366x768 (win).

Also, keep in mind that browsers have an interface on top and bottom, which will "eat" anywhere between 100 - 150px from the height. So if you want to keep something above the fold either put a guide that's ~100px from the bottom, or reduce the viewport height by that amount. I usually do 1920x950 or 1366x650 for the smaller screens.

When there are a lot of interface elements for web apps, admin panels, etc., you want to design for the worst possible case, which would be the 1366x650 for desktops. If it fits and looks fine there, it will fit on the bigger screen too.