Avoid Bitmaps in User Interfaces

4/19/2010

It is tempting to add images to the user interface of an application to make it more eye-catching. Because Windows Mobile devices vary in screen size, shape, and resolution, images in the UI can have the opposite effect and make the application look clunky and unprofessional. The following screen shots show the use of the same bitmap in a UI on a 96 DPI, 320x240 display and on a 192 DPI, 480x480 display. In the high-DPI display, the bitmap no longer fits the rest of the UI.

Workarounds for Bitmaps in the UI

Instead of using bitmaps in the UI, try one of the following workarounds for this issue. You could package multiple versions of a bitmap with the application, check the resolution of the device at runtime, and then display the suitable bitmap. Or, you could use a small image with a solid background and use GDI to fill in the area around the image with the same background color. However, these methods require additional development and testing resources. The following screen shots show a bitmap that is dynamically positioned over a GDI-drawn white background to create a consistent look, regardless of resolution.

Before you use a bitmap in the application UI, consider whether the benefits of using the image outweigh the cost and the potential negative appearance that it will generate.