TADA Advanced Tests – A Tutorial

The Test Devices

For this tutorial, I’ll be using 2 sample devices, the Sony Erisson V640i, and the Sony Ericsson W200i
I’ll be referring to some of the property values listed on the above page, so if you get confused by the numbers you can look them up there.

The Properties

As already mentioned, I’ll be demonstrating the tests for Usable Display Width and Usable Display Height.
According to DeviceAtlas, these are described as:
Usable Display Width:

The total number of pixels addressable in a browser in the horizontal direction of a rectangular display when held in its default orientation. The Property does not apply to displays that are not rectangular or square. The pixels are counted from the top left corner to the top right corner and the result expressed as an integer.

Usable Display Width:

The total number of pixels addressable in a browser in the vertical direction of a rectangular display when held in its default orientation. The Property does not apply to displays that are not rectangular or square. The pixels are counted from the top left corner to the bottom left corner and the result expressed as an integer.

The Tests – A Walkthrough

Both of these tests work in a common fashion:

1. You are presented with a small image that should be smaller than the screen’s width/height (don’t worry if its not)
2. In order to make the image wider/taller, you click “Bigger”. In order to make it skinnier/shorter, you click “Smaller”
3. When you have found the exact value for the usable width/height of your device’s screen, you click “Yes”
4. The instructions found at the top of the test page when you first view it, will disappear for subsequent page views. To read them again, click “Instructions”
5. To reset the current width/height setting, click “Reset”

It really is very straight forward, but unless you know what to look out for in the tests, you could be caught out quite easily. Read on for a more detailed explanation!

Test Selection (V640i)

From this page (the Display category listing of tests), you can select either the Usable Display Width, or Usable Display Height tests.

Usable Display Width (V640i) – 1

From this page, 2 things are obvious.

1. List items on the Sony Ericsson V640i are unpredictable (compare this image to the one above, for example)
2. From this page you can make the image Bigger, Smaller, or you can view the image directly (explained below)

Its important to note that the image on the device’s screen is in the form of a black/white checkerboard (which is why it appears grey), and has a black border around it.

Usable Display Width (V640i) – 2

In this image, we can see that we have clicked “Bigger” and can see that the image has now increased to a value of 180
Obviously, the image is slightly distorted.

1. The image’s black border has partially disappeared
2. The Black/White checkerboard is no longer a smooth pattern, or grey, it has clearly been slightly rescaled by the device because it is too wide!

Usable Display Width (V640i) – 3

Here is an example of a perfectly set test value.

1. The image’s black border is completely visible
2. The Black/White checkerboard is a smooth pattern, or grey, and doesn’t appear to have been rescaled!

You can see the View Image Directly link is highlighted in this image – this is important and is explained in the next step.

Usable Display Height / View Image Directly (V640i)

Because both the width & height tests are so similar, there is no need to go through the steps for the height test too. Simply follow the examples above and you should be able to cope just fine.
That said, there is one more step that needs to be explained. The View Image Directly link is available for both tests, but is useful for checking the current value you have selected for the display height test.
Clicking this link will present you with a page displaying the image (with no preceding text) so that you can clearly see if the selected height is exactly correct, or slightly off!
To go back to the previous page, so that you can select a bigger/smaller (or, indeed, accept the current value as your answer), you can scroll down past the image click the link directly below it.

All of the other steps listed above also apply to the height test.

Usable Display Width (W200i) – 1

Before I sign off, I’d just like to demonstrate the rescaling issue on another device, the W200i in this case.
Given that the W200i is older than the V640i, the browser is of less quality too (that said, LI bullet lists appear to work just fine on it …) In this image, the black border is obviously missing on the left & bottom, and the checkerboard is clearly being rescaled.
In this case, you would try a smaller size.

Usable Display Width (W200i) – 2

Again, you can see that the W200i has a maximum usable width of less than 125 pixels.
In this image again, the black border is obviously missing on the left & bottom, and the checkerboard is clearly being rescaled.
Again, in this case, you would try a smaller size.

Summary

I hope now that you find the two advanced tests in TA-DA easier to understand – this property is incredibly important for a whole variety of reasons, and its compounded by the fact that testing this with/without a scrollbar can alter the final result.
There will be cases where its genuinely difficult to tell whether or not a device is rescaling an image, or what exactly should be the usable screen width (eg: On the iPhone, is it the maximum overall width allowed within the browser, or the maximum displayable on the device’s screen without scrolling? And at what zoom level?)
As a rule, we’re looking for the measurement of the width/height of the page without the scrollbars, unless they are displayed by default on the device.

Best of luck in your TA-DA test sessions, and I look forward to reviewing your submissions!

Daniel Hunt