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.
Perfecto Mobile
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