Jump to content

How to Create XHTML MP Templates that Work on Every Mobile Platform

+ 1
  Maximiliano Firtman's Photo
Posted Sep 03 2010 11:12 AM

The following is an excerpt from my book, Programming the Mobile Web.
XHTML MP is based on the W3C’s XHTML Basic, and they are almost the same. The W3C has an online mobile validator at http://validator.w3.org/mobile; it accepts XHTML Basic and MP as valid markup.

XHTML Mobile Profile is a subset of XHTML. It is XML-based, so we need to follow the strict rules. If you have never worked with XHTML 1.0 or 1.1 for the Web, let’s analyze the differences compared with working with HTML:

  • The file must have a root element (html tag).
  • Every tag name and tag attribute must be in lowercase.
  • Every attribute value must be enclosed in quotes.
  • Every tag must be closed. This may seem obvious, but it is not; tags like <img>, <input>, and <br> don’t need to be closed in HTML, but they do need to be closed in XHTML. The general rule is to use self-closed tags, like <br />.
  • The tags need to be closed in reverse order. If you open a paragraph and then a link, you must close the link before closing the paragraph.
  • XHTML entities must be well formed. A mandatory space should be &nbsp;; and an ampersand character should be &amp;.
  • All attributes must have a value. For example, <option selected> is invalid; you must use <option selected="selected">.
  • The DOCTYPE declaration is mandatory, and the XML opening tag is optional. In fact, for mobile browsers we should not insert the XML opening tag.


Warning: I assume you have some basic experience with HTML, CSS and Javascript; if not, you will find a lot of resources on the Web and excellent books from O’Reilly Media to help you get started.

Available Tags

We have finally arrived at the level of code. XHTML MP, as a subset of XHTML derived from HTML, will look familiar to most web developers.

The tags available in both XHTML Mobile Profile 1.2 and XHTML Basic 1.1 (the two standards are almost at the same level) are listed in Table 5-6. Some features, like scripting support, were added in XHTML MP 1.1 and others, like object support, in the last standard (1.2).

Table 5-6. HTML tags available in XHTML MP 1.2 and Basic 1.1

Tag typesTags available
Structurebody, head, html, title
Textabbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Linksa
Presentationb, big, hr, i, small
Stylesheetstyle
Listsdl, dt, dd, ol, ul, li
Formsform, input, label, select, option, textarea, fieldset, optgroup
Basic tablescaption, table, td, th, tr
Otherimg, object, param, meta, link, base, script, noscript


If we compare previous versions of XHTML MP and Basic, the differences are bigger. The last XHTML Basic standard (1.1) added almost every addition in XHTML MP 1.2, and now the two are almost equal.

Warning: XHTML Mobile Profile 1.2 is the last standard from the OMA. The first draft was presented in 2004 and the approved version was released in 2008. That is why there are still some low- and mid-end devices on the market that don’t comply with this version. Remember that it takes some time for browser developers to comply with new standards, and more time for manufacturers to get devices using the new standards to the market.

We can still use a tag that is not supported in our declared DOCTYPE. It will not validate against the DTD, but most mobile browsers will simply ignore the tag without any error visible to the user.

Official Noncompatible Features

Every WAP 2.0 browser on the market today should understand and render the tags listed in Table 5-6. However, in XHTML MP (and Basic), there are also several tags, techniques, and technologies that are officially not supported. We will still test them in every browser, though, because as we’ve seen there are many full HTML browsers on the market, and others that will understand some noncompatible features. All of the following are officially unsupported:

  • Nested tables (table inside other tables)
  • Full table tags: thead, tbody, rowspan, and colspan attributes
  • Full form tags: input type=“image”, input type=“file”
  • Editing: ins, del
  • Image maps
  • Frames
  • Iframes
  • Deprecated formatting tags: e.g., font, dir, menu, strike, u, and center


We will check all browsers for compatibility with those features, as well as the following:

  • Adobe Flash
  • Microsoft Silverlight
  • The XMLHttpRequest object (Ajax)
  • SVG
  • The canvas tag
  • Other embedded objects: Windows Media, QuickTime, Java applets
  • Multimedia tags: audio and video
  • Opening links in new tabs or windows


We will also verify which URL schemas are available for each browser.

Creating Our First Compatible Template

Let’s create a very simple markup template that will be compatible with all devices. I really recommend that you use the source code view if you are using a visual web tool, like Adobe Dreamweaver or Microsoft Expression Web. You should feel comfortable with nonintrusive, semantic HTML code for mobile web development.

Our template will look like this:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
	"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>First Template</title>
</head>

<body>
	<h1>First Template</h1>
	<h2>Programming the Mobile Web</h2>
	<p>Welcome to the first template of this book</p>
	<p>It <strong>should work</strong> in every mobile browser in the market</p>
	<ol>
 	<li><a href="http://m.yahoo.com" accesskey="1">Yahoo!</a></li>
 	<li><a href="http://m.google.com" accesskey="2">Google</a></li>
 	<li><a href="http://m.bing.com" accesskey="3">Bing</a></li>
	</ol>
	<p><img src="images/copyright.gif" width="150" height="50"
 	alt="(C) mobilexweb.com" /></p>
</body>
</html>


Here are some comments on this code, which produces the results shown in Figure 5-8:

  • We are using the XHTML MP DOCTYPE.
  • We are using standard header tags for titles: h1 ... h6, not p or div tags.
  • We are using the paragraph tag (p) to enclose text.
  • We are using an ordered list to show a link menu. The option numbers match the accesskey attributes of the anchor (a) tags.
  • We provide a width, height, and alternate text for all images.


Figure 5-8. The same template without CSS in the webOS, Android, Safari, BlackBerry, Nokia S60, Windows Mobile, Nokia S40 (low-end device), Motorola, and NetFront (Sony Ericsson device) browsers.
Attached Image
As these images prove, this code works on every platform. I know what you’re thinking: “Hey, this is an awful experience for the iPhone.” If you’re tempted to throw away this book right now, wait! Give me a chance. Using this exact code, we will create a great iPhone (or other smartphone) experience in the following pages. Well, OK, there may be some little changes to the code, but not so many. Our goal will be to keep our document template as simple as this one, even for very complex HTML 5 web apps.

Programming the Mobile Web

Learn more about this topic from Programming the Mobile Web.

How do you take advantage of the new opportunities opening up in mobile web development? With this book, you'll learn the intricacies and pitfalls involved in building HTML and CSS-based apps that you can extend to work with particular devices, including the iPhone, Nokia, Blackberry, Android devices, and other smartphones. You'll not only learn how to deal with platform variations, finicky browsers, CSS compatibility, and other issues, but also how to create pleasant user experiences in a constrained environment.

See what you'll learn


2 Replies

0
  Twm Prys's Photo
Posted Oct 17 2010 03:00 AM

Sorry, doesn't work. Try again!
 : Dec 16 2012 06:24 PM
Works like a charm, plus able to make money with this template. If one gives a negative comment he/she obviously does not know how to use this simple template or out-right is intimidated by the creator of this simplistic example.