I find that I do most of my casual home browsing (i.e. sites like TwistyPuzzles) on my PocketPC these days. In general, the sites I visit work acceptably or even have special views for mobile devices. Alas, TwistyPuzzles.COM is not one of them.
- The browser does support DHTML and JScript (at least the Windows Mobile 2003 version does), but does *not* support the popups used for the menus, so you can't get from the home page to the forms.
- The table structure and content of the templates forces both the index page and the topic page to be too wide for the PPC screen (240px). Generally, the browser is smart enough to "squish" things horizontally, but when you have table cells which are forced to a particular width by wide content (e.g. images) you end up having to scroll side to side to read messages.
The solution is to have the templates do a little bit of browser sniffing, or provide a special /mobile version of the site which has lighter chrome.
The UserAgent strings are:
PPC2002: Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; PPC; 240x320)
PPC2003: Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)
For an example of a site using mobile-friendly templates, see pocketmatrix.com - tweak your browser's user agent setting and visit http://www.pocketmatrix.com/forums/
The best features of a mobile-friendly template are:
- Navigation w/o DHTML (since different mobile browsers have different features)
- No tables - a table implies that the whole page must load & be recursively analyzed to layout the page. On a desktop computer (usually high bandwidth, big screen, lots of processing power) this is pretty fast and so we take tables for granted. On a mobile device even with high bandwidth (I have a 10Mbps WiFi link) the screen is tiny and the CPU is slow so tables are a pain. Use DIVs instead. Also, the browsers respect the page layout enough that tables used to position things side-by-side will always appear side-by-side - even if this page the page unusably wide.
- Images are fine - the browser will squish images wider than 240px (e.g. the Mefferts.com ad) down to 240px. But if you put it in a table next to another image (e.g. twistypuzzles.com) then the page is suddenly 480px wide and everything in the same set of tables is too wide to read.
- Be more creative with the layout of list items, both for the topic list and individual topic pages - for example, instead of relying on columns for name, date, subject, use multiple rows. Or just tables with minimal content, e.g. name/date on one row, subject on the next. Stack information where possible, e.g. in the topic view, show the poster info above each message vs. beside.
Since I'm an old web hack I'll be happy to help out, gated by time.