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
|
- Re: [WSG] Web Design for PDA? Isabel Santos
- Re: [WSG] Web Design for PDA? Lachlan Hardy
- Re: [WSG] Web Design for PDA? Dilip Samuel
- Re: [WSG] Web Design for PDA? Dilip Samuel