6 Tools for Testing Designs on Mobile Devices

By | July 9, 2009 | CSS

8

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:

Get Started with
Ruby on Rails

Github, Twitter and Hulu. All huge. All successful. All Rails.

Learn the web development framework of the moment with our newest book and course.

Learn Rails

Jennifer Farley

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

More Posts - Website - Twitter

{ 8 comments }

Samantha McGarry July 15, 2009 at 12:05 pm

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

brendonjkelly July 10, 2009 at 7:45 pm

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.

Jennifer Farley July 10, 2009 at 4:17 am

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.

TomBradshaw July 9, 2009 at 10:28 pm

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

Anonymous July 9, 2009 at 6:36 pm

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

Jennifer Farley July 9, 2009 at 4:15 pm

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.

Sanat July 9, 2009 at 2:17 pm

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

raena July 9, 2009 at 10:31 am

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.

Comments on this entry are closed.