Designing for Different Screen Sizes

Outside of the Mobile Web we’re lucky to have a manageable number of different screen resolutions – most PCs support resolutions of approximately 1024 x 768 pixels and have a full keyboard and mouse. With the Mobile Web on the other hand, there is a lot more diversity in the physical attributes of the devices – screen sizes and keyboard layouts vary hugely across the range of devices currently in use.

By separating these screens into different classes of devices you can narrow the number of screen sizes to worry about and so reduce the complexity of the design hugely.

You should also bear in mind that it’s the screen width more then the screen length, which defines the usability and attractiveness of the outcome. Images that look good in a lower-end phone with a low resolution screen may fill only half or a third of the screen of a high resolution phone, and may not be useful without zooming.

This comes back to knowing your target audience and the devices they’re likely to have. Once you know this, you’re better equipped to decide what screen size(s) to target when doing the design.

Part II of this guide will go into a lot more detail on the tools and methods for dynamically adapting content for the requesting device.