Erik's notes on Writing for the Sony Ericsson cHTML web browser

Practice and examples of pages

Why XHTML? Why not WAP or WML?

Even if you study the standards of XHTML and CSS, as well as my pages on this site, it is still a frustrating work to adopt your web documents to the Sony Ericsson cHTML browser. Of course, it has the side effect that your web documents obtain a pure XHTML skeleton which prepares them to be accessed by the handheld WWW browsers of tomorrow. You might switch to WML but I believe that WML as well as WAP are ephemeral phaenomena that will not endure the development of handheld internet devices such as the high-end SonyEricsson cellular telephones (viewed in 2005).

Reasons

Nokia, the world leader in mobile telephony, was very fast to embrace the XHTML 1.0 Basic recommendations of the World Wide Web Consortium
The available bandwidth - even for handheld devices - doubles every 2 or 3 years.
The available memory in new mobile phones is likely to double every 6-8 months, which allows for ever more advanced browsers with better image rendering, internet caches etc.

Special treatment of mobile phones of the less-requiring WML and WAP kind will become unnecessary. Everything will merge into XHTML. This is why I shall deal only with XHTML.

Links: Cascading Stylesheets, level 2, revision 1 | XHTML 1.1 - Module based HTML |

Initial considerations

When setting up your site for the use of T610 cellular phones and its relatives, you must keep in mind that

the connection speed of the cellphone (models produced in 2004-2005) is quite low;
the memory of the cellphone is 4-10 MB, of which most is occupied by the user's SMS's, games, addresses, system software;
the cache file(s) of the cHTML browser accepts a maximum of one thep back

You will then have the choices:

To adopt your site to interoperability with handheld devices by upgrading to XHTML 1.1 and CSS 2.1 and using all kinds of tricks within your stylesheets and/or server-side scripting to ensure legibility in the cHTML browser and the screen media (typically desktop and laptop computers).
To start all over by writing pages targetting only the handheld devices.

I have tried both solutions. The first choice works sometimes, and sometimes it does not. In fact, most of the pages on this site cannot be accessed by the T610 mobile phone browser for reasons not yet understood (I even followed my own advice!).

Examples

Example sites
Title	URL	Description
thomas : køhler	http://www.thomaskohler.nu/	Part of a politician's campaign for the Danish parliament Folketinget. In Danish.
TGK Consult	http://www.tgkconsult.dk/	A development aid consulting company. In English
Johnny Lauritsen - Minoritetspartiet liste M	http://www.johnnypolitik.dk/	Part of a politician's campaign for the Danish parliament Folketinget. No member of his party was elected on the general elections February 8, 2005. In Danish. I did not write any of this. It is a good example of the surprising amount of old HTML 4.01 Transitional code that the cHTML browser still accepts. Ignore the option of screen resolution.

thomas : køhler

In the case of thomas : køhler, I trick the browser world by using the frameset page (www.thomaskohler.nu is based on frames). Screen based browsers processing HTML 2+ use this page only for drawing up the other frames. The default text is most often Sorry, your browser doesn't accept frames. Upgrade!. Since Sony Ericsson's browsers have a frames handicap and read this page, I use it for navigation purposes. The best impression will, though, be obtained at the start page for handheld devices, t : K - Start. (http://www.thomaskohler.nu/handheld/startside.html).

Source code of http://www.thomaskohler.nu/index.html,
with the text translated into English

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="
HTML Tidy for Mac OS (vers 1st July 2003), see www.w3.org" />
<title>thomas : køhler</title>
<meta name="Title" content="thomas : køhler" />
<meta name="Description" content="
Thomas Guldberg KÀhler - the man and his politics. With polls and quizzes." />
<meta name="Robots" content="all" />
<meta name="Author" content="Thomas Guldberg Køhler" />
<link rev="made" href="mailto:mail@tgkconsult.dk" />
<meta http-equiv="Reply-to" content="mail@tgkconsult.dk" />
<meta name="Copyright" content="Erik Thau-Knudsen, 2003-2004." />
<meta http-equiv="Content-language" content="dan" />
<meta name="Rating" content="General" />
<meta name="Generator" content="Macromedia Dreamweaver MX" />

<meta http-equiv="Content-type" content="
text/html; charset=us-ascii" />
<meta name="ObjectType" content="Interactive" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="Date.Created" content="2004-01-31" />
<meta http-equiv="Date.Modified" content="2004-04-28" />
<meta name="DC.Title" content="Thomas Køhler" />
<meta name="DC.Description" content="
Thomas Guldberg KÀhler - the man and his politics. With polls and quizzes" />
<meta name="DC.Subject" content="
thomas kÀhler, thomas guldberg køhler, thomas køhler, social-liberal party, folketinget candidate," />
<meta name="DC.Creator" content="Thomas Guldberg Køhler" />
<meta name="DC.Rights" content="Erik Thau-Knudsen, 2003-2004." />
<meta name="DC.Identifier" content="
http://www.thomas-køhler.nu/" />
<meta name="DC.Publisher" content="Thomas Guldberg Køhler" />
<meta name="DC.Date" scheme="ISO8601" content="2004-01-28" />
<meta name="DC.Language" scheme="NISOZ39.50" content="dan" />
<meta name="DC.Type" content="Interactive" />
<meta name="DC.Format" scheme="MIME" content="text/html" />

<link rel="schema.dc" href="
http://purl.org/dc/elements/1.1/" />
<link rel="stylesheet" type="text/css" href="typografiark_handheld.css" />
<link rel="shortcut icon" href="/av/t_kolon_k.gif" />
<link href="typografiark_handheld.css" rel="stylesheet" type="text/css" />
</head>
<frameset frameborder="no" framespacing="0" cols="150,*">
<frame src="navigation.html" name="navigation" marginheight="
0" marginwidth="0" id="navigation" />
<frame src="startside.html" marginheight="0" marginwidth="0" name="
indhold" id="indhold" />

<noframes>
<body>
<div><img src="av/thomas_kolon_koehler_graa.gif" width="200" alt="thomas : køhler" /></div>
<p>Social-liberal parliament candidate </p>
<div class="navigation">
<p><a href="handheld/startside.html">Start page </a></p>

<p><a href="handheld/motiv.html">Why running for the parliament?</a></p>
<p><a href="handheld/nyheder.xhtml">News</a></p>
<p><a href="handheld/nyhedsbrev.html">Subscribe to my newsletter</a></p>
<p><a href="handheld/livshistorie.xhtml">Life story </a></p>
<p><a href="handheld/fakta.html">Facts about me </a></p>
<p><a href="handheld/profession.html">Profession</a> - TGK Consult</p>

<p><a href="handheld/kontakt.html">Contact</a></p>
<p><a href="handheld/portraetfoto.xhtml">Portrait photo (9,8 KB, .gif)</a></p>
<p><a href="navigation.html">Navigation bar for non-PDAs</a></p>
</div>
<hr />
<p class="kolofon"><strong>Thomas Guldberg Køhler</strong> candidate for
the Social-Liberal Party </p></body>
</noframes>

</frameset>

</html>

The above example is overloaded with meta tags to get a high score in the search engines. The next example is located just one level below the start page, and meta tagging is minimised to keep the file size low.

Source code of http://www.thomaskohler.nu/handheld/startside.html,
with the text translated into English

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>t : k - Start</title> <meta name="Description" content=" Thomas Guldberg Køhler - the man and his policy " /> <meta http-equiv="Content-type" content=" text/html; charset=us-ascii" /> <meta http-equiv="Date.Created" content="2004-04-01" /> <meta http-equiv="Date.Modified" content="2004-04-03" /> <link rel="stylesheet" type="text/css" href="../typografiark_handheld.css" /> </head> <body> <div><img src="../av/thomas_kolon_koehler_graa.gif" alt="" width="200" /></div> <h4>Welcome!</h4> <p>I am running for the Folketinget parliament for the Social-Liberal Party.</p>

<p>I am a social liberal because -</p> <ol> <li>the international situation is too serious to be left in the hands of the government alone. I love Denmark and want my country to play an active role in the world, corresponding to the prestige we enjoy in most places;</li> <li>I want a world of justice and without discrimination;</li> <li>I want well-prepared politics where the where big human resources existing in the society will also be used.</li>

</ol> <p>The best place for me to do these things is in the Folketinget parliament.</p> <p><a href="motiv.html">More about my motive to run for the parliament </a></p> <p class="navigation"><a href="startside.html">Front page </a> | <a href="motiv.html">Why running for the Folketinget parliament?</a> | <a href="nyheder.xhtml">News</a> | <a href="nyhedsbrev.html">Subscribe to my newsletter </a>

| <a href="livshistorie.xhtml">Life story</a> | <a href="fakta.html">Fact about me </a> | <a href="profession.html">Profession</a> - TGK Consult | <a href="kontakt.html">Contact</a> | <a href="portraetfoto.xhtml">Portrait photo (9,8 KB, .gif)</a>

| <a href="../navigation.html">Navigation bar for non-PDA-s</a></p> <hr /> <p class="kolofon">Thomas Guldberg Køhler • a candidate from The Social-Liberal Party</p> </body> </html>

The number of meta tags has been kept low to minimize file size.

Stylesheet at http://www.thomaskohler.nu/typografiark_handheld.css,
with the comment translated into English

/* Stylesheet for handheld units, e.g., cellular phones */
body {background-color: #99CCFF;}
.kolofon {background-color: #99FFCC;}
.navigation {background-color: #88BBEE;}
.rubrik {background-color: rgb(200,200,255);}
.staerk {font-weight: bold;}

Comprising only 252 bytes (as of 2004-01-12), this stylesheet the one of the smallest files I have ever produced.

Erik Thau-Knudsen, 2004-01-12