By Alex Walker

Small Screen Testing in FireFox

By Alex Walker

A month or two ago I wrote a little piece on Testing for Smartphones & PDAs in the Design View. In essence, the article was a barebones rundown of the more well known small screen emulators.

Today I discovered I had overlooked a reasonably handy alternative — particularly if Firefox is your weapon of choice — Disruptive Innovation’s ‘Small Screen Rendering XPI’ extension’. Although it appears to have been around for quite a while, it seems to have been overlooked by most developers.

Don’t look for bells and whistles. After installation the only change you’ll notice is an extra option in your ‘View’ menu — ‘Small Screen Rendering’, and the results are not unlike Opera’s Small Screen mode.

At this point, the Opera option is probably still more technically useful, if only for the fact it can show you exactly how your page will render in PDAs and smart phones that use Opera for Mobile — a reasonably significant minority.

As Mozilla’s mobile offering (MiniMo) is still in development, Firefox’s ‘Small Screen Rendering XPI’ can only give you a ‘best guess’ at how an average small screen device might tackle a given page.

Ultimately, no single emulator can show you how a page looks in all devices, but this extension is a still a nice place to start.

  • Opera’s small screen rendering shows you what your site will look like in any mobile, as long as you provide a style sheet for it. As long as you have a proper style sheet it will be the same in each phone. A good tutorial on doing this is:

    I think that the Web Dev toolbar for Firefox has mobile viewing capabilities, but I’m not sure.

  • @Microsoft: pIE -> Trash please?

  • MonkeyG

    The Web Dev extension in firefox has the ability to alter the screen resolution to a custom size. I don’t see any specific toll for Mobile rendering. If you don’t have the web dev toolbar, you should get it by using this link:Firefox Web Dev Extension

    It has been a tremendous help when developing for the web. (especially the auto-fill form tool!) :aparty:

  • Web Dev Toolbar has an option in it’s ‘CSS/Media Type’ menu allowing you to view stylesheets marked as “media=’handheld’“.

    Although ‘Opera for Mobile’ will honour that declaration, so few other handheld browsers will, that using that declaration is next to useless IMHO — unless you were running an ‘Opera for Mobile’ forum perhaps. Opera is used in a fair percentage of Symbian OS phones, but I doubt it would be present in more than 5% of the total PDAs and Smartphones.

    OpenWave and Nokia’s Browser hold most of the market (as far as I can tell, anyway). They use their own non-standard rules to interpret code and CSS. As a general rule, they’ll try to load almost ANY CSS they find, regardless of it’s ‘media’ setting (screen/handheld/etc). Of the CSS they download, they’ll render some of it, and make up the rest. What joy!

    Ultimately, the browser-based are handy, but if you want to build seriously mobile-friendly apps, you need to test on the purpose-built emulators.

  • wombat23

    Testing with mobile phones and their native browsers is the only way to a achieve a quality interface. Emulators, plug-ins, whatever – they are not representative of the end user experience. Trust me, I have been developing GUI for the latest Samsung, Motorola and SonyEricsson 3G devices, and also tested in a lot of older (2.5G) devices in Nokia, LG, etc.

    Also, The whole notion of one xhtml document, many renditions is deeply problematic. To achieve a sophicticated interface that works across many mobile phones, you most liklely will need to implement presentation markup in both the xhtml and the css.

    It all depends on how visually rich your GUI is and what devices you have available to test on / your target audience…

    BTW – I’m available for project work come mid-September.

Get the latest in Front-end, once a week, for free.