Tools of the trade
You’re no mobile developer unless you have the tools to develop on mobile! And while it’s good to own at least one of the smartphones you’re developing on, it’s probably unrealistic to think that you’re going to go out of your way to buy several other unlocked smartphones just to test with. So you should have the next best thing: an SDK!
But an SDK is just one of the tools of the trade. Here’s links to more things to get you started!
SDKs, Emulators and Simulators
Short of having access to a real phone, the next best thing is to have an emulator/simulator. And good news: all the major smartphones have SDKs available for you!
iPhone SDK (Mac OS X only) – the quintessential SDK for the quintessential smartphone. Includes iPhone simulator.
Android SDK (Mac OS X, Windows, and Linux)
Palm webOS SDK (Mac OS X, Windows, and Linux) – emulator for Palm Pre, Pixi, etc. Also check out Ares, the browser-based tool for creating web apps.
Firefox Mobile emulator (aka Fennec) – mobile version of Firefox being developed for new Nokias and soon Androids
Opera Mobile emulator – this is the fastest emulator of the bunch, in terms of downloading and launching the program. Painless installation.
Opera Mini Simulator (Browser-based Java applet) – In-browser simulator. Note that Opera Mini is different than Opera Mobile.
Windows Phone 7 Series emulator
For a more complete list, see Maximiliano Firtman’s Mobile Emulators & Simulators: The Ultimate Guide
Device labs
These are services which allow you to test on actual devices in a lab.
Keynote MITE (Mobile Interactive Testing Environment) (Windows only) – a glorified user agent switcher. Doesn’t have testing of real devices.
DeviceAnywhere (Java-based software that runs on Windows and Mac OSX) – a service that lets you test on actual mobile devices sitting in labs around the world. It has a tendency to be a bit clunky, but there’s no real alternatives on the market. Only subscribe to this if you intend on supporting more than just smartphones.
Mobile JavaScript libraries
I’ve created a separate entry for the mobile libraries and frameworks now available.
Hybrid (web + native)
The concept is simple: use what you know to create an app with HTML/CSS/JS and turn it into a marketable native app with one of these “wrapper” services.
PhoneGap
appcelerator’s Titanium Mobile
QuickConnectFamily
Rhomobile (HTML-based)
User agent switchers
Many websites sniff a browser’s user agent to detect if it’s a mobile device. As a developer this presents a challenge, because a lot of development is done on a desktop browser. With a user agent switcher, a developer can masquerade their desktop browser as a mobile browser.
Firefox addon: User Agent Switcher
Safari: Enable the Develop toolbar (click on Safari -> Preferences -> Advanced) and click on Develop -> User Agent. Select a predefined user agent or enter a custom agent by selecting “Other…”
Chrome: There is no easy way to do this (note that the one user agent switcher extension for Chrome doesn’t work). Currently the only way is to set command line flags:
To change the user agent of Chrome in Windows:
- Make a copy of the shortcut to Chrome.
- Right click the copy and select Properties.
- In the Target field append ––user-agent=”myagent”
Example Target: “C:\Documents and Settings\Username\Local Settings\Application Data\Google\Chrome\Application\chrome.exe” ––user-agent=”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)”
To change the user agent of Chrome in Mac OSX:
- Open Terminal
- Enter the following into terminal: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome ––user-agent=”myagent”
Example command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome ––user-agent=”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)”
Mobile detection
On the server side, mobile detection is mostly done by user agent sniffing (thus the need for the user agent switchers above), but there are a few other methods.
“Lite” user agent detection: these methods implement a simple server-side function (commonly in PHP) to detect common mobile user agents. There’s a few versions, mostly based on code by Andy Moore. There’s one implemented in the WordPress Mobile Pack and a similar one described on the Nokia developer forums.
WURFL (Wireless Universal Resource File) – a 10+ year old project that is still being used and gaining momentum. It’s beneficial because it’s open source and it offers a lot of valuable information about devices.
DeviceAtlas – essentially a commercial version of WURFL
Reporting bugs
Everybody’s human. All this new cutting-edge stuff isn’t exactly bug-free. Help squash bugs by reporting them on the project’s website. For best results, show a simplified example of the bug in action (try not to post big hunks of code!).
WebKit Bugzilla
Android: Report bugs
Blogs
Keep up to date! There’s new stuff happening all the time on the mobile web.
QuirksBlog – blog of Peter-Paul Koch (PPK), who is known for documenting and researching cross-browser inconsistencies. As of the last several years he’s been focusing on documenting mobile browser bugs.
Daring Fireball – John Gruber’s blog with a cultlike following. Frequently reports on mobile happenings, especially stuff relating to Apple.
Surfin’ Safari – The WebKit Blog
Android Developers blog
IE for Windows Phone Team Weblog
Opera Mobile Blog
Inside BlackBerry – The Official BlackBerry Blog
Yahoo! Mobile Blog
Google Mobile Blog
Miscellaneous
Yahoo! Blueprint – framework for normalizing cross-browser issues across thousands of devices
More from the Mobile Web series:
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks
Great roundup. I’d offer http://www.quickconnectfamily.org/ to add into the web app wrappers. He does a terrible job marketing himself but some apps like the Public Radio Player (and I believe the This American Life app) are built with it.
Thanks for the comment! I’ll add that link to the list, it’s good to know as an alternative to PhoneGap.
Hi David,
Great article. I hadnt seen the Firefox mobile emulator before.
One tool that I find invaluable is the Firefox user agent switcher plugin.
Load it up with a bunch of different mobile user agents and its a quick and fast
way to make sure mobile detections or redirections are all good.
Cheers
r
Hi Richard, thanks for your input!
A user agent switcher is definitely a useful part of the developer’s toolkit. I expanded the article and added new sections for user agent switchers as well as their server analog, the mobile detect script.
Do user agent switchers help you test media queries?
Zoe, good question, unfortunately it looks like they don’t. This is because both “width” and “device-width” are reported by the browser independently of the user agent that’s set.
The purpose of using the user agent switcher is just for detection on the server side. Often a site will have at least two mobile sites: 1) a basic site for feature phones and 2) a nice flashy site for smart phones. The primary way to distinguish between feature phones and smart phones and serving the appropriate site is through analyzing the user agent sent by the browser’s request header. For something like Yahoo! Blueprint which has even more gradation in websites (8 device classes), the user agent is even more important in figuring out which content to serve up.
Look also my project called “Apache Mobile Filter”.
http://www.idelfuschini.it/apache-mobile-filter-v2x.html
http://www.apachemobilefilter.org
Let Me Know Your Opinion
Spring Mobile is worth to look. If your application is in java & using spring framework then Spring Mobile is boon. Spring Mobile supports both detection Lite as well as WURFL.
Spring Mobile : http://www.springsource.org/spring-mobile
./Nikhil
You might want to add jQuery mobile to that list.
@Nikhil and @Daniel Thanks for the suggestions. I’ve created a link to a separate page which I’ll try to keep more updated (see above for the link).
Here is another tool that could fit on this list.
MoSync is a SDK that also works as a cross-platform tool. Develop once in C/C++ and have the code compiled to iOS, Android, JavaME, Symbian, Windows Mobile, etc. MoSync also has a device database with around 1000 handsets. The MoSync code will adapt to the formfactors for the specific handset.
This is a nice post, it could be of great help for everyone.
Yahoo has closed his Blueprint service http://mobile.yahoo.com/developers You can update in article
I really like this site! All information I needed about Mobile Website gathered… nice work though!
Note for people trying to do this in Terminal.app under MAC OS X:
You’re going to have to run this as root.
1) sudo su <– switch to root
Then run the line as above. It will not work otherwise, it will say "Breakpad disabled" and "Unable to obtain profile lock."
HTH
Great series of posts.
Thanks for collating all this information into a succinctly readable series.
I can’t find any mention of this anywhere above:
A Firefox extension used ubiquitously here in Japan in testing feature phones is “Fire Mobile Simulator”
http://firemobilesimulator.org/
And a direct link to the addon:
https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/
I use this great tool every day.
Cheers,
- Jay
[...] Part 2: The mobile developer’s toolkit [...]