Thursday, March 13, 2014

Designing content for mobile phones

This one is a short one.

Now, every once in a while a developer has to test their content with a device that is not very widespread, but which form factor is. These are typically mobile phones that are older or just basic. No, not everyone has a smartphone; This may be because of circumstance, or necessity, or for just being a holdover who wants to avoid planned obsolescence on their device. There are millions of these devices in use and there's always a chance someone uses them.

Content in this case is not just a web page or a wap page, but also a background image, which has to fit the screen; or an image in a mobile web page which shouldn't be too large for a screen. So, a background image, which I'd want to fit right across the screen of a phone.

Yes, there are many web pages listing resolutions for numerous device models, and I've even seen several sites that attempt real-life representations of how a mobile phone would appear and look like without necessarily having to buy it, but that's not quite it, because the data is represented in the most convoluted manner, no matter how basic or fancy.

So the solution is this very nice collection of screen resolutions at
http://lab.artlung.com/screen-resolutions
— with corresponding phone models writ inside. These start progressively from the smallest ones at the top to the biggest near the bottom. Each screen resolution is formatted in its own block to the pixel size of what a corresponding device would have, and colour coded progressively from gray to red to indicate how many models each resolution is represented by. Most of all, its very, very simple and intuitive.

This is what I or a developer/content creator really would like to know, because this helps to determine either exact or, as required, the most approximate size of generated content. Often-times browser/user agent statistics don't always reflect the size of a customer's screen, so it's important to know what they are using and how they are seeing the resource that the customers are visiting.