Developing for the mobile web is a mixed bag and with new phone technologies coming out frequently, it’s hard to stay ahead of the game. Unless you have an eclectic group of cell phones lying around, it’s hard to test your site against their browsers.
This is where emulators come into play.
By installing a few pieces of software, we can quickly refine a mobile style sheet and minimize the damage that different mobile browsers do to our sites. By the way, all of this stuff is free.
Windows Mobile
What you will need:
Testing for Windows Mobile:
- Open Device Emulator Manager
- Open an emulator image (e.g. WM 6.5 Professional WQVGA)
- Once the device has completely booted up, go to the Device Emulator Manager and you should see an entry under Others (you may have to hit Refresh in order to see the device).
- Right-click on the entry and select Cradle.
- ActiveSync should pop up. Click Cancel.
- Use the Windows Mobile Internet Explorer to browse to your website and start testing!
Blackberry
What you will need:
- Java JDK (ignore the bundles here and just go for the standalone)
- Blackberry Email and MDS Services Simulators
- Blackberry device simulators (download which versions you want to test on)
Important Note: You must install the Java JDK before the Blackberry MDS
Testing for Blackberry:
- Run MDS. Wait until you see “Task- pending push messages” before moving on.
- Open a device simulator you downloaded (e.g. 9630)
- Go to the Browser, type in a website and start testing!
iPhone/iPod Touch
What you will need:
Testing for iPhone/iPod Touch:
- Open Safari and go to Preferences (Edit->Preferences). Under the Advanced tab, ensure that “Show Develop menu in menu bar” is checked.
- In the menu, click on Develop->User Agent->Mobile Safari 3.0
- Browse to your website and start testing!
Screenshot Comparisons
By designing, testing, and targeting for different mobile browsers, you can achieve wildly different looks. Hopefully setting up the above testing environments will make that job just a little easier.
Click for high resolution version
If you have any questions or problems, leave a comment.
Pingback: CSS for the Phone « WebTide
Don’t forget all the devices that run Java based Opera Mini. You can easily emulate Opera Mini by visiting this web site:
http://www.opera.com/mini/demo/
Pingback: Strategic iPhone/Mobile development for key UA web sites « WebTide
Pingback: links for 2010-06-15 « The Adventures of Geekgirl
I cannot reproduce svg rendering bug that I’m seeing on the actual iPhone Safari. One would think that changing the user agent as described here should provide a good simulation of the mobile environment (minus the resolution) – but no such luck.
The user agent trick isn’t really the best way to test for iPhone Safari, but if you’re on Windows or don’t have an iPhone/iPod Touch it’s all you have and will get you close.
Certainly, if you have an iPhone or a Mac with XCode installed and can run the emulator, that’s the best way to test.
In either case, always rely on what the actual device is displaying vs. the computer browser.
I cant seem to make windows mobile work with ur instructions. I dont have any image to load in the Emulator manager. I guess i have to make my own with my own device wich i dont have…
Anyway, gonna go the torrent way cause im wasting time with all those 30 SDKs
No *QVGA.dess can be found nor hard reset.exe wich seem to be needed.
thks anyway great job
Thank you beautiful expression
http://www.mobisoft.com
Android has an emulator too. It’s slow but flexible.
I’m trying to test with blackberry 9000 emulator but I can’t manage to connect to Internet. My pages are requesting but never finish.
I have installed everything as you mentioned but don’t really understand what are “Task-pending push messages”.
What could I be doing wrong?
Thanks in advance.
Is there one place where a website could be tested on all mobile devices in one go without having to go through the above technical steps? The intent would be to type in one url and get the picture above with various cell phones.
That’d be nice, but there’s nothing like that that I’m aware of. Many of the solutions require a hardware level test which is why you need to install the emulators.
It’s not perfect, but it’s a pretty solid emulator for multiple devices:
http://quirktools.com/screenfly/
great instructions how to test your site. Nowadays more and more entrepreneurs are finding ways to profile themselves on the internet. these are nice guidelines to test some features out for them.