I redesigned my website with SiteSpinner last week and published it. I'm happy with it for now, but when I use my PocketPC and view the site with Pocket Internet Explorer, the objects on the page are misplaced. In particular I have some buttons that use the composite of 3 overlapping images and some Mouse FX to animate them and when viewed in Pocket IE the images are no longer overlapping.

Has anyone else successfully constructed a site that looks OK on Pocket IE? Are there some tricks I don't know?

I know it would be tempting to say that Pocket IE is deficient, but it is out there and websites need to be able to render correctly in that browser.

Thanks,

TM

By the way, the URL to my site is as follows:

http://home.earthlink.net/~tomm2

TM

Nice looking site. Where are the buttons that are causing the main problem?

I know nothing about Pocket IE. A limited version of IE4? If it is on a mobile, your design width of 800x600 is likely to be way too big and may be the source of the problem.

There are lots of references on the web about designing for mobile browsers. You may find the best solution is to have one design for normal browsers, as you have now, and another specifically for mobiles.

Also, if you can tell us what broswer and version your Pocket PC is using that may give more clues.

Hi,

The unit is an HP iPAQ 4155. The OS is Windows Mobile 2003 aka Windows CE 4.20.

I found this website that describes some of the attributes of the version of Pocket IE on Windows Mobile 2003:

http://builder.com.com/5100-6373-5056990.html

TM

Here are some screenshots from the PocketPC:

1. This is of the top of the home page for http://home.earthlink.net/~tomm2 - What appears at the top is the background rectangle from the webcam image. This was the last thing I added to the page with the SiteSpinner app.


2. This is near the middle of the same page and illustrates the oddball ordering of objects on the page:


3. This is the top of the "Astronomy" page ( http://home.earthlink.net/~tomm2/Astronomy.htm ) and shows more oddball ordering of objects.


4. This is at the bottom of the "Astronomy" page and shows the unstacked images I used for my animated "Home" button. The top image of the 3 is "hot" and will return to the site home when clicked.


5. This image is at the top of the "Spider" page ( http://home.earthlink.net/~tomm2/spider.htm )and again shows the unstacked "Home" button images.

It looks like there is no support for CSS (Cascading Style Sheets). Is that possible? Can it be switched on or off? See here for one way to check: http://www.outer-court.com/tech/posts/0016.htm

If you have CSS but no support for the # selector, try a page with centering turned off.

If there is no CSS support at all, you will not be able to view SiteSpinner pages as they are intended because CSS is required for absolute positioning. Without that it is impossible (as far a I know) to place one image on top of another in HTML.

Also, when I use

http://www.howtocreate.co.uk/tutorials/jsexamples/brotest/

to test Pocket IE capabilities, it reports that CSS 1 and CSS 2 are supported.


Iframes, Object rendering and Ilayers are not supported.

TM

Another item of interest...

If I open the SiteSpinner-generated HTML preview page in an old version of Frontpage Express I have on my desktop machine, the layout looks exactly like what appears on Pocket IE. Here is a screenshot:



TM

What version of FrontPage is that?

Is JavaScript running on your Browser?

Try a simple page with just two images - one image overlapping the other - no effects or centering. Does that work?

Here is the simple page you suggested:
http://home.earthlink.net/~tomm2/test_page.html

as viewed with Firefox on my desktop:



Here is the page as viewed on my PocketPC:



TM

That is just what it would look like with no CSS (which is problably what the front page problem is) but assuming CSS is there, it looks like the browser is reformating the page to move everything into a column. Opera does this on it's small screen browsers (see http://www.opera.com/products/mobile/dev/html/)

It might be that writing the page so that everything is less than then browser window width would prevent anything from being moved. That does not work with Opera browsers.

Other than that, I don't know the solution. There may be CSS commands you can add to the SiteSpinner header that control what gets moved. You would think there must be otherwise you can never have overlapped images.

If there is something we can add to SiteSpinner in future to help it work we would probaly do it but I suspect it will take some research.

Let us know if you find anything that works.

Your link http://builder.com.com/5100-6373-5056990.html says that the optimum design width is 220 pixels.

Try redoing your two-image test, but limit yourself to 220 pixels width. That may tell us something...

I just changed the width to less than 220 pixels and the result is the same.

I've seen many other pages not specifically developed with PIE in mind that work well in PIE. I've also seen some pages that are garbled like these are appearing.

PIE support should be high on the list for Site Spinner enhancements. Especially with the boom in phone-based browsers, not to mention the increasing number of people like me with Pocket PC devices.

TM

I didn't know that the Opera small screen mode (Opera main menu View > Small Screen) existed -- thanks Harpo.

I've just tried the two-image test in Opera small screen and confirm that also places the images one under the other. Even narrow images placed side by side, not overlapping, are split up and placed one under the other.

Do other mobile browsers (other than PIE/Opera small screen) behave like this?

I tried 'No CSS' under Options > Project Options > More button. That made a big mess of my test page in normal view but had no effect on the small screen view.

So it seems that if you want good mobile performance, you need to design specifically for mobiles, avoiding side-by-side or stacked objects.

I have noticed something similar with my site in Opera using the "zoom" function. Things start to move when you view at sizes below 100%.