Web Pages for Mobile Devices/Browsers (and Desktop/Laptop)

Strategies I used to make a simple web application adapt for both desktop/laptop and mobile browsers:

  • Read http://docs.blackberry.com/4305/. Key elements - keep the page simple, don’t assume you’ll have CSS, don’t assume you’ll have scripting or images.
  • Validated the pages for both XHTML Basic and mobileOK up at http://w3c.org
  • Used user agent detection which relied on strings posted at http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones. Preserved an identifier to allow a custom CSS file for devices. Test for the presence of the custom CSS file, thus, new ones can be added later.
  • Tested the BlackBerry and Android using simulators.
  • Chose to use a single script that adapts to the user agents, rather than separate dedicated files, since the basic processing is the same regardless of device.
  • Used custom javascript for different devices to change the name of the button. The button’s name changed from ‘noscript’ to ’script’ if the scripting executed. This worked better than using the noscript tags.
  • Used FireFox for development, it’s much easier to work with than a mobile simulator or device.
  • Used the Apache access_log to get the UserAgent string (you could also use PHP’s $_SERVER[’HTTP_USER_AGENT’] or the equivalent), with cURL to get the page Google delivers for Androids. This effectively allows you to view the source for a mobile device, and it’s much easier on a lap or desktop.