Mobile Web Design 2.0
Designing a Mobile website that looks great on all these different mobile devices requires some planning upfront. Even though some phones seem to have the same sized display (e.g 2.2 inch) their actual pixel density varies a lot from device to device.
With CSS it is possible to design a scalable UI which works across devices BUT the actual content (images, text, videos) needs rescaling to deliver the optimal experience for the user.
There are two approaches to that issue.
The first one is to design against the smallest common denominator. This would mean to take an older Nokia phone like the Nokia 6230 (128x128px) and optimize the service for that screen resolution.
The better option is to try to categorize the handsets into certain groups based on their pixel dimensions. In the case of mippin we defined 5 groups ranging from 128px to 480px in width.
To see in which group your device falls into just type this url into your phones browser and compare it with the screens below:
We constantly check for new handsets which use the mippin service. Each device which isn't mapped triggers and alert and we will map it according to its capabilities and screen dimensions.