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 (
- 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
<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
- 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
; and an ampersand character should be
- All attributes must have a value. For example,
<option selected>is invalid; you must use
- 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.
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).
|Tag types||Tags available|
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:
- Full form tags:
- Image maps
- Deprecated formatting tags: e.g.,
We will check all browsers for compatibility with those features, as well as the following:
- Adobe Flash
- Microsoft Silverlight
- Other embedded objects: Windows Media, QuickTime, Java applets
- Multimedia tags:
- 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:
- 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
accesskeyattributes of the anchor (
- We provide a
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.
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.
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.