One 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.
MobiReady is tests mobile-readiness using industry best practices & standards. After testing you receive a free report outlining how well your site performs.
Opera Mini is a live demo of the Opera Mini browser that functions like it would when installed on a handset.
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.
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.
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.
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:
- Designing for the Mobile Web by Brian Suda
- iPhone Development: 12 Tips To Get You Started By Stoyan Stefanov
- Mobile Web Design: Be Swift About It! By Halla Kolbeinsdotir
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.
July 9th, 2009 at 10:31 am
You forgot Adobe’s Device Central http://www.adobe.com/products/creativesuite/devicecentral/ . I think it comes bundled with Photoshop.
July 9th, 2009 at 2:17 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.
July 9th, 2009 at 4:15 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
July 9th, 2009 at 6:36 pm
Thanks again for these resources Jennifer. I’m interested in designing sites for mobiles, so these will be really useful!
July 9th, 2009 at 10:28 pm
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.
July 10th, 2009 at 4:17 am
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.
July 10th, 2009 at 7:45 pm
You overlooked Gomez’s cross-browser solution which automates content renderingon major smartphones and feature phones. http://www.gomez.com. Thanks.
July 15th, 2009 at 12:05 pm