Skip to main content
S
sreekanth8500
Participant
June 23, 2022
Answered

Web Application Height and Width

  • June 23, 2022
  • 1 reply
  • 546 views

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?

This topic has been closed for replies.
Correct answer Spas K.

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 🙂

1 reply

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
June 23, 2022

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 🙂

    S
    sreekanth8500Author
    Participant
    June 23, 2022

    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.
    Community Expert
    Spas K.Community Expert
    Community Expert
    June 23, 2022

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices