Friday, 27 March 2009

Mobile Markup Languages

In this third post on our mobile friendly websites series , we discuss mobile markup languages. There is a lack of standardization for everything mobile - different platforms, different APIs and different markups. There are a bunch of mobile markups that co-exist today: WML, XHTML, CHTML (iMode), HTML 4.0 and now HTML 5. The key to selecting the right markup again, as pointed out in previous post, is to look at your target audience. Let's start with the basics.

Wireless Access Protocol (WAP) is the protocol which enables mobile access to internet sites. WAP 1.0, introduced in 1998, supported Wireless Markup Language (WML) while the recent versions WAP 2.0 supports Extensible HTML (XHTML) with mandated backward compatibility for WML. Most devices sold today are WAP 2.0 compliant, which means XHTML has become a preferred markup language for mobile websites. CHTML or compact HTML is mostly popular in Japan and works on DoCoMo 's i-mode mobile phones. Recent high-end phones like iPhone and Nokia S60s now have HTML capable browsers.

Let's talk more about XHTML given its popularity. XHTML is basically a well-formed, stricter subset of HTML and has limited scripting support. XHTML-Basic was designed by W3C for constrained devices, which, in turn, was extended by the WAP forum to be called XHTML- Mobile Profile (XHTML-MP). XHTML-MP is the default standard for WAP 2.0. One advantage of using XHTML MP as a markup is that as a developer you can use the same technologies to support your desktop and WAP pages.
Ordinary web browsers can be used to view your WAP site during the development process. Many Google products like Orkut Mobile, etc are available in XHTML-MP.




Figure 1. Orkut mobile on XHTML-MP for lower to mid end phones , XHTML + Javascript + AJAX for S60 3rd edition phones and iPhone/iPod touch.

XHTML has three levels of compliance:

1. Strict: Really clean markup, free of presentational clutter. It disallows use of all deprecated tags and attributes like the
tag.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Transitional: If you are not using CSS for all your site styles and you are comfortable with HTML, this is the easiest XHTML standard to use.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. Frameset: If you site is using frames, this is the DOCTYPE to use.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


There main differences between HTML and XHTML are:

1. Nested Elements: XHTML does not tolerate incorrect nesting:


<p><b> This is not okay for XHTML but would be just fine with HTML </p></b>

<p><b> All is well! </b></p>

2. Case Sensitivity: Both Tags and their attributes are case sensitive in XHTML. The simple and stric rule is that all tags and attributes must be written in lower case. For example,

<a href="myMobilePage.html">My Mobile Website</a>

3. End Tags: End tags are compulsory with XHTML, For example,
<p> should be matched with </p> . What about line breaks? Include the end tab in its opener: <hr />

4. Attribute values: Every attribute needs to have a value. An exception to this rule is that certain attributes like "selected" in radio button in html don't need a value but XHTML needs: selected = "selected". Every attrribute value must be in double quotes. For example,

<img src="mobileIcon.gif" height="150" width="40"/>

You can use the W3C Validator to validate your XHTML. ready.mobi has some very useful tools like validators and emulators which can help with your website development. Other Dos and Don'ts:

  • Do
    • make use of accesskeys
    • resize images on server side based on device screen size
    • make sure that correct encoding is used
  • Do not
    • use iframes and tables
    • use fancy form elements and multipart data uploads
    • keep multiple scrolls
    • have links to unsupported doctypes
    • have pop ups
Ajax and Javascript can really help spice and speed up your websites. We will try to cover those in detail in a separate post.

The latest phone browsers now support HTML 4.0. With xHTML and HTML being supported by the new mobile phones, you can pretty much write anything that is possible on a desktop website. However, the responsibility of it looking good on a mobile phone now squarely falls in the your hands. Your apps can be content and feature rich but will be available on the high end phones only. An example of such a feature rich browser app is Orkut on iPhone.

A small note on the future before we end. HTML5 now has a capability of having a local database that a phone can maintain locally among the many new features. It is currently available on phones like iPhone 3G and Google's just announced android phone HTC Magic. Check out the online demo presented by Vic Gundotra to experience the power of this features.

References:

1. Creating Web Content for Mobile Phone Browsers on Oriellynet.com
2. HTML & XHTML: The Definitive Guide , Fifth Edition By Chuck Musciano, Bill Kennedy
3. A Beginner's Guide to Mobile Web Development



Posted by: Jignashu Parikh, Mobile Engineering, Google India

All trademarks belong to their respective owners.

No comments:

Post a Comment