Multi-Resolution Applications

Introduction

Not every user has the same screen resolution - some use 1024x768, others 800x600, and a large number still use the basic VGA resolution of 640x480. This can be a major problem for a developer, since it would seem to require several separate user interfaces for each application. However, there is an easier way.

Sizers

Several companies exploit the presence of height and width properties and the scalability of fonts in a component called a sizer. A sizer reacts to changes in resolution or even changes in window size and propagates those changes to its child controls - in some cases even resizing the fonts. In my case, I use the GTSizer component, a native VCL component at a reasonable price, from Genotechs.

Strategies

1. Using a sizer is not a complete panacea., You will still need to think about the layout of your controls, and you will still need to test and adjust your layouts at several resolutions.
2. Close packing of controls is dangerous in multiresolution layouts. If they are two close, when the window grows or shrinks, unexpected overlays can result.
3. Leave extra space around label text in the height and width of the label and turn off autosizing. For some reason, autosizing on a label will cause it to improperly fit at different resolutions.
4. Make sure to have stretch enabled on images which should show their entirety at all resolutions (such as splash screen images).
5. Pick a standard size for designing your application. I tend to use 800x600, which seems to gracefully size down to 640x480 and up to 1024x768.
6. Avoid letting the sizer use "proportional scaling" - this will often leave large parts of your window bare at certain sizes, and most controls don't care about proportionality.
7. Accept that you have lost some control over your layout with a sizer. While the controls won't move around unpredictably, the proportion of text to blank space will change.

Testing

As mentioned, it is not enough to follow the practices outlined above. You must still test at different resolutions and, preferably, also with different display drivers. Inititally, you can test your layout by changing the resolution on your development machine. However, be wary - some drivers let you change the resolution, but without a complete reboot the changes are not fully effective; also note that using large fonts vs. small fonts has an effect on the resolution (for instance can change from 96 pixels per inch to 120 pixels per inch) and this will change the appearance of your interface.

And this testing will probably blast your comfortable desktop settings, leaving you with improperly sized fonts or a disarranged desktop - so take note of where everything is before you start, and be prepared to take the time to put it back the way it was when you finish testing.