html confusion, what are the guidelines with a ppc?

[Aerestis]

First off, I hope this is an ok forum to post this in. I was going to try developers but then I thought maybe that was software only. Moving the thread would be appreciated if it could be in a better place :)

Alright, well my problem is that I have no idea what the html guidelines are when designing a website for a ppc. I've got a page in the works just in case a client ever wanted to check up on stuff while on the move, but I'm not quite sure how I would need to make this page in order for it to appear as I want it to.

Yes, I would check it on my own ppc, but sadly I have a palm.

It's a site contained in a table, so if someone can just let me know what the size of the table should be to fit into the ppc browser perfectly then I would be glad. You can view it at http://www.leafhoney.net/pdaindex.html

edit: Wow, it looks terrible in IE
edit again: No, it's fixed

I would reaalllyyyy appreciate any help. And as for phones that can browse the internet... Well, do those even exist?

(I'm clueless...)

[pacemkr]

I think this link would be helpful, check it out.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/guide_ppc/htm/designing_web_sites_for_internet_explorer_for_pocket_pc_lmlt.asp

[Aerestis]

Nice thanks! So if it manages content to fit then I guess I'm set. I'm setting it to be five pixels less than full width and twenty less and full height. I have a feeling it will look just fine. I'm using html 4.0 so that's cool. It's only... ten kilobytes or so so it shouldn't be too hard too download. Once it has client content that will be a whole new story, but it's more so so clients can check to see progress to a better extent than if I just e mail them the changes, and if they need to download a few images that are semi-big, I'm sure they won't mind.

I didn't know that handhelds were that capable online :)

[sheik]

I use tables with a width set to 100% which works fine in Pocket Internet Explorer 2002 and 2003, and presumably looks OK on PDAs with different resoloutions to PPCs too.

CSS works very well in PIE 2003 but I wouldn't make your mobile site rely on it as there are a lot of PPC2002 and non-CSS enabled Palm users out there!

By the way, the best browser I've seen on a PDA is easily Opera on a Sharp Zaurus. If we all had something similar to that, web designing for handhelds would be a lot easier...

/\dam

[Aerestis]

I love opera... I'm using it right now. It always understand me, even when I write my code wrong. I really think opera is the wonder browser.

Can anyone view my pda friendly site for me? http://www.leafhoney.net/pdaindex.html

I'm really curious as to how it looks. If you can get screen shots then I would be SOoooo excited and greatful. I won't see this on a mobile device unless some sort of good-lucky thing happens.

Well, I figure I'm doing it right. But the 100% tip is excellent, sometimes I wonder where my problem solving skills are. (and this is only html :cry: )

[Steven Cedrone]

http://www.pocketpclinks.com/images/Leafhoney.JPG

The one thing I did notice, when you return to your main page after clicking on a link, you see that "box" around the link that you are returning from. Also, I didn't see any text (and because of that, no scroll bar)

Hope I explained that correctly! :wink:

Steve

[pacemkr]

Maybe you should consider adding a script to detect that Pocket IE is bein used. Detect if PPC browser is bein used and forward to the right page, otherwise keep loading index.html.

That way you can just give your link as leafhoney.net and not worry about the site looking wrong. And maybe remove the mobile friendly link? Meaning automate it. Or better yet put it somewhere on the first page, but remove it from the main menu. Lets face it, the majority of people visiting your site will probably be using a PC, not a PPC.

I also do not see any text and I know why. You are using iframe's, which are apparantly unsupported. I see you have the iframe nested in a table cell on a PC, on PPC it looks like an empty table cell.
I used to use iframes, but the support for them is not so great (usually none) in Explorer browsers, which is a shame its a great tool. Instead I just put the data right on the page, meaning instead of loading from another html file, just copy paste the info onto current page during the design process and make copies of the page for each menu item. I hope you understand what I'm trying to say. The iframes are the problem however, thats for sure.

Steven's screenshot is basically all that is visible on your site as is. Only the client login link works, which gives you a page with the login text boxes and stuff.

Here is a link that might be helpful in detecting the Pocket IE browser.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/guide_ppc/htm/designing_web_sites_for_internet_explorer_for_pocket_pc_lmlt.asp

And just in case here is how I implemented this on my site.

<script language="JavaScript">
<!--
var browser = '';
var version = '';
// BROWSER?
if (browser == '')
{
if (navigator.appName.indexOf('Microsoft') != -1)
browser = 'IE';
else if (navigator.appName.indexOf('Netscape'||'Mozilla') != -1)
browser = 'M';
else
browser = 'M';
}
// -->
</script>

I guess (not tested) the browser string for Pocket IE will equal to.
on ppc 2000: "Pocket Internet Explorer 2000"
on ppc 2002: "Pocket Internet Explorer 2002"
and on ppc 2003: "Pocket IE"

[Wiggster]

Well, here's my 2 cents, hope they're useful...

IFrames don't play well in Pocket PC (nor in some other browsers). As you noticed from the screenshot, there's no text at all. If you want to format for Pocket PC, don't use any sort of frames at all-- just use a regular HTML page. It looks like you're using 1and1, so you should be able to use PHP as a template engine, so you won't have to use frames at all. If you need help doing this, just drop a line.

Also, a few stylistic notes about the HTML: an HTML comment looks like
<!-- Comment goes here. This is ignored by the browser -->
and not
<!__ Comment __!>

Also, when you do
<a href="page.html" border="0" target="main"><img src="filler.gif" width="4 px" height="1 px" border="0">Link</a>
It would be better to put the filler image outside the <a>, so that when users click on it, PIE displays a box around the link, rather than a box around the link and the image. This is part of what Steven is complaining about, but the box staying there is part of PIE, not your page. But the least we can do is make it a pretty box :mrgreen:

And here's the PHP code you can use to detect whether or not a user is connecting from a PDA:

<?php
$ua = $HTTP_USER_AGENT;
$pocket = false;
if ((stristr($ua, "Windows CE") or stristr($ua, "AvantGo") or stristr($ua, "Mazingo") or stristr($ua, "Mobile") or stristr($ua, "T68") or stristr($ua, "Syncalot") or stristr($ua, "Blazer")))
$pocket=true;
if(($pocket && $_REQUEST["desktop"] != "true") || $_REQUEST["mobile"] == "true")
$pocket = true;


if($pocket)
header("Location: indexpda.html");
else
header("Location: indexfull.html");
exit;
?>

Just put that in a file named index.php, and you can just link to your domain name. It also supports breaking out of the current set if you specify a link to http://leafhoney.net/?desktop=true or force it to be pocket via http://leafhoney.net/?mobile=true.

Oh, and as for PHONES browsing the internet? There are lots of WAP phones out there; they're basic phones that can connect to the internet. That in itself is a whole other discussion, but you might check out a few WAP FAQ (http://archive.devx.com/wireless/articles/WAP/WAPFAQ.asp)s.

[Aerestis]

ahh you're all so helpful! This is great. I'll ditch the iframe then... Macintosh computers hate them as well :)

I'll look into using the php script. It makes so much more sense than using a link. Ultimately that will probably confuse some clients and make others wonder why I would bother, or something. I'm pretty sure that there is virtually no point in having this version of the site, but you never know. Maybe if I have a ppc with me or a client does we could look over some content and it would come in handy.

Thanks a lot Steve, pacemkr, and adwignal. I'll try to fix everything, and hopefully someone can let me know how it's doing.

[Aerestis]

I believe I've got it fixed. Does anyone want to check it out for me? I would really appreciate it. I think you should be able to go directly to http://www.leafhoney.net without going to the pdaindex address. I included the php script that adwignal posted to detect browsers. Hopefully it will work :)

Web design is the best :wink: I wish I had a few more years of experience.

[pacemkr]

Unfortunately it doesn't work for me. :(
I'm using ppc 2003 and the original page is loading. (index.html that is)

Maybe you could post some code. I'm not familiar with PHP myself, but I'm sure there are people here that can hep out.

[Aerestis]

<?php
$ua = $HTTP_USER_AGENT;
$pocket = false;

if ((stristr($ua, "Windows CE") or stristr($ua, "AvantGo") or stristr($ua, "Mazingo") or stristr($ua, "Mobile") or stristr($ua, "T68") or stristr($ua, "Syncalot") or stristr($ua, "Blazer"))) {
$pocket=true;
}

if(($pocket && $_REQUEST["desktop"] != "true") || $_REQUEST["mobile"] == "true") {
$pocket = true;
}

if($pocket) {
header("Location: indexpda.html");
exit;
}
?>

That's the way I've got the php code, at the very top of the document.

pllaahhhhbllaarrgghhh!

[Wiggster]

It redirects to http://www.leafhoney.net/indexpda.html, which is a 404 for me. Glad to know my code works, just can't see the page when it doesn't exist... :wink:

[Addendum]
Ah, the URL changed to pdaindex.html, I found after some testing. It works!
http://www.wiggster.com/ppct/LeafHoney1.gif

Since it's designed for PPC, I think you might want to remove the height=100%"
, as it doesn't quite work (the scroll at the bottom leads to white space. Also, I don't think it's HTML 4.0 compliant to have that in a <TD> anymore.

[Wiggster]

Unfortunately it doesn't work for me. :(
I'm using ppc 2003 and the original page is loading. (index.html that is)

Maybe you could post some code. I'm not familiar with PHP myself, but I'm sure there are people here that can hep out.
Are you using the default Pocket IE with no registry settings to change what the browser identifies as, right?

[Aerestis]

Wow, height in a td isn't html 4.0 compliant? How in the world would I change the height then? Or am I clearly misunderstand you? :lol:

Thanks a lot for the code and the screenshot adwignall, I'm glad to see it's working. I'll set the height to be 85% or something if that is a sensible thing to do. Tonight I am learning soooo much php, and I'm so pleased to see that it's not as tricky as I expected.

By the way adwignall, do you have a theme on your ppc? I like the way the top bar and start menu looks quite a bit.

[pacemkr]

I am using the default browser identifier. I just tested it again and it does forward me to the pdaindex.html which gives me the 404. I guess Aerestis is continuously working on it. At the time of posting it didn't work. Oh well at least it works now. 8)

[pacemkr]

... How in the world would I change the height then? ...

Style sheets, which are not that well supported in older browsers. :lol:

[juni]

I didn't read any guidelines, I just made my page very thin :D

[Wiggster]

Wow, height in a td isn't html 4.0 compliant? How in the world would I change the height then? Or am I clearly misunderstand you? :lol:
You understood me. Run the page through http://validator.w3.org/ if you don't believe me. The way I specify height if I need to is to add a 1x1 transparent GIF, and specify it with a new height and width of 1, that prevents it from being SMALLER than that size.


Thanks a lot for the code and the screenshot adwignall, I'm glad to see it's working. I'll set the height to be 85% or something if that is a sensible thing to do. Tonight I am learning soooo much php, and I'm so pleased to see that it's not as tricky as I expected.
The page is still redirecting to indexpda.html instead of pdaindex.html, so you'll want to change that soon :D


By the way adwignall, do you have a theme on your ppc? I like the way the top bar and start menu looks quite a bit.
Yea, here's how my screen looks:
http://www.wiggster.com/ppct/Today.jpg
The theme is called myPDA (http://www2.wincustomize.com/skins.asp?library=14&SkinID=538), and it uses Dashboard and Wisbar Advanced (the latter of which is free).

[Aerestis]

nice :) I like it

Well the issue with indexpda.html was resolved a number of times by myself but my buddy didn't realize that it was actually called pdaindex.html, and without knowing, we both 'fixed' the html document around five times. Heh, good old communication. I finally mailed him wondering if he was running into the issue of files not saving properly 8)

So it should be alright now. That makes a lot of sense with the transparent GIF thing... I actually used to use that method, but I thought it was the incorrect method. I didn't use it consistantly though, just when the browser wouldn't cooperate with me. I'm going to make sure my documents are measured properly soon, because I hate the idea of people not seeing the site as it's intended to look.

Once again, thanks, it's great to have the help.