Over the past week Steph and I have been busily working away at creating a mobile version of Yiibu. Yet again we’ve encountered an all too familiar problem when designing for mobile devices; mobile screens and pixel sizes — and dealing with larger images on smaller screens.

Like many sites out there we’re using a recent version of WordPress as the CMS for yiibu.mobi, and have used a very flexible theme framework to create our templates. This has enabled us to quickly get our site up and running on a variety of mobile devices without any hassle — even managing to score a lovely 5 on ready.mobi (that’s good) – but we still had one niggling fail; page size limit.

The reason for the fail was blatantly obvious. Within our content (the actual pages and posts within WordPress) we had included several images that worked just fine for devices with larger screens and no bandwidth limitations, but failed miserably on devices with more meagre screens and/or limited bandwidth connections.

A Simple Example

The following illustration from BBC News of how a tsunami is formed (while a little extreme) should serve well to demonstrate the point.

Automated Image Adaptation

This image is perfectly acceptable for any desktop browser — but it’s likely a tad large both in pixel and byte size for most mobile devices. The common approach to dealing with this problem would be to simply (and automatically) adapt the image down to a size more appropriate for use on mobile devices.

While this approach works just fine for a large percentage of images, problems are likey to arise with images containing type, fine details or unusual compositions. Images with these traits may often become illegible and meaningless when automatically adapted, resulting in a poor user experience.

Image Filtering and Replacement

A better approach would be to filter the images within the content and display a variation of the image specifically designed for each screen size — including different aspect ratios. This of course would require that the designer provide additional images for each of the alternate screen sizes, but would result in a much improved user experience on devices.

As mentioned earlier, the image chosen for this example is a little extreme. Ideally you would opt to include the caption within the XHTML rather than the image; but I believe it does make my point nicely regarding the need for some other way to deal with content-rich or detailed images beyond simple, automated adaptation (aka scaling). And on that note I’d like to point you to part two of this article.