Web Application Height and Width

[sreekanth8500]

Hi I'm a new bie and learning XD for my own product design. I started basic design and when i used 1920X 1080 the output view port is not fitting the browser screen and it get scrolling. So i started the design with exactly same as the browser view port of 932 pixels. means my artboard is 1920X 932. Is this okay to move forward? Am i oing something wrong?

[Spas K. · Accepted solution]

Hey there. You've correctly come to the conclusion that since browsers have a user interface that takes around 100-120px of the screen's height, the viewport isn't exactly as tall as the screen resolution. For desktop I would suggest going for 1440x780, or even safer - 1366x650, since there are still quite a few people using older laptops.

If you insist on going with the 1920 width, a height of 900-950 should be fine 🙂

[sreekanth8500]

Thanks for the reply. Yea, our product is primarily targetting business. I will try with the dimensions you mentioned. Thanks a lot for this. 

[Spas K.]

Yes, you should mostly cater to the audience you're designing for. In my country a lot of businesses are still using older tech & 10 year old laptops... I personally often design for the worst case scenario - if something looks good on the smaller screen, it will look good on the big one as well 🙂

Of course, at some point you have to move on - until a couple of years ago I was designing the mobile versions for 320px wide screens, but when it's under 2-3% of devices running that, I've switched to 360px wide as my baseline, while still leaving some room for those edge cases.