"How To" Guides for XML

You are currently using a web browser that does not support HTML pages with style sheets. Please try the XHTML 1 or XHTML 1 Mobile version of this page instead.

How to repurpose mobile content for traditional web browsers

When content needs to be delivered to both traditional web browsers and smaller mobile devices, one technique for producing content for both channels from the same source is to code the content for one channel and repurpose it for the other channel. In most cases, the content for traditional web browsers already exists, so the tendency is to try to repurpose that content for smaller devices.

However, it's much easier to design the content for the smaller portable devices and use XSL templates to repurpose the content for larger displays by wrapping it with additional markup code.

This technique is particularly useful for sites using a ".mobi" domain name managed by the dotMobi registry, since the registry requires sites to be designed for mobile devices. For an example see the Sample .mobi site

Sample XHTML file

The XHTML file contains the page-specific content that is delivered to all types of browsers. No site-wide common elements are included, since those are put into separate templates.

Sample XHTML file

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/sample.xsl"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <link rel="stylesheet" type="text/css" href="/screen.css" media="screen"/> <link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld"/> <title>Sample .mobi site</title> </head> <body> <h1></h1> <h2>Home Page</h2> <p>This is the actual content that shows up on small mobile devices. The content can include <a href="http://www.Acronyms.net/terms/h/Hypertext-Transfer-Protocol/" title="Hypertext Transfer Protocol"><abbr>HTTP</abbr></a> links to other web pages, such as:</p> <p><a href="/detect.cgi?test" accesskey="d">Detect browser type</a></p> <p>as well as specialized links for mobile devices with phone functions, such as:</p> <p><a href="wtai://wp/mc;14123373113" accesskey="w">Call the webmaster</a></p> </body> </html>

See .mobi sites in Internet Explorer for issues displaying ".mobi" web sites in an IE browser.

Sample XSL templates

Common elements that need to appear on every page throughout the site would be put into templates in an XSL file referenced by the XHTML pages.

sample.xsl

<?xml version="1.0" encoding="UTF-8"?>  <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="html">  <xsl:output method="xml" version="1.0" omit-xml-declaration="no" indent="yes" doctype-system="http://www.sample.mobi/dtd/xhtml1-strict.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"/>
<xsl:template match="/"> <xsl:apply-templates select="*"/> </xsl:template>
<xsl:template match="html:head"> <xsl:copy> <xsl:apply-templates select="@*"/> <link rel="stylesheet" type="text/css" href="/screen.css" media="screen"/> <link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld"/> <xsl:apply-templates select="node()"/> </xsl:copy> </xsl:template>
<xsl:template match="html:body"> <xsl:copy> <xsl:apply-templates select="@*"/> <h1 style="display:inline">Sample .mobi site</h1>  a working example of repurposing mobile content as explained by  <a href="http://www.HowToGuides.com/internet/xml/templates.xml#mobile"><img src="/images/howtoguides.jpg" width="143" height="27" alt="How To Guides logo"/></a> <p style="color: gray">This is a sample showing how templates can be used to make a web site that has been designed for mobile devices look good in a normal web browser. The important content, which you can do "View Source" to see, is put into <a href="http://www.Acronyms.net/terms/e/Extensible-Hypertext-Markup-Language/" title="Extensible Hypertext Markup Language"><abbr>XHTML</abbr></a> pages that are delivered to mobile devices, and any additional layout and styling for traditional browsers is put into templates and style sheets. Since the templates and style sheets can be reused for all pages on the site and are cached separately, this has the added advantage of reducing bandwidth requirements by as much as one half or more.</p> <hr/> <xsl:apply-templates select="node()"/> <hr/> <p>Click on the following link to verify that this page conforms to the <a href="http://www.Acronyms.net/terms/e/Extensible-Hypertext-Markup-Language/" title="Extensible Hypertext Markup Language"><abbr>XHTML</abbr></a> Mobile Profile as required by the dotMobi registry Switch On! guidelines:</p> <p> <a href="http://validator.w3.org/check/referer" target="w3cvalidator"> <img src="/images/valid-xhtml10.png" alt="Valid XHTML 1.0!" height="31" width="88"/></a>   <a href="http://ready.mobi/start.jsp?uri=sample.mobi">MobiReady Report</a> </p> <p>The "Mandatory Registrant Rules" for .mobi domains states:</p> <p style="margin: 0 3em">The "Mandatory Registrant Rules" for .mobi domains states that "Requests for URIs consisting only of "example.mobi" or "www.example.mobi" must result in a response that is encoded in a format the device supports or valid <a href="http://www.Acronyms.net/terms/e/Extensible-Hypertext-Markup-Language/" title="Extensible Hypertext Markup Language"><abbr>XHTML</abbr></a>-Mobile Profile 1.0 or later released version, where "example" stands for any domain name.</p> <p>For a site that satisfies these registration requirements for a .mobi domain, the W3C Validator will display:</p> <p style="margin: 0 3em; background-color: #55b05a; color: white; text-align: center; font-family: Bitstream Vera Sans, sans-serif; font-size-adjust: .53; font-size: 1.5em; font-weight: 500">This Page Is Valid -//WAPFORUM//DTD XHTML Mobile 1.0//EN!</p> <p>Copyright © 2006 Sample .mobi. All rights reserved.</p> </xsl:copy> </xsl:template>
<xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template>
</xsl:transform>

More sophisticated sites could have various groups of pages which are similar to each other, but are different from the pages in other groups. In this case, more than one level of templates would be used. For each group of similar pages, a separate template would be created for the common elements on the pages within that group. Those templates would all import a single site-wide template containing the common elements that would appear on all pages across the entire site.

Style sheet for traditional web browsers

screen.css

img { border: 0; }

Style sheet for handheld devices

handheld.css

img { border: 0; }

.htaccess file

To deliver the XHTML and WML pages with the correct MIME types, you will need an .htaccess file will the following directives, or their equivalent for the web server software you are using:

.htaccess

DirectoryIndex index.xml ErrorDocument 404 /pagenotfound.xml
AddType application/xhtml+xml;charset=utf-8 xml xhtml AddType text/vnd.wap.wml;charset=iso-8859-1 wml
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} \(compatible;[[:space:]]*MSIE[[:space:]]+[[:digit:]]+\.[[:digit:]][[:alnum:]]*; RewriteRule ^$ http://%{HTTP_HOST}/index.xml [L,R=temp]

Contrary to the HTTP standards, Internet Explorer pays more attention to the file extension than to the MIME types specified by the server. Therefore, the default DirectoryIndex document has a .xml extension. See .mobi sites in Internet Explorer for more information on the issues with displaying the default DirectoryIndex document in IE.

Last updated Sunday March 25, 2007

Printer-friendly PDF* format:

How To Guides for XML

This Section

You are currently viewing this page in XHTML 2 Style Sheet* format (* see Clicklets for more infomation). This document is also available in HTML Style Sheet*XHTML 1* XML* HTML 4*HTML 5 Style Sheet*HTML 5 XML*HTML 5 non-XML* XHTML Mobile* WML Mobile* and printer-friendly PDF* formats. This is accomplished with Single Source Publishing, a content management system that uses templates in XSLT style sheets provided by XML Styles .com to transform the source content for various content delivery channels. There is also RDF* metadata that describes the content of this document.