[WSG] Web Design for PDA?

[Isabel Santos]

Hi all, hope this isn't out of scope, both on css-d and wsg:   On the template I'm working on, I decided it would be cool to give it a pda friendly version, for the target public would be kind of eager for new technologies. Following the ALA article on taking your site into the smaller screen, with some adaptation to my font options previous definitions, I created a second style sheet to be called under Handheld devices and to overwrite any normal css rule. I assume it is correct to inserte it like this:   <link rel="stylesheet" type="text/css" href="" media="screen"> <style type="text/css" media="handheld"> @import url(lib/01pda.css); </style> <style type="text/css" media="screen" title="principal"> @import url(lib/principalquasar40.css); </style>   Not owning a pda myself, I built this using the Opera's small screen mode on a shrank window.   Now I saw the uploaded page on a friends pda and got surprised: I get the header part of the page (broken yet on color) and the first navigation bar. Nothing else. It seams to me that the pda is trying to render the normal css (principalquasar40.css) and not the pda's one - 01pda.css (where the central column should occupy all the screen not showing any body background and widths should be mutch smaller).   I'm using fully standard html 4.01 strict valid code and the css files are valid.   I'm also using _javascript_ to manipulate the dom to create the appearence of a shadowed text (in order to avoid a double header text on text browsers, a script from http://www.kryogenix.org/code/browser/aqdropshadow/) on the header and a colapsing menu on the right (from http://www.onlinetools.org/tools/puredom/index.html) - wich works on mozillas, opera 7.5 and iewin 5.5 and 6 without problems at least on my pc. The script isn't supposed to work or give any error on browsers that do not supporte the DOM, since it is only meant for presentational issues.   I then decided to look arround for more info; I found this text on one of the sites google gave me upon the search for "pda+web design":     ________________" There are four basic rules to create a good site for a palm sized device:   1: Stick to basic HTML tags such as: P, BR, B, I, PRE, headers (H1-6), BLOCKQUOTE, CENTER, UL, OL, LI, images, tables    2: Avoid frames, layers, imagemaps, plugins, _javascript_, Java, and CSS   3: Keep your screens small, and avoid clutter   4: Be aware of how graphics are displayed "_______________ Now, I can live with pda giving me like 1 taller size for h1 headers and the rest of the fonts at the same size, optimizing or reducing images, and so on. But what this tips tell me is that I should not use the standards to write code for pdas, wich means, if I really want to show the site on smaller screens, I will have to work on another version.   Are my conclusions true? Or can there be another reason for the pda not to be showing what is intended, like not supporting scripting and messing up the rendering, being downloading the screen css and not the handheld for precedence issues over the css title, the css being to big for its buffer, anything...   The site is at: http://unbound.no.sapo.pt/acad/index.htm   Thank you very mutch in advance,   Isabel Santos