6 Tools for Testing Mobile Web Designs

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.mobilewebdesign.de/?p=72 Michael

    For iOS testing – on Mac – you can use the “iPhone Simulator” that comes with the Mac developer tools. That is far better than iPhoney.
    Also, while a bit out of date, the “mobile viewport tester”: http://www.mobilewebdesign.de/beispiele/viewport-sizes.html
    Here you can simply enter an URL (localhost adresses work, too) and check your design-html-prototype with different screen sizes.

    Congrats for starting this great blog, guys!

  • http://intangiblestyle.com Matthew Babbs

    Firefox Mobile has a version built to run on desktop computers: http://www.mozilla.com/en-US/mobile/download/#desktop

    And of course Opera has an emulator for Opera Mobile, the version of Opera for smartphones: http://www.opera.com/developer/tools/#operamobile

    In my experience, the most difficult thing is testing Mobile Safari. Android and Blackberry have emulators that you can run anywhere, but there’s just no good way to test Webkit on an iPhone unless you have a Mac.

  • Alex

    I hear you about testing for iPhone, but I have decided why waste my time. That company will implode before any of the other ones will – be it due to the networks they run or the lack of finishing on the small things in the phone or the rampant fascism that the company has to deal with on the daily or the lack of insightful ergonomics. I’m still blown away at how everyone loves the iPhone so much but I’ve known people for years that already had all that functionality in a Windows Mobile phone way before the iPhone was ever even conceived. I’d say don’t waste your time on iPhone apps, you couldn’t sell them anyway without the risk of it being stolen by the company that actually should be protecting you.

    I’ve never used one (windows or iPhone) myself, I love my android.

    ** Great article by the way! I saw a link to this site off of site point, I went ahead and bookmarked it I will most definitely be back.

  • http://www.mobobo.co.uk/ andy

    I found ripple to be very useful whilst designing and front-end developing a mobile web app…

    http://ripple.tinyhippos.com/

    they have just been RIM(med) and I hope that this doesn’t alter an excellent offering

  • http://www.qainfotech.com/ Cathy Holmmes

    Hi all.
    I must thank you for the post. And also the participants here.

    I must say testing shouldn’t be viewed through the prism of pass or fail, rather it should be viewed as learning and evolving,

    Cathy

  • http://scottshub.com Scott

    i second andy’s comment to the ripple emulator chrome extension It really helps when developing mobile web apps.

  • http://twitter.com/oregon_tony Tony Perez

    And Keynote has a free version of their MITE tool that lets you select from a large database of devices and it analyzes mobile page construction based on the handset type you selected.

  • http://www.platgroupng.com Plat Tech

    Many thnaks both for the piece and the comments. We will be trying them out