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
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"><!-- Copyright (c) 2006 Accilent Corp. (http://www.Accilent.com/) for How To Guides (http://www.HowToGuides.com/). Provided AS IS; no warranties are expressed or implied. Permission is hereby granted to use and/or modify. --> <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.
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"?><!-- uncomment to validate XSLT<!DOCTYPE xsl:transform SYSTEM "http://www.sample.mobi/dtd/xslt.dtd">--><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"><!-- Copyright (c) 2006 Accilent Corp. (http://www.Accilent.com/) for How To Guides (http://www.HowToGuides.com/). Provided AS IS; no warranties are expressed or implied. Permission is hereby granted to use and/or modify. --><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.
screen.css
img { border: 0;}
handheld.css
img { border: 0;}
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.xmlErrorDocument 404 /pagenotfound.xml
AddType application/xhtml+xml;charset=utf-8 xml xhtmlAddType 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.