10 Excellent Tools for Testing Your Site on Mobile Devices

Sep 25 2010 by John Pring | 48 Comments

With the ever-increasing sales of smartphones and the burgeoning tablet market starting to skyrocket, coupled with far greater access to more robust mobile data networks, the internet is now being accessed by our users in a multitude of new ways.

The huge range of mobile devices used to browse the web now means you really have to consider making your site mobile-compatible.

But how do you go about it? Testing your site on mobile devices can be time-consuming and expensive due to the vast number of different mobile devices.

Fear not, because there are some handy tools available at your disposal for making sure that your website renders appropriately on the Mobile Web. This article shares and discusses 10 such tools.

1. iPhoney

An excellent free iPhone tester, iPhoney isn’t exactly an emulator, but allows developers to create 320x480px websites for use on the iPhone. It allows you to test images and code in a pixel-perfect Apple-Safari-powered environment, with all the normal features including Portrait and Landscape modes, fullscreen, zoom and plugins.

2. W3C mobileOK Checker

This checker is a web-based automated validation tool that checks to see how mobile-device-friendly your website is. The tests are checked against the W3C mobileOK Basic Tests specification developed by W3C.

3. iPad Peek

This handy web-based tool allows you to see how your websites look when rendered on the iPad. It’s recommended that you use a WebKit-based browser such as Apple Safari or Google Chrome to have as accurate a simulation as possible — or at the very least, a CSS3-capable browser that supports transformation properties (like Opera) because it uses them to render the page in Portrait mode.

4. Modify Headers Add-on for Firefox

There are add-ons for Firefox that can manipulate the data sent to servers to make it seem as if the user agent is browsing on a mobile device, even when they’re not. To do this, you need an add-on called Modify Headers (for Firefox).

Once you have downloaded and installed this add-on, the new options, Tools > Default User Agent and Tools > Modify Headers should appear in your browser.

To emulate browsing on a mobile device, you need to find the User Agent Profile (UAProf) value of your mobile device, which can be found with a quick search on Google for "user agent" followed by the model of your phone (e.g. see Google results for "user agent ipad"). Alternatively, check out this list of UAProf values.

Once you have located the UA Profile value for the phone you want, enter it into the Modify Header dialog box, and bingo, you will see how it’s like to browse from that device.

For Google Chrome, you can try out the User-Agent Switcher extension.

For a browser-independent desktop application that works on virtually any internet-enabled app, try out Fiddler Web Debugger that lets you modify HTTP requests, among other things.

5. Adobe Device Central CS5

As part of the latest Adobe Creative Suite, Device Central emulates the operation of mobile devices on your desktop allowing you to test HTML and Flash from the comfort of your desktop.

To open a page or site, select Device Profiles > Browse Devices, then right-click and choose Add To Test Devices. Now that you’ve added a device, simply go to File > Open (for local testing) or File > Open URL (for remote testing).

Though far from being free, if you’re a professional designer or developer, you’ll have a high chance of being able to access Adobe’s creative suite of applications.

6. Google Mobilizer

Google Mobilizer is a simple web tool that lets you input a web page address and then makes the page mobile-web-friendly by trimming the content down to its bare essentials. This is an excellent tool for seeing where you can make performance optimizations on your site.

7. Gomez

Gomez mobile readiness test gives you a score between 1 and 5 based on an analysis of over 30 proven mobile web development techniques, ranging from stylesheet use (e.g. media queries) to caching techniques and standards-compliant code. The results are displayed in an easy-to-understand document that offers advice on how to make your site better.

Unfortunately, to be able to test your site, you must enter in a bunch of information including your email address, country, zip code, and phone number.

8. MobiReady

In the same vein as Gomez, MobiReady is another online testing site that allows you to enter a URL so that it can perform a set of evaluations, including Page Test, Markup Test and Site Test of the web page. This is a slightly more detailed version of Gomez above and provides a comprehensive test result page including dotMobi compliance, W3C mobileOk tests, device emulators, detailed error reports, HTTP tests and a code checker.

However, the results aren’t as succinct as Gomez’s results, a disadvantage when it comes to presenting your information to your less technically astute clients/employers.

9. DotMobi Emulator

The dotMobi emulator gives you a live preview of your site from a (fairly small, to be honest) range of different mobile phones. This mobile testing tool is great if you need to test your page on older mobile devices.

What can be annoying to potential users of this tool is that it requires the Java browser plugin for it to work.

10. Opera Mini Simulator

With over 120 million smartphones sold that has Opera pre-installed^[1] and an edition available for almost any OS, making sure that your site works on Opera Mini (the mobile version of the Opera web browser) is a good practice to include in your testing workflow.

Thankfully, Opera has obliged us by offering a free web-based emulator for testing and evaluating your web design on a mobile device that uses Opera Mini.

This tool requires the Java browser plugin to function.

References

Opera: State of the Mobile Web report. www.opera.com

About the Author

John Pring works for a company specializing in IT infrastructure, data management and virtualization. He works part-time for a business advice service, GuruOnline. Follow him on Twitter as @guruonlinetv.

48 Comments

Edwin Ortega Bu

September 25th, 2010

Awesome I was just looking for some mobile emulators,, Thanks…..

Michael Tuck

September 25th, 2010

These are excellent resources. I started bookmarking the various resources, then just said the hell with it and bookmarked this article instead. :) Nice work!

Vertinix

September 25th, 2010

Very good article about create bugs free mobile websites. I like iPhoney but Xcode also offers iphone simulator on Mac OS X and it’s also very good.

Daquan Wright

September 25th, 2010

This is awesome. Once I get my new PC I hope to test my apps in iphone and then whatever else is on the market.

Childmonster

September 25th, 2010

Im using N70. Thanks for posting

Idraki M.

September 26th, 2010

Good collection here John.

Mark

September 26th, 2010

Great article. I have had a lot of requests from clients to “mobile” their websites. These can actually help in proving your design idea to a client. Most that I have dealt with what their website mobile but end up with an unusable idea.

Morgan and Me

September 26th, 2010

With so many mobile users on the go now, this set of links really help web design companies for future designing purposes.

Eric Hoffman

September 26th, 2010

I was looking for something like this. Thanks for the great resources! And thanks for including an image of my tutorial :)

Gili

September 26th, 2010

What about uTest?

Johnboy

September 26th, 2010

may be worth mentioning that if you download the iPhone SDK on OSX the iPhone emulator included with it also allows you to launch the mobile version of safari on it and view your site on an emulated phone

zoftpc

September 26th, 2010

I think it’s useful for those who like online via mobile phone, nice share

Jake Rocheleau

September 26th, 2010

Great read! Many of this I didn’t know about beforehand and they can be really helpful when it comes to web dev

2experts

September 26th, 2010

Good idea for an article.

I’m starting to scratch the surface for ideas in develpoing a mobile version of my site, and this helps.

Brian Austin

September 26th, 2010

Great list of resources.
Thanks for posting.

Hastimal Shah

September 27th, 2010

Nice useful list..i bookmarked some of the tools
Thanks for sharing

Giacomo Colddesign

September 27th, 2010

Very useful article..! thanks! :)

aditia

September 27th, 2010

you could add MobiOne to the list http://www.genuitec.com/mobile/

OfficeCavalry

September 27th, 2010

This is great, I have often found usability issues on websites through a phone that do not occur on the web. Does anyone have a personal preference?

Andrea Trasatti

September 27th, 2010

mobiReady and W3C’s mobile checker are based on the same rules although mobiReady gives you some extra details and tips.

You should add to your list Nokia’s (free) remote device access, i.e. test with real devices via your browser: http://www.forum.nokia.com/Devices/Remote_device_access/

Trading Master

September 27th, 2010

I tried the android emulator, and was a reaaaaal frustrating experience. far from user friendly. The device central is constantly outdated. There is no way out.. you have to buy :(

Tamikka Malloy

September 27th, 2010

Very informative article. It’s definitely a good idea to make sure that your website is mobile friendly being that just about everyone has a smartphone and uses it to access the web. If you have a website and want to draw traffic, then making sure its rendered mobile accessible would be beneficial and worth the effort.

Jimmy

September 28th, 2010

I personally like the Opera Mini Emulator (windows binary) more than the Opera Mini Simulator

Jasmine

September 29th, 2010

Nice list. I tested my website on a few of them and am relieved to know that my website still looks pretty OK on all of them!

pakaworld

September 30th, 2010

that is all that i needed. Thanks

Tadd Rosenfeld

October 2nd, 2010

Another great site for testing is browsershots.org.
Highly recommend it.

Tim

November 12th, 2010

Keynote just released MITE 2, a free download for testing with an expandable library of 11,000 device profiles. Check it out at mite.keynote.com.

paul

December 16th, 2010

nice iphoney! never knew about that before! looking for code to know what device is searching your website, any one know?

Almekhlafi

February 8th, 2011

Very nice tools
Thankyou

Jason C

March 2nd, 2011

Check out http://www.webtosmartphone.com. WebtoSmartphone.com has an automatic web to mobile converter that makes most websites mobile friendly for multiple operating systems (i.e. iPhone, Android etc.) If the websites not converted automatically you can simply ask for a quote to have a customized one made.

Theraisa K

March 14th, 2011

Ha! I guess you do learn something new every day. I was not aware of Adobe’s Device Central. Awesome. That is definitely going to be put to good use!

Prophet

March 15th, 2011

Michael Tuck – you SHOULD bookmark RESOURCES!!! not this ARTICLE. why? because this article is more likely going to be dead, than links it contains.

Lam Hai

March 26th, 2011

Yes. Convenient & excellent tools you show up.
Currently, i have a smartphone & be admin of website.
These tools will help me to be out of desk, easy to check my site status via wireless.Thanks

LamHai

Chuck

May 24th, 2011

Thanks! Glad I found your blog LOL Gives a great idea on doing improvements!

M Alimi

June 7th, 2011

Yes, I found info useful!

M Alimi

June 7th, 2011

Thanks!

tim

July 7th, 2011

Very useful, thank you for this.

D.

July 17th, 2011

Will come in handy to test for UX and Conversion rate optimization as well

B

August 9th, 2011

Anyone know if iPhoney should work on an iPad?

Daniel

August 17th, 2011

transmog.net is the only online iphone simulator I’ve found that actually spoofs an iphone user agent. This means you can test your mobile site design and the mobile browser detection process. It’s free, simple and works like a charm.

tony Marshall

September 4th, 2011

Hi,

You also like to try our tool – http://www.sayuconnect.com/mobile_check.php It’s quick, east and free to use

Stewart

September 10th, 2011

Nice list of sites

Manendra

September 14th, 2011

After completing designing every designer have to use these tools to check their standards :)Nice post dude cheers :)

Kimberly

September 16th, 2011

Thank you for sharing this information.
This help me a lot since I don’t have smartphone to test my website. LOL…..

Lara

October 16th, 2011

SeeTest extends all existing testin frameworks (QTP,Testcomplete,Visual Studio,JUnit, Perl, Python) to mobile and enables to easily record on REAL devices connected to your own computer via USB. You cna record on one device and run on any OS, device model etc.
Free trial download here http://www.experitest.com/download/