6 Tools for Testing Designs on Mobile Devices

thumbOne of the most important processes when designing for the web is testing. We’re all aware that one of the challenges of web design is ensuring the site looks good in multiple browsers. As the mobile web becomes more and more important, you’ll also want to know how your existing site or widget looks on a mobile device, but there are so many devices, how do we test them all?

As the number of people using mobile devices increases, so too does the pressure to ensure that our websites look good and are legible on a mobile device. The ideal, and unrealistic situation, would be to test on real handsets, but obviously this would be impossible for most designers. Fortunately, there are number of tools available online, allowing you to put your site through its mobile paces.

Device Anywhere is a commercial operation, allowing customers to sign up and test “Any Device. Any Network. Anywhere.” There are a range of subscription plans but you can sign up for a free trial.

device-anywhere

MobiReady is tests mobile-readiness using industry best practices and standards. After testing you receive a free report outlining how well your site performs.

mobi-ready

Opera Mini is a live demo of the Opera Mini browser that functions like it would when installed on a handset.

opera-mini

W3C Mobile OK Checker performs a range of tests on a Web Page to determine its level of mobile-friendliness. The short report produced will tell you where you’re going wrong.

w3c

dotMobi Emulator emulates a real mobile phone Web browser. It’s a bit limited as you can only choose from two different phones you like as a skin.

emulator

iPhoney, as you could imagine, is specific to iPhone testing. It’s a downloadable application that is precise to the pixel, so useful for the designer working on iPhone apps.

iphoney

There are other simulators and emulators available, particularly if you’re willing to pay, but this set will give you a fairly easy method of testing designs for free. Have you used these or any other tools to check your designs?

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.heyraena.com raena

    I’m not really sure what I’d do with iPhoney, cause there’s an iPhone sim (called iPhone Simulator) in the Apple dev tools. The dev tools are free and usually come on a disk when you buy a Mac but you can also download them from Apple.

    I opened the iPhoney start screen in my iPod touch, the iPhone simulator and iPhoney, and the iPhone simulator definitely displays it most like my iPod.

    The other handset ones are definitely groovy.

  • Sanat

    You forgot Adobe’s Device Central http://www.adobe.com/products/creativesuite/devicecentral/ . I think it comes bundled with Photoshop.

  • http://www.laughingliondesign.net Jennifer Farley

    Hi Raena. I didn’t know about the Apple Dev tools having a sim, thanks. I don’t have a mac or an iphone, so I’m a little bit out of that loop. Will have to investigate.

  • Anonymous

    Thank for Post,This article really more informative and very helpful information for web designer .Thank for grate information…Pls visits http://www.teamads.com

  • http://www.crearedesign.co.uk TomBradshaw

    Thanks again for these resources Jennifer. I’m interested in designing sites for mobiles, so these will be really useful!

  • http://www.laughingliondesign.net Jennifer Farley

    My pleasure Tom, glad it was helpful.

    Hi Sanat, you’re right about Adobe Device Central. I didn’t include it though, because it only comes with CS4, so it isn’t as openly available as the others on the list.

  • brendonjkelly

    Some advice needed please,

    I developed a Mobi-Site using dotMobiEmulator and Mobiready for testing. I developed the entire site in CSS as per the mobi dev standards. The site looked great on the two emulators. Then… we tested them on physical phones in the office. They were all a mess – totally different to what the two emulators displayed. On Mobi Ready, I got the “scoring” of the site up to 4.80 – the highest is 5. So according to Mobiready, it was pretty much perfect.

    My advice – DO NOT USE the emulators I used for the official and final look of your mobi-sites. Always check on a physical device. As a mobi-site developer I’ll actually not use those two emulators again.

    If they have worked for anybody else – please let me know.

  • Samantha McGarry

    You overlooked Gomez’s cross-browser solution which automates content renderingon major smartphones and feature phones. http://www.gomez.com. Thanks.