[WSG] Web Design for PDA?
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);/stylestyle 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 yeton 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 strictvalid 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.5and 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?
Hello Isabel Santos, Please use or convert your HTML to XHTML. XHTML is universal in the sense because small devices can easily read XHTML. This is so because XHTML has properly nested tags. Regards, Dilip Samuel On Mon, 18 Oct 2004 21:45:34 +0100, Isabel Santos [EMAIL PROTECTED] wrote: 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=lib/defaultstylesheet.css 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 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Web Design for PDA?
Hi Isabel, I hope you read my previous mail. Here is the XHTML version of your HTML document with just one error which of course can be rectified by you. The file is sent in the form of an attachment. Let me know your opinion as to how it works now. Regards, Dilip Samuel On Mon, 18 Oct 2004 21:45:34 +0100, Isabel Santos [EMAIL PROTECTED] wrote: 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=lib/defaultstylesheet.css 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 xhtml.rar Description: Binary data
Re: [WSG] Web Design for PDA?
Isabel Santos wrote: 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). Unfortunately this is almost always the case. Many handheld browsers don't check for the handheld media type... yet The list has covered these topics a few times. These threads contain some valuable links that you might want to check out: http://www.mail-archive.com/[EMAIL PROTECTED]/msg05976.html http://www.mail-archive.com/[EMAIL PROTECTED]/msg08279.html Depending on typical PDA support for Javascript, another article you might want to look at is Cameron Adams' Resolution Dependent Layout: http://www.themaninblue.com/writing/perspective/2004/09/21/ Hope that helps some Cheers, Lachlan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
