Mobile Web Toolkit

Mobile Web development requires a more abundant set of developer tools than its desktop counterpart. XHTML MP, Wireless CSS, and Mobile JavaScript are all more refined subsets compared to their desktop predecessors. In addition, the Mobile Web offers many new challenges. In particular, device fragmentation and browser inconsistencies will always wreak havoc within this ecosystem. Great tools can help overcome these challenges. Here are a few:

Validating Mobile Sites

How valid is your Mobile Web Site? Find out with these awesome validators. These validators will grade and offer best practice solutions to achieve a more compliant Mobile site. These are also valuable tools for a code review!

• W3C mobileOK Checker
• dotMobi's mobile validator

Mobile Web Best Practices

Both validators above evaluate mobile sites based upon standards and best practices. Their best practice and standards documentation can be found here:

• W3C's Mobile Web Best Practices
• dotMobi's Mobile Web Developers Guide

Device Databases

Device databases simplify device detection. This helps facilitate content adaptation for specific device groupings (smartphones, featurephones, screen size, OS, JavaScript/AJAX support, is wireless, is touchscreen, etc.). For example, Bank of America and Amazon tailor content based on several of these groupings.

• WURFL (open source)
• DeviceAtlas (commercial)

XHTML Mobile Profile

XHTML MP is the standard markup language for the Mobile Web. Unlike HTML and XHTML, XHTML-MP is featurephone compatible, it is less likely to be transcoded for optimization, and it supports the mobile-optimized Wireless CSS and Mobile JavaScript features. For additional XHTML MP 1.2 features refer to OMA's specification document.

Firefox Add-ons

The following Firefox add-ons are very powerful tools for testing and developing:

• User Agent Switcher allows you to alter your user-agent. Now you can simulate a request as any device. For example, I used this technique to test the content adaptation on Bank of America. They alter their content for touchscreen vs non-touchscreen devices. Typically, it is a good practice to provide larger buttons on a touchscreen device.
• Modify Headers allows you to alter your HTTP Headers. This also allows us to simulate different types of device behavior. Additionally, if you need to view HTTP Request Headers from a Mobile device Gail Frederick has built a helpful site for that.
• XHTML Mobile Profile enables the Firefox browser to render XHTML MP markup documents.
• Small Screen Renderer allows you to simulate the screen size of a mobile device.

Device Testing Solutions

The ideal testing solution is to test on the physical device. Two virtual device testing solutions exist:

• DeviceAnywhere
• Perfecto Mobile

JavaScript & AJAX Compatibility

When device testing is not always feasible, the compatibility tables generated by Peter-Paul Koch are a good alternative. If you need assistance identifying JavaScript compatibility across browsers or devices these tables can definitely help:

• JavaScript Mobile Compatibility Tables
• Test AJAX compatibility on a mobile device
• Test AJAX and JavaScript compatibility on mobile device

CSS Compatibility

If you need assistance identifying CSS compatibility across browsers or devices these tables exit too:

• CSS Mobile Compatibility Tables
• WebKit CSS Comparison Table
• W3C CSS Validation Service
• Wireless CSS

Web Widgets

Web Widgets will allow Mobile Web developers to take advantage of native phone features. The subset is limited but it is a start: Device APIs and Policy Working Group

Book Resources

• Beginning Smartphone Web Development: I highly recommend Chapter 8, Optimizing Mobile Markup and Chapter 12, How to Play Well in the Mobile Ecosystem
• Mobile Design and Development
• Pro Smartphone Cross-Platform Development (Release Date: Aug 2010)