If you don’t have hundreds of phones but want to see how your site appears on different clients, check out Firefox’s User Agent Switcher add-on. Blueprint uses a phone’s user agent (essentially a browser ID) to determine rendering. By supplying a different user agent with each HTTP request, you can tell Blueprint to treat your desktop browser like a specific hand-held device.

Ready to try it? Follow these steps:

1. Go to https://addons.mozilla.org/en-US/firefox/addon/59 and click “Add to Firefox”. After downloading the add-on, you will need to restart Firefox.

2. You’ll find a new menu item called “User Agent Switcher” in Firefox’s Tools menu. The Switcher comes with three predefined user agents for desktop browsers.

3. Identify user agents you want to test. Some manufacturers provide this information in their developer documentation, and sites like Wikipedia (http://en.wikipedia.org/wiki/Listofuseragentsformobilephones) can also be a good resource. To find your phone’s user agent, open http://whatsmyuseragent.com in the phone’s browser.

4. Add one or more user agents to the Switcher menu. In Firefox, choose Tools > User Agent Switcher > Options > Options… > User Agents > Add…; copy a user-agent string into the “User Agent” field and supply a descriptive name. Examples:

Description: Nokia N90
User Agent: NokiaN90-1/5.0607.7.3 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1

Description: Apple iPhone
User Agent: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; de-de) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/… Safari/…

Then click OK.

To see how your site looks on the selected client, choose the new user agent from the list in the “User Agent Switcher” menu and press Firefox’s Reload button.

Keep in mind that Blueprint does not support every client. But it works with most recent hand-held devices and browsers, and we are constantly adding more. We plan to extend device support significantly in June.