Category: "mobileOK"

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.

Mobile Device HTML Page - Detect and Redirect

First, the device must be identified so the correct content can be served.

An .htaccess file can be used, or these settings can be placed in httpd.conf (or an included .conf file). This is an Apache 1.3 version, 2.+ may be slightly different.


# Set the MIME type
AddType "application/xhtml+xml;charset=utf-8" .html

# This handles the redirection
RewriteEngine On

# Don't redirect requests for images
RewriteRule \.(gif|jpe?g|png)$ - [L]

# Test for the user agent.  Mozilla is used to indicate a non-mobile device
# A more complex RewriteRule would be required for a production environment
# http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones is a good list
RewriteCond %{HTTP_USER_AGENT} !^Mozilla.*

# Use this page for mobile devices
RewriteRule .* wap.html       [L]

# Otherwise process the request normally

In this case, the page is a very simple page, to let people know that they need to use a browser to visit the page.



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
                content="application/xhtml+xml;charset=utf-8" />
<meta http-equiv="Cache-Control" content="max-age=86400" />
<title>site.com</title>
<style type="text/css">
body
{
font-family:verdana,arial,sans-serif;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body>
  <h1>Welcome to my.site.com</h1>
  <p><img src="icon64x64.gif" alt="logo" title="logo" height="64" width="64" /></p>
  <p>Please visit my.site.com from a laptop or desktop.</p>
</body>
</html>

Validate the code using the link above to ensure it displays well in most devices.

A different approach, using a .jsp is at: https://core.forge.funambol.org/wiki/HowToMakeAMobileOKPageForThePortal, a similar script could be adapted for PHP and ASP.