[HELPED] Developing for Differing Screen Resolutions

[melvig]

Hi,

We are testing some of our apps and encountering rendering issues when using different screen resolutions, i.e. an app looks great at 1920x1080 but not very good at 1024x768.

Can anyone recommend best practise or a specific coding technique that will address this ? I was under the impression that the Viewport handles this for you but from what we are seeing our apps do not look great.

Thanks in advance

[richard.milone]

I think you might need to post some screen shots of what you mean. But generally if you design something that looks good to you at 1920x1080 then you "squeeze" it into a smaller resolution where fields may get truncated or wrap then definitely it's not going to look as good. If your users will commonly use 1024x768 then it's better to design at that resolution and then let it scale up.

[melvig]

Some Screenshots

Hi Richard,

Yes you are right - we are developing at a higher resolution. I have attached two png files that show the issue better.

Many Thanks

[eweiler]

In addition to what Richard said, if you go through the trouble to redesign for 1024, you can reference the size of the users browser and dynamically size your components based on that (or make it a different layout).

in js window.innerHeight and window.innerWidth will give you the window size. Remember, this is native js so it will be your browser window or iFrame depending on where you are scoped.

[richard.milone]

I reviewed this with Johnny an we have a couple of suggestions:

1) you could put your field labels above the field so you would need far less room horizontally

2) it appears that all components on the screen are flexing at the same proportion. You could make the left and right fix width and let the center flex

[melvig]

Thanks for the feedback guys, if you could leave this thread running as I may come back to you over the next couple of weeks as we are going to discuss further internally and I may want to run some ideas past you or arrange a goto meeting.

[melvig]

This has now been resolved by removing static height and width configs, replacing with a layout of align: 'stretch', pack: 'start' and type: 'hbox' - thanks for your help Sean