In earlier posts we mention that the mobile space has a range of device types and content often renders better when tailored to specific device characteristics or features. Adaptation is about exploiting those features where they exist, while avoiding them in others. Another part of adaptation requires working around problems found in specific devices. Adaptation can occur at the server or at the client side (the device). It’s also possible for adaptation to take place in the network, and operators frequently do some adaptation between your Web site and the device.

Client Side Adaptation

Client side adaptation usually relies on using the media selectors associated with CSS. Stylesheets can provide a different experience for the same page on mobile by using the ‘handheld’ media type. While this can be a useful form of adaptation, it is limited. The mobile downloads the same XHTML markup as a desktop browser, which might unnecessarily taking time and cost the user money with content that’s ends up not being displayed. To include different mobile and desktop stylesheets in your document, add link elements like the following:

link href=”screen.css” rel=”stylesheet” type=”text/css” media=”screen”
link href=”mobile.css” rel=”stylesheet” type=”text/css” media=”handheld”

Alternatively, screen and handheld styles can appear in the same style sheet, using the @media CSS rule. For example, if you wanted to suppress the display of an image in the mobile presentation, identify the image element using the id attribute (calling it ‘image1’), and then refer to it within the style sheet:

@media handheld
{
#image1
{display: none}
}

Note that most browsers will still download the image, and users will suffer the delay and cost of doing this. So client side adaptation with CSS is mainly useful when varying the presentation style, or order of the content.

Scripting is another technique for client side adaptation. In the desktop world scripting is often used to accommodate differences between browsers. However, on mobile more care has to be taken, because low-end devices often include no or limited support for scripts. But for high end devices—where you know the device capabilities—this can be a handy technique.

Server Side Adaptation

Server side adaptation comes in various forms. At its simplest, it relates to using scripting to vary small parts of the page delivery. One example is changing the HTTP Content-Type header attached to the content but, it’s not typical to use the content type text/html when delivering to mobile devices. On the other hand, when delivering such pages to some versions of Internet Explorer on the desktop, it can be more effective to use that content type. In this example, the adaptation would consist of a test to see which User Agent (browser) accesses the page and deliver the chosen header based on whether the browser is Internet Explorer or not.

The following is a simple (and incomplete) example of how to do this in the server side scripting language PHP:

$msie = strpos($_SERVER[“HTTP_USER_AGENT”],’MSIE’) > 0;
if (!$msie)
{
header(“Content-Type: application/xhtml+xml; charset=UTF-8”);}
else {
header(“Content-Type: text/html; charset=UTF-8”);
}

Other examples of varying the content to better suit device characteristics include presenting an appropriately sized image for the device accessing the page. A good general guidance for low-end devices is to limit images to 120px width. Those with high-end devices will have a much better experience if the image fits their screen and its color depth. Because it wastes bandwidth to transfer images that are bigger than the screen can handle, it’s good practice to resize images at the server prior to transmission. Do this by preparing specifically sized images in advance and choosing the biggest size that will fit; or dynamically resize the image at the point of delivery.

Both approaches have advantages: The former is better when the image must preserve specific details. The advantage of dynamic resizing is its ability to fit an image exactly to the device.

The Web has revolutionized how we interact with and publish information, but up to now it has only been accessible to people with desktop devices. Web-enabled mobile phones now extend the expected global reach of the Web to three times that of today, touching one-third of the population of the planet.

Some of the more important benefits of the Mobile Web are:

• It can enable access to information, any time and anywhere there is cell phone coverage. By freeing information from the restrictions of a desk or search for a nearby WiFi hotspot, people can quickly retrieve and exchange information.
• It provides vast connectivity. One-third of the population currently has access to the Internet through a mobile device. This number is twice as many as the number of Internet-connected personal computers (PCs).
• It enables services to take advantage of mobile device capabilities such as clicking on a phone number to call it or add it to the device address book.
• It can provide location-based content. Location technologies can enable location-based information be provided to a user. This can reduce the steps required for the user to reach useful content, and so makes it accessible with the least amount of effort.

In a fast-growing mobile society, businesses, organizations and individuals need to reach and interact with their customers while mobile. For content providers, it opens a new and more profitable revenue stream, without having to rely on mobile service provider portals.

When should I start?

You should start a mobile project by defining the overall goals for the site. Consider grouping these into the following three categories for easier management and using their related questions to define goals:

• Business: These come from your project’s business goals and should be clearly defined before you begin. What are your organization’s goals? How does a mobile presence help your organization achieve its goals? Does it improve my current business reach? Does it provide new business opportunities? Is there an opportunity for innovation? Depending on your business case, you could choose anything between providing a great experience on all mobile devices, or creating a basic web site with free tools in a short time.
• User: User goals (and sometimes constraints) reflect your audience’s goals. How does your audience benefit from a mobile presentation? What tasks will they accomplish with your mobile content? Does the immediacy of mobile help the user? How will they interact with your content? Context is big in mobile, so the key is to understand your users’ wants and needs. Ensure that you value the attention, time and money of your audience, i.e. value your customer.
• Technical: Technology and resource opportunities and constraints. Look at these goals as a triangle or three-legged stool. When making decisions, try to find and maintain a balance on all three sides: business, user and technical. If you lean on one side too much or too little, then the other sides suffer.

User goals usually make a great place to start, and this is especially true when considering mobile.