I am designing a web based application which should be responsive for width 1366 to 1920 px as it will be only used in this environment. I have designed mock-ups in adobe XD in 1366 screen size how should I design and what changes in screen should occur going from 1366 to 1920 px.

Also I want to know what is standard way to design web application for all the resolutions.

2 Answers 2


Observe how other platforms are designed, ideally ones that operate in your same business area.

I recommend you create an account on a web application similar to the one you are designing and see how that product was designed. Resize the browser, or right-click and click "Inspect". See how the elements behave. The header will stretch the whole width, whereas inside widgets will expand with the grid up to a (probably) max-width. You can also click Cmd and + or - sign - this will scale the view so that you can watch how it behaves to 1920. Try using Google Firebase or Google Analytics.

I suppose being a web-app that works on that wide screens it will likely have a dashboard and widgets. I would align the widgets width up to a max one so that they don't stretch the whole width, after that they line up in the same row. Perhaps try using wider gutters and margins ( 24px and 32px respect.) on wider screens and (16 and 24px respect) on narrower ones, that will also help give room to breathe.


You basically need to "grow" and / or expand elements from screen size to screensize. What you need to consider is the grid and the various ways of displaying content like fluid or contained. Have a list lf the content that you need to display on the website and find the best way to display them while if it is possible to respect the pattern between all screen views.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.