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:
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;
header(â€œContent-Type: application/xhtml+xml; charset=UTF-8â€);}
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.