Sencha.io Src Update

Sencha.io Src is one of the cloud services offered as a part of Sencha.io, and solves a common problem that mobile developers face: how to design for multiple screen resolutions.

We’re thrilled that the service is now handling many hundreds of images per second for mobile sites and applications all around the world. And we also very pleased to announce a set of new and experimental features to the service, available today.

Support for device orientation

Sencha.io Src recognizes devices according to their user-agents, and scales images to their known screen sizes. This however, is not able to take account of the orientation of the device. An iPhone is well-known to have a screen of 320×480 pixels, but when an app is being used in landscape orientation, an image ought rather be constrained to 480×320.

To solve this, you can now explicitly set screen orientation, and to do so, the service’s API now accepts ‘portrait‘ or ‘landscape‘ in the URL:

More importantly, the service now also provides a small JavaScript library which you can include in your page, and which will detect orientation if the browser’s window API supports it, and set a cookie accordingly. Subsequent requests to sencha.io Src will then indicate the current orientation, which can be detected using ‘detect‘ in the URL:

Try out the test page with an iPhone, for example, and try reloading the page with different orientations.

(As the documentation points out, you cannot always guarantee that the cookie has been set prior to a non-deferred image download, so you may need to use this in conjunction with document load events in regular web pages, as we do in the example above.)

Client-side measurements

The same screen.js script also takes various screen-size measurements through the browser’s DOM and BOM APIs, and these can be also be used to adjust screen sizes as an alternative to user-agent detection.

For example, if you want an image to be declaratively constrained by the screen.width value:

This approach anticipates a ‘future-friendly’ alternative to user-agent detection, and also allows you to specify other types of measurements: for example, document.body.clientWidth will measure the inner width of your document’s body, taking its margin into account. The trade-off is the possible race-condition between cookies, initial image requests, and also the way in which some measurements will vary during the loading of a page. There are more notes in the documentation, and real-device testing remains highly recommended!

New formulaic manipulation

You’ve long been able to manipulate image dimensions using operators like ‘-‘ (to deduct pixels) or ‘x‘ (to scale by percentage).

Sencha.io Src now adds support for rounding (using ‘r‘) and explicit maxima (using ‘m‘ and ‘n‘) in these formulae.

For example, r20 will ensure that an image is always constrained by a multiple of 20 pixels. This is often important when creating tile- or column-based layouts:

The maxima operators allow you to indicate different size limits for mobile- and non-mobile devices. This is useful to ensure that, even if the actual browser cannot be recognized, its genre can be used to ensure sensible images are sent for client-side resizing. The code below, for example, will display an image no larger than 500 pixels on a desktop browser, and no larger than 100 pixels on a mobile browser:

Take it for a spin

The full documentation for the API is available here, with a summary of its syntax, new formulaic operators, and client-side measurements here.

Please let us know how you get on with these new features, and what else you might like to see form the service in the future. Enjoy!