The OrangeML solution ensure that the rendering is optimized whatever the device, so normally you don't have to make tests on your side.

During the development phase, using an emulator is normally sufficiant and highly preferrable.

However, you have to keep in mind that the mobile environment has a lot of constraints, mainly related to the screen width

Testing on actual handset could be sometimes a nightmare. Then using an emulator could be very useful during the development phase of your service.

The easiest solution is to use Firefox and its user agent switcher extension.

1. If you don't have Firefox, download it from http://www.firefox.com and install it
2. Download the user-agent switcher extension from https://addons.mozilla.org/fr/firefox/addon/59
3. Install it on firefox, simply by droping the xpi file on the firefox window
4. Download the following user-agents file. It contains a list of typical device profiles
5. After restarting Firefox, go to tools/User-Agent Switcher/Options
6. Click on User-agents, then “Import…” and import the useragent.xml file you have downloaded
7. Click on OK

Now you can switch among a couple of typical device profiles from Firefox, simply by clicking on tools/user agent switcher.

You can access to the full list of supported devices here.

This is one of the main (and quite obvious) aspect of the mobile environment: The width of a mobile screen is very limited. It obviously affects the size of the image (cf. next section) but it mainly affects the length of the text.

If we consider the Orange France traffic (which is quite significant), we should consider 4 significant categories in terms of width in pixels:

• less than 128 pixels (more than 27% of the Orange France traffic)
• between 128 and 176 pixels (more than 20% of the Orange France traffic)
• between 176 and 240 pixels (more than 44% of the Orange France traffic)
• More than 240 pixels (less than 9% of the Orange France traffic)

and 5 significant categories in terms of number of characters per lines:

• less than 16 characters per line (about 17% of the traffic)
• between 17 and 25 characters per line (more than 34% of the traffic)
• between 26 and 35 characters per line (about 30% of the traffic)
• between 36 and 38 characters per line (about 17% of the traffic)
• above 38 characters per line (less than 2% of the traffic)

So at the end of the day :

• About 50% of the traffic concerns devices that can display less than 25 characters per line, with a width of less than 176 pixels
• less than 2% of the traffic can display 38 characters or more

As a conclusion, the ultimate rule to consider when designing mobile pages is the following :

Never more than 25 characters per lines

If necessary, you can use the UsableWidthChar filtering expression to adapt the content of your page to the device capabilities, but most of the time, it sufficient to consider some basic rules such as:

• Always consider small and medium devices as a priority when designing the pages. The typical target should have a width of less of 170 pixels and less than 25 characters per lines.
• Make the labels of the links as short as possible. Having links on several lines dramatically affects the user experience. Ideally, labels of action list or navigation list should not exceed 14 characters.
• Make the block title and subtitle as short as possible. Ideally, such title should not exceed 16 characters per line
• Use table only if necessary. In such cases, make the content of the cell as small as possible, and remember that tablealt can be used to provide a alternative rendering for small devices.
• Remember that the number of items of a pagination should never exceed 5. Use preferrably “next” and “previous” links, that are more adapted to a mobile context.

Try to reduce the number of images in your pages. Remember that the device has to send one request per image. On most devices, sending a request takes a lot of time and resoources, whatever the network, and then dramatically reduce the end-user experience. When it is possible, avoid “decoration” images such as icons, bullets, etc.

Here we only have to consider the width of the image. Except for exotic image ratios, having the right width is sufficient to garantee an optimized user experience.

The image width to consider depends on the mode of the image.

• For float images, the width should never exceed 60 pixels
• For image list, it should not exceed 50 pixels
• For background image of block title, the height should ideally be between 18px and 31px
• For centered images, you should provide a minimum of 3 sizes (cf. imgalt): 110px, 150px, 220px
• For full width images, you should provide a minimum of 6 sizes (cf. imgalt): 122px, 170px, 234px, 300px and 464px
• For major vignettes, you should provide a minimum of 6 sizes (cf. imgalt): 118px, 162px, 228px, 296px and 462px
• For normal vignettes, you should provide a minimum of 3 sizes (cf. imgalt): 60px, 90px, 120px
• For copyright logo, the width should not exceed 40x25px

Most of the devices supports GIF and non progressive JPEG images. So using this kind of images should be sufficient to address almost all devices. Note that a few devices doesn't support properly GIF transparency.

If an image has to be also available for black&White device, you should also consider WBMP images.

Avoid progressive JPEG images, as it's ot supported by a significant number of devices.

Remember that you can use the type attribute of the imgalt element to specify the format of your image.